布局定义了您页面的通用脚手架,这通常意味着页面上重复出现的所有内容,例如页眉和页脚。它们几乎总是包含 HTML 代码,例如 HEAD、TITLE 和 BODY 标签。
布局模板文件位于您的主题的 layouts 目录中。布局模板文件应具有 htm 扩展名。在布局文件中您应该使用 {% page %} 标签来输出页面内容。接下来是最简单的布局示例。
<html>
<body>
{% page %}
</body>
</html>请记住,如果您从子目录引用一个布局,您应该指定子目录的名称。
要为 页面 使用布局,该页面应在配置部分中引用布局文件名(不带扩展名)。下面是一个使用 default.htm 布局的页面模板示例。
cmstemplate
url = "/"
layout = "default"<p>Hello, world!</p>:::
当请求此页面时,其内容会与布局合并,或者更准确地说 - 布局中的 {% page %} 标签会替换为页面内容。之前的示例会生成以下标记:
<html>
<body>
<p>Hello, world!</p>
</body>
</html>请注意,你可以在布局中渲染局部视图。这允许你共享不同布局之间通用的标记元素。例如,你可以有一个输出网站 CSS 和 JavaScript 链接的局部视图。这种方法简化了资源管理 - 如果你想添加一个 JavaScript 引用,你应该修改一个局部视图,而不是编辑所有布局。
配置部分对于布局是可选的。支持的配置参数是 名称 和 描述。这些参数是可选的,并用于后端用户界面。带有描述的布局模板示例:
description = "Basic layout example"<html>
<body>
{% page %}
</body>
</html>该 meta_title 和 meta_description 属性 所属 一个 [page](pages.md) 支持从页面生命周期中解析变量。以下布局模板将根据活动页面的值设置页面标题。
<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>
...
</html>页面可以使用 {% put %} 和 {% endput %} 标签向占位符注入内容。以下示例演示了一个简单的页面模板,它将 CSS 链接注入到上一个示例中定义的占位符 head。
url = "/my-page"
layout = "default"{% put head %}
<link href="/themes/demo/assets/css/page.css" rel="stylesheet">
{% endput %}
<p>The page content goes here.</p>有关占位符的更多信息,可以在 在标记指南中 找到。
布局,就像页面一样,可以使用任何 Twig 功能。 请参阅文档的动态页面部分以了解详细信息。
在布局的 PHP 部分中,您可以定义以下函数来处理页面执行生命周期:onInit, onStart, onBeforePageStart 和 onEnd。
onInit 函数在所有组件初始化完成且 AJAX 请求被处理之前执行。onStart 函数在页面处理开始时执行。onBeforePageStart 函数在布局 组件 运行后执行,但在页面 onStart 函数执行之前。onEnd 函数在页面渲染完成后执行。处理程序的执行顺序如下:
onInit() 函数onInit() 函数。onStart() 函数onRun()方法。onBeforePageStart() 函数。onStart() 函数。onRun() 方法。onEnd() 函数。onEnd() 函数。访问局部、页面和布局内部的变量和方法时,会使用最近的上下文。请看以下 PHP 代码片段 定义。
function onStart()
{
$this['myVariable'] = 'foo';
}
function myMethod()
{
return 'bar';
}在上述示例中,在 Twig 内部访问 myVariable 或 this.myMethod() 时,将按以下顺序检查是否存在:
布局可以在其设置中指定 is_priority 属性,以激活优先级模式。在正常情况下,布局内容会在页面内容之后渲染。这使得页面可以操作布局属性,例如标题或元描述。从视觉上看,顺序是这样的。
Layout (3) ← Page (1) → Partials (2)在优先模式下,布局使用更自然的加载顺序,其中 {% page %} 标签与布局内容内联渲染。然而,使用此模式时不支持占位符。优先布局的加载顺序更像这样。
Layout (1) → Page (2) → Partials (3)这在构建 API 端点时特别有用。在以下示例中,页面逻辑将不会运行,因为页面标签从未被调用。
description = "API Layout"
is_priority = 1{% if false %}
{% page %}
{% endif %}