布局 · October Cms 筆記

# 布局 ## **介紹** 布局定義頁面支架，即頁面上重復的所有內容，例如頁眉和頁腳。布局通常包含HTML標記以及HEAD，TITLE和BODY標記。布局模板位于主題目錄的\*\*/ layouts**子目錄中。布局模板文件應具有**htm\*\*擴展名。在布局文件中，您應該使用`{% page %}`標記輸出頁面內容。最簡單的布局示例： ``` <html> <body> {% page %} </body> </html> ``` 要使用[頁面](http://www.hmoore.net/followme/octobercms/1073833#3)布局，頁面應引用“[配置”](http://www.hmoore.net/followme/octobercms/1073833#3)部分中的布局文件名（不帶擴展名）。請記住，如果從[子目錄中](http://www.hmoore.net/followme/octobercms/1073833#3)引用布局，則應指定子目錄名稱。使用default.htm布局的示例頁面模板： ``` url = "/" layout = "default" == Hello, world! ``` 請求此頁面時，其內容將與布局合并，或者更準確地說 - 布局的`{% page %}`標記將替換為頁面內容。前面的示例將生成以下標記： ``` <html> <body> Hello, world! </body> </html> ``` 請注意，您可以在布局中渲染[部分](http://www.hmoore.net/followme/octobercms/1073833#3)。這使您可以在不同布局之間共享公共標記元素。例如，您可以使用部分輸出網站CSS和JavaScript鏈接。這種方法簡化了資源管理 - 如果要添加JavaScript引用，則應修改單個部分而不是編輯所有布局。 “[配置”](http://www.hmoore.net/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. ``` 有關占位符的更多信息[，請參閱標記指南](http://www.hmoore.net/followme/octobercms/1073833#3)。 ## **動態布局** 布局（如頁面）可以使用任何Twig功能。有關詳細信息，請參閱[動態頁面](http://www.hmoore.net/followme/octobercms/1073833#3)文檔。 ### **布局執行生命周期** 內部布局的[PHP部分](http://www.hmoore.net/followme/octobercms/1073833#3)可以定義下列功能用于處理頁面執行生命周期：`onInit`，`onStart`，`onBeforePageStart`和`onEnd`。在`onInit`初始化所有組件并處理AJAX請求之前執行該函數。該`onStart`功能在頁面處理開始時執行。該`onBeforePageStart`函數在布局[組件](http://www.hmoore.net/followme/octobercms/1073833#3)運行后執行，但在執行頁面`onStart`功能之前執行。該`onEnd`函數在呈現頁面后執行。執行處理程序的順序如下： 1. 布局`onInit()`功能。 2. 頁面`onInit()`功能。 3. 布局`onStart()`功能。 4. 布局組件`onRun()`方法。 5. 布局`onBeforePageStart()`功能。 6. 頁面`onStart()`功能。 7. 頁面組件`onRun()`方法。 8. 頁面`onEnd()`功能。 9. 布局`onEnd()`功能。