布局

布局为您的页面定义了一个公用的框架，这通常意味着在每个页面上重复的所有内容，例如页眉和页脚。几乎所有页面都包含的 HTML 代码，例如 HEAD、TITLE 和 BODY 标签。

布局模板文件位于主题的 layouts 目录中。布局模板文件应具有 htm 扩展名。在布局文件中，您应该使用 {% page %} 标签来输出页面内容。接下来是最简单的布局示例。

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

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

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

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

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

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

Configuration 部件对于布局是可选的。支持的配置参数是 name 和 description。这些参数是可选的，用于后端用户界面。带有描述的示例布局模板：

description = "基本布局示例"
==
<html>
    <body>
        {% page %}
    </body>
</html>

# 使用动态页面标题

页面的 meta_title 和 meta_description 属性支持从页面生命周期解析变量。以下布局模板将根据活动页面的值设置页面标题。

<html>
    <head>
        <title>{{ this.page.meta_title }} - October CMS</title>
    </head>
    <body>
        {% page %}
    </body>
<html>

然后页面模板可以使用类似于 Twig 的变量语法使用全局环境中可用的值定义其标题，在这种情况下使用 post.title 值。

url = "/blog"
meta_title = "{{ post.title }} - Blog"

注意：仅支持基本的 Twig 变量。不能使用过滤器、标签和函数。

# 占位符

占位符允许页面向布局注入内容。占位符在布局模板中使用 {% placeholder %} 标签定义。下一个示例显示了一个布局模板，其中在 HTML HEAD 中定义了一个占位符 head。

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

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

url = "/my-page"
layout = "default"
==
{% put head %}
    <link href="/themes/demo/assets/css/page.css" rel="stylesheet">
{% endput %}

<p>页面内容在这里</p>

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

# 动态布局

布局，就像页面一样，可以使用任何 Twig 功能。详情请参考动态页面文档。

# 布局执行生命周期

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

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

1.布局onInit()函数。 1.页面onInit()函数。 1.布局onStart()函数。 1.布局组件onRun()方法。 1.布局onBeforePageStart()函数。 1.页面onStart()函数。 1.页面组件onRun()方法。 1.页面onEnd()函数。 1.布局onEnd()函数。

← 部件内容块 →

布局

布局

# 使用动态页面标题

# 占位符

# 动态布局

# 布局执行生命周期

在此页