布局 · October Cms 笔记

# 布局 ## **介绍** 布局定义页面支架，即页面上重复的所有内容，例如页眉和页脚。布局通常包含HTML标记以及HEAD，TITLE和BODY标记。布局模板位于主题目录的\*\*/ layouts**子目录中。布局模板文件应具有**htm\*\*扩展名。在布局文件中，您应该使用`{% page %}`标记输出页面内容。最简单的布局示例： ``` <html> <body> {% page %} </body> </html> ``` 要使用[页面](https://www.kancloud.cn/followme/octobercms/1073833#3)布局，页面应引用“[配置”](https://www.kancloud.cn/followme/octobercms/1073833#3)部分中的布局文件名（不带扩展名）。请记住，如果从[子目录中](https://www.kancloud.cn/followme/octobercms/1073833#3)引用布局，则应指定子目录名称。使用default.htm布局的示例页面模板： ``` url = "/" layout = "default" == Hello, world! ``` 请求此页面时，其内容将与布局合并，或者更准确地说 - 布局的`{% page %}`标记将替换为页面内容。前面的示例将生成以下标记： ``` <html> <body> Hello, world! </body> </html> ``` 请注意，您可以在布局中渲染[部分](https://www.kancloud.cn/followme/octobercms/1073833#3)。这使您可以在不同布局之间共享公共标记元素。例如，您可以使用部分输出网站CSS和JavaScript链接。这种方法简化了资源管理 - 如果要添加JavaScript引用，则应修改单个部分而不是编辑所有布局。 “[配置”](https://www.kancloud.cn/followme/octobercms/1073833#3)部分对于布局是可选的。支持的配置参数是**名称**和**描述**。参数是可选的，并在后端用户界面中使用。示例布局模板及其说明： ``` description = "Basic layout example" == <html> <body> {% page %} </body> </html> ``` ## **占位符** 占位符允许页面将内容注入布局。占位符在布局模板中使用`{% placeholder %}`标记定义。下一个示例显示了一个布局模板，其中包含在HTML HEAD部分中定义的占位符**头**。 ``` <html> <head> {% placeholder head %} </head> ... ``` ``` url = "/my-page" layout = "default" == {% put head %} <link href="/themes/demo/assets/css/page.css" rel="stylesheet"> {% endput %} The page content goes here. ``` 有关占位符的更多信息[，请参阅标记指南](https://www.kancloud.cn/followme/octobercms/1073833#3)。 ## **动态布局** 布局（如页面）可以使用任何Twig功能。有关详细信息，请参阅[动态页面](https://www.kancloud.cn/followme/octobercms/1073833#3)文档。 ### **布局执行生命周期** 内部布局的[PHP部分](https://www.kancloud.cn/followme/octobercms/1073833#3)可以定义下列功能用于处理页面执行生命周期：`onInit`，`onStart`，`onBeforePageStart`和`onEnd`。在`onInit`初始化所有组件并处理AJAX请求之前执行该函数。该`onStart`功能在页面处理开始时执行。该`onBeforePageStart`函数在布局[组件](https://www.kancloud.cn/followme/octobercms/1073833#3)运行后执行，但在执行页面`onStart`功能之前执行。该`onEnd`函数在呈现页面后执行。执行处理程序的顺序如下： 1. 布局`onInit()`功能。 2. 页面`onInit()`功能。 3. 布局`onStart()`功能。 4. 布局组件`onRun()`方法。 5. 布局`onBeforePageStart()`功能。 6. 页面`onStart()`功能。 7. 页面组件`onRun()`方法。 8. 页面`onEnd()`功能。 9. 布局`onEnd()`功能。