[TOC] ## **介紹** 所有網站都有網頁。在October，頁面用頁面模板表示。頁面模板文件位于主題目錄的**/ pages**子目錄中。頁面文件名稱不會影響路由，但最好根據頁面功能命名頁面。文件應具有**htm**擴展名。在[配置](1073310#_73)和[Twig](1073310#Twig_127)的模板部分所需要的頁面，但[PHP部分](1073310#PHP_82)是可選的。您可以在下面看到最簡單的主頁示例。 ~~~ url = "/" == <h1>Hello, world!</h1> ~~~ ## **頁面配置** 頁面配置在頁面模板文件的“[配置”部分](#666)中定義。頁面配置定義了路由和呈現頁面和頁面[組件](#666)所需的頁面參數，這在另一篇文章中有解釋。頁面支持以下配置參數： | 參數 | 描述 | | --- | --- | | **網址** | 頁面URL，必需。URL語法如下所述。 | | **標題** | 頁面標題，必填。 | | **布局** | 頁面[布局](#666)，可選。如果指定，則應包含布局文件的名稱，不帶擴展名，例如：`default`。 | | **描述** | 后端界面的頁面描述，可選。 | ### **URL語法** 頁面URL使用**url**配置參數定義。URL應以正斜杠字符開頭，并且可以包含參數。沒有參數的URL是固定和嚴格的。在以下示例中，頁面URL是`/blog`。 ~~~ url = "/blog" ~~~ 帶參數的URL更靈活。對于任何地址，將顯示以下示例中定義的URL模式的頁面`/blog/post/something`。October組件或頁面[PHP代碼](#3)部分可以訪問URL參數。 ~~~ url = "/blog/post/:post_id" ~~~ 這是您可以從頁面PHP部分訪問URL參數的方法（有關詳細信息，請參閱[動態頁面](#3)部分）： ~~~ url = "/blog/post/:post_id" == function onStart() { $post_id = $this->param('post_id'); } == ~~~ 參數名稱應與PHP變量名稱兼容。要使參數可選，請在其名稱后添加問號： ~~~ url = "/blog/post/:post_id?" ~~~ URL中間的參數不能是可選的。在下一個示例中，`:post_id`參數標記為可選，但會根據需要進行處理。 ~~~ url = "/blog/:post_id?/comments" ~~~ 可選參數可以具有默認值，如果URL中未顯示實際參數值，則默認值將用作回退值。默認值不能包含任何星號，管道符號或問號。在**問號**后面指定默認值。在下一個示例中，`category_id`參數將`10`用于URL`/blog/category`。 ~~~ url = "/blog/category/:category_id?10" ~~~ 您還可以使用正則表達式來驗證參數。要添加驗證表達式，請在參數名稱（或問號）后添加管道符號并指定表達式。表達式中不允許使用正斜杠符號。例子： ~~~ url = "/blog/:post_id|^[0-9]+$/comments" - this will match /blog/10/comments ... url = "/blog/:post_id|^[0-9]+$" - this will match /blog/3 ... url = "/blog/:post_name?|^[a-z0-9\-]+$" - this will match /blog/my-blog-post ~~~ 通過在參數**后面**放置一個**星號**，可以使用特殊的*通配符*參數。與常規參數不同，通配符參數可以匹配一個或多個URL段。URL只能包含單個通配符參數，不能使用正則表達式，或者后跟可選參數。 ~~~ url = "/blog/:category*/:slug" ~~~ 例如，類似的URL`/color/:color/make/:make*/edit`將匹配`/color/brown/make/volkswagen/beetle/retro/edit`并提取以下參數值： * 顏色：`brown` * 使：`volkswagen/beetle/retro` > **注意：**子目錄不會影響頁面URL - URL僅使用**url**參數定義。 ## **動態頁面** 在頁面模板的[Twig部分內](#3)，您可以使用October提供的任何[功能，過濾器和標簽](#3)。任何動態頁面都需要**變量**。October頁面變量可以通過頁面或布局[PHP部分](#3)或[組件](#3)來準備。在本文中，我們將介紹如何在PHP部分中準備變量。 ### **頁面執行生命周期** 有跡象表明，可以在頁面和布局PHP部分來定義特殊功能：`onInit`，`onStart`和`onEnd`。在`onInit`初始化所有組件并處理AJAX請求之前執行該函數。該`onStart`函數在頁面執行開始時執行。該`onEnd`函數在呈現頁面之前和頁面[組件](#3)執行之后執行。在onStart和onEnd函數中，您可以將變量注入Twig環境。使用`array notation`將變量傳遞給頁面： ~~~ url = "/" == function onStart() { $this['hello'] = "Hello world!"; } == <h3>{{ hello }}</h3> ~~~ 下一個例子更復雜。它顯示了如何從數據庫加載博客文章集并在頁面上顯示（Acme \ Blog插件是虛構的）。 ~~~ url = "/blog" == use Acme\Blog\Classes\Post; function onStart() { $this['posts'] = Post::orderBy('created_at', 'desc')->get(); } == <h2>Latest posts</h2> <ul> {% for post in posts %} <h3>{{ post.title }}</h3> {{ post.content }} {% endfor %} </ul> ~~~ [標記指南](#3)中描述了10月提供的默認變量和Twig擴展。[動態布局](#3)文章中描述了處理程序執行的整體順序。 ### **發送自定義響應** 執行生命周期中定義的所有方法都能夠暫停進程并返回響應。只需返回生命周期功能的響應即可。下面的示例不會加載任何頁面內容并返回字符串*Hello world！*到瀏覽器： ~~~ function onStart() { return 'Hello world!'; } ~~~ 一個更有用的示例可能是使用`Redirect`Facade觸發重定向： ~~~ public function onStart() { return Redirect::to('http://google.com'); } ~~~ ### **處理表單** 您可以使用頁面或布局[PHP部分中](#3)定義的處理程序方法處理標準表單（處理AJAX請求在[AJAX Framework](#3)文章中進行了解釋）。使用[form\_open（）](#3)函數定義引用事件處理程序的表單。例： ~~~ {{ form_open({ request: 'onHandleForm' }) }} Please enter a string: <input type="text" name="value"/> <input type="submit" value="Submit me!"/> {{ form_close() }} <p>Last submitted value: {{ lastValue }}</p> ~~~ 可以通過以下方式在頁面或布局[PHP部分](#3)中定義onHandleForm函數： ~~~ function onHandleForm() { $this['lastValue'] = post('value'); } ~~~ 處理程序使用函數加載值`post`并初始化頁面`lastValue`屬性變量，該變量顯示在第一個示例中的表單下方。 > **注意：**如果在頁面布局中定義了具有相同名稱的處理程序，則頁面和頁面[組件](#3)October將執行頁面處理程序。如果在組件和布局中定義了處理程序，則將執行布局處理程序。處理程序優先級是：頁面，布局，組件。 如果要引用特定[組件中](#3)定義的處理程序，請使用處理程序引用中的組件名稱或別名： ~~~ {{ form_open({ request: 'myComponent::onHandleForm' }) }} ~~~ ## **404頁面** 如果主題包含帶有URL的頁面，則`/404`在系統找不到請求的頁面時顯示該頁面。 ## **錯誤頁面** 默認情況下，任何錯誤都將顯示一個詳細的錯誤頁面，其中包含發生錯誤的文件內容，行號和堆棧跟蹤。您可以通過在腳本中將配置值設置`debug`為**false**`config/app.php`并使用URL創建頁面來顯示自定義錯誤頁面`/error`。 ## **頁面變量** 可以在[PHP代碼部分](#3)或通過引用的[組件中](#3)訪問頁面的屬性`$this->page`。 ~~~ function onEnd() { $this->page->title = 'A different page title'; } ~~~ 也可以使用`this.page`[變量](#3)在標記中訪問它們。例如，要返回頁面的標題： ~~~ <p>The title of this page is: {{ this.page.title }}</p> ~~~ 可以`this.page`在[標記指南中](#3)找到更多信息。 ## **以編程方式注入頁面資源** 如果需要，您可以使用控制器`addCss`和`addJs`方法將資源（CSS和JavaScript文件）注入頁面。它可以在頁面或[布局](#3)模板`onStart`的[PHP部分](3)中定義的函數中完成。例： ~~~ function onStart() { $this->addCss('assets/css/hello.css'); $this->addJs('assets/js/app.js'); } ~~~ 如果`addCss`和`addJs`method參數中指定的路徑以斜杠（/）開頭，那么它將相對于網站根目錄。如果資產路徑不是以斜杠開頭，那么它與主題相關。 注入的資源可以通過將它們作為數組傳遞來組合： ~~~ function onStart() { $this->addCss(['assets/css/hello.css', 'assets/css/goodbye.css']); $this->addJs(['assets/js/app.js', 'assets/js/nav.js']); } ~~~ 可以使用組合器注入和編譯LESS和SCSS資產： ~~~ function onStart() { $this->addCss(['assets/less/base.less']); } ~~~ 要在頁面或[布局](#3)上輸出注入的資源，請使用[{％styles％}](#3)和[{％scripts％}](#3)標記。例： ~~~ <head> ... {% styles %} </head> <body> ... {% scripts %} </body> ~~~