CMS 布局

CMS 布局

介绍
占位符
动态布局
- 布局执行的生命周期

介绍

布局是定义页面框架，即在页面上重复的所有内容，例如页眉和页脚。布局通常包含HTML标签以及HEAD，TITLE和BODY标签。

布局模板位于主题目录的 /layouts 子目录中。布局模板文件应以后缀名 htm 结尾。在布局文件中，您应该使用{%page%}标签来输出页面内容。最简单的布局示例：

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

在page页面中使用布局时，page应该在Configuration部分中引用布局文件名称(不带扩展名)。请记住，如果从子目录引用布局，则应指定子目录名称。使用default.htm布局的示例页面模板： url = “/“

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

当请求示例中的页面时，其page内容将与layout布局合并，或者更准确地说 - 布局的{%page%}标签将替换为page页面中的内容。前面的示例将生成以下内容：

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

注意，您可以在布局中使用partials。这使您可以在不同布局之间共享公共标签元素。例如，您可以使用partials输出网站CSS和JavaScript链接。这种方法简化了资源管理 - 如果要添加JavaScript引用，则应修改单个partials而不是编辑所有layout布局。

配置部分对于layout布局是可选的。支持的配置参数是 name 和 description。参数是可选的，并在后端用户界面中使用。带有描述的示例布局模板：

description = "简单的布局"
==
<html>
    <body>
        {% page %}
    </body>
</html>

占位符

占位符允许page页面将内容注入布局。占位符在布局模板中通过{%placeholder%}标签定义。下一个示例显示了在HTML HEAD部分中定义的占位符 head 的布局模板。

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

pages可以使用{%put%}和{%endput%}标记向占位符注入内容。以下示例演示了一个简单的页面模板，该模板将CSS链接注入前一个示例中定义的占位符 head中。

url = "/my-page"
layout = "default"
==
{% put head %}
    <link href="/themes/demo/assets/css/page.css" rel="stylesheet">
{% endput %}
<p>这里是页面的内容</p>

M有关占位符的更多信息可以在标记指南中找到。

动态布局

布局像page页面一样，可以使用任何Twig功能。有关详细信息，请参阅动态页面文档。

布局执行的生命周期

在布局的PHP部分中，您可以定义以下函数来处理页面执行生命周期：onInit，onStart，onBeforePageStart和onEnd。

onInit方法会在当初始化所有组件并处理AJAX请求之前执行， onStart函数在页面处理开始时执行。onBeforePageStart函数在布局组件运行之后但在执行页面的onStart函数之前执行。在呈现页面后执行onEnd函数。执行处理程序的顺序如下：

Layout onInit() function.
Page onInit() function.
Layout onStart() function.
Layout components onRun() method.
Layout onBeforePageStart() function.
Page onStart() function.
Page components onRun() method.
Page onEnd() function.
Layout onEnd() function.