By accessing the website and accepting the Cookie Policy, you agree to use the cookies provided by the Site in accordance with to analyze traffic, remember your preferences, and optimize your experience.
OctoberCMS官方文档 6-布局 (Layout)
October CMS    2018-10-22 18:54:42    47    0    0
emengweb   October CMS

Layout 概述

Layout,此处称为布局。定义了一个页面框架,即页面上的所有的重复的内容,例如header部分和footer部分。Layout通常包含HTML标签、HEAD标签、TITLE标签和BODY标签。

位置:安装的主题的目录,layout子目录中。

扩展名:htm

Layout中输出内容应该使用page标签进行页面内容输出。{% page %};最近简单的方式:

<html>
    <body>
        {% page %}
    </body>
</html>

Page与Layout关系,Page可以使用不同的Layout,Layout也可以通过Page来引用多个page页面。但是,他们之间建立联系的是Page中的设置,然后Layout中的{% page %}才能正确的引用这个page,才可以通过Page的URL结合Layout布局把页面显示出来。

要为一个Page使用Layout,Page的Configuration Section部分必须引用Layout文件名称(不带扩展名)。请记住,如果从子目录引用Layout,则应指定子目录名称。使用default.htm的Layout的示例页面模板:

url = "/"
layout = "default"
==
<p>Hello, world!</p>

当请求该页面时,其内容与Layout合并,或者更确切地说 - Layout的{% page %}标签被页面内容替换。前面的示例会生成以下标记:

<html>
    <body>
        <p>Hello, world!</p>
    </body>
</html>

请注意,您可以在Layout中渲染部件。这使您可以在不同的Layout之间共享常用元素。例如,您可以有一个输出网站CSS和JavaScript链接的部件。这种方法简化了资源的管理。 如果你想添加一个JavaScript引用,你应该修改一个小部件,而不是编辑所有的Layout。

布局中的配置区域是可选的,支持name和description。

description = "Basic layout example"
==
<html>
    <body>
        {% page %}
    </body>
</html>

Placeholders

Placeholders这里称为【占位符】,可以允许页面将内容注入到布局中。占位符在布局模板中用{% placeholder %}标签定义。下面的例子显示了一个在HTML HEAD部分中定义了一个叫head的【占位符】的Layout模板。

<html>
    <head>
        {% placeholder head %}
    </head>
    ...

页面可以使用{% put %}和{% endput %}标签将内容注入【占位符】。以下示例演示了一个简单的页面模板,它将CSS链接注入前一示例中定义的叫head占位符。

url = "/my-page"
layout = "default"
==
{% put head %}
    
{% endput %}

The page content goes here.

动态布局

和Page一样,Layout可以使用任何Twig特性。

布局的执行生命周期

布局中的PHP代码部分,可以定义页面周期函数:

onInit 当所有组件被初始化并且在处理AJAX请求之前,该函数被执行。

onStart 功能在页面处理开始时执行。

onBeforePageStart 函数在Layout组件运行后执行,但在页面的onStart函数执行之前执行。

onEnd 函数在页面呈现后执行。

处理程序执行的顺序如下:

  1. Layout onInit() function.
  2. Page onInit() function.
  3. Layout onStart() function.
  4. Layout components onRun() method.
  5. Layout onBeforePageStart() function.
  6. Page onStart() function.
  7. Page components onRun() method.
  8. Page onEnd() function.
  9. Layout onEnd() function.

上一篇: October CMS官方文档 1-安装 (Setup)

下一篇: OctoberCMS官方文档 8-组件 (Components)

47 人读过
文档导航