頁面 · October Cms 筆記

# 頁面 ## **介紹** 所有網站都有網頁。在October，頁面用頁面模板表示。頁面模板文件位于主題目錄的\*\*/ pages**子目錄中。頁面文件名稱不會影響路由，但最好根據頁面功能命名頁面。文件應具有**htm\*\*擴展名。在[配置](http://www.hmoore.net/followme/octobercms/1073310#_73)和[Twig](http://www.hmoore.net/followme/octobercms/1073310#Twig_127)的模板部分所需要的頁面，但[PHP部分](http://www.hmoore.net/followme/octobercms/1073310#PHP_82)是可選的。您可以在下面看到最簡單的主頁示例。 ``` url = "/" == <h1>Hello, world!</h1> ``` ## **頁面配置** 頁面配置在頁面模板文件的“[配置”部分](http://www.hmoore.net/followme/octobercms/1073311#666)中定義。頁面配置定義了路由和呈現頁面和頁面[組件](http://www.hmoore.net/followme/octobercms/1073311#666)所需的頁面參數，這在另一篇文章中有解釋。頁面支持以下配置參數：參數描述**網址**頁面URL，必需。URL語法如下所述。**標題**頁面標題，必填。**布局**頁面[布局](http://www.hmoore.net/followme/octobercms/1073311#666)，可選。如果指定，則應包含布局文件的名稱，不帶擴展名，例如：`default`。**描述**后端界面的頁面描述，可選。### **URL語法** 頁面URL使用**url**配置參數定義。URL應以正斜杠字符開頭，并且可以包含參數。沒有參數的URL是固定和嚴格的。在以下示例中，頁面URL是`/blog`。 ``` url = "/blog" ``` 帶參數的URL更靈活。對于任何地址，將顯示以下示例中定義的URL模式的頁面`/blog/post/something`。October組件或頁面[PHP代碼](http://www.hmoore.net/followme/octobercms/1073311#3)部分可以訪問URL參數。 ``` url = "/blog/post/:post_id" ``` 這是您可以從頁面PHP部分訪問URL參數的方法（有關詳細信息，請參閱[動態頁面](http://www.hmoore.net/followme/octobercms/1073311#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部分內](http://www.hmoore.net/followme/octobercms/1073311#3)，您可以使用October提供的任何[功能，過濾器和標簽](http://www.hmoore.net/followme/octobercms/1073311#3)。任何動態頁面都需要**變量**。October頁面變量可以通過頁面或布局[PHP部分](http://www.hmoore.net/followme/octobercms/1073311#3)或[組件](http://www.hmoore.net/followme/octobercms/1073311#3)來準備。在本文中，我們將介紹如何在PHP部分中準備變量。 ### **頁面執行生命周期** 有跡象表明，可以在頁面和布局PHP部分來定義特殊功能：`onInit`，`onStart`和`onEnd`。在`onInit`初始化所有組件并處理AJAX請求之前執行該函數。該`onStart`函數在頁面執行開始時執行。該`onEnd`函數在呈現頁面之前和頁面[組件](http://www.hmoore.net/followme/octobercms/1073311#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> ``` [標記指南](http://www.hmoore.net/followme/octobercms/1073311#3)中描述了10月提供的默認變量和Twig擴展。[動態布局](http://www.hmoore.net/followme/octobercms/1073311#3)文章中描述了處理程序執行的整體順序。 ### **發送自定義響應** 執行生命周期中定義的所有方法都能夠暫停進程并返回響應。只需返回生命周期功能的響應即可。下面的示例不會加載任何頁面內容并返回字符串\*Hello world！\*到瀏覽器： ``` function onStart() { return 'Hello world!'; } ``` 一個更有用的示例可能是使用`Redirect`Facade觸發重定向： ``` public function onStart() { return Redirect::to('http://google.com'); } ``` ### **處理表單** 您可以使用頁面或布局[PHP部分中](http://www.hmoore.net/followme/octobercms/1073311#3)定義的處理程序方法處理標準表單（處理AJAX請求在[AJAX Framework](http://www.hmoore.net/followme/octobercms/1073311#3)文章中進行了解釋）。使用[form\_open（）](http://www.hmoore.net/followme/octobercms/1073311#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部分](http://www.hmoore.net/followme/octobercms/1073311#3)中定義onHandleForm函數： ``` function onHandleForm() { $this['lastValue'] = post('value'); } ``` 處理程序使用函數加載值`post`并初始化頁面`lastValue`屬性變量，該變量顯示在第一個示例中的表單下方。 > \*\*注意：\*\*如果在頁面布局中定義了具有相同名稱的處理程序，則頁面和頁面[組件](http://www.hmoore.net/followme/octobercms/1073311#3)October將執行頁面處理程序。如果在組件和布局中定義了處理程序，則將執行布局處理程序。處理程序優先級是：頁面，布局，組件。如果要引用特定[組件中](http://www.hmoore.net/followme/octobercms/1073311#3)定義的處理程序，請使用處理程序引用中的組件名稱或別名： ``` {{ form_open({ request: 'myComponent::onHandleForm' }) }} ``` ## **404頁面** 如果主題包含帶有URL的頁面，則`/404`在系統找不到請求的頁面時顯示該頁面。 ## **錯誤頁面** 默認情況下，任何錯誤都將顯示一個詳細的錯誤頁面，其中包含發生錯誤的文件內容，行號和堆棧跟蹤。您可以通過在腳本中將配置值設置`debug`為\*\*false`**config/app.php`并使用URL創建頁面來顯示自定義錯誤頁面`/error`。 ## **頁面變量** 可以在[PHP代碼部分](http://www.hmoore.net/followme/octobercms/1073311#3)或通過引用的[組件中](http://www.hmoore.net/followme/octobercms/1073311#3)訪問頁面的屬性`$this->page`。 ``` function onEnd() { $this->page->title = 'A different page title'; } ``` 也可以使用`this.page`[變量](http://www.hmoore.net/followme/octobercms/1073311#3)在標記中訪問它們。例如，要返回頁面的標題： ``` <p>The title of this page is: {{ this.page.title }}</p> ``` 可以`this.page`在[標記指南中](http://www.hmoore.net/followme/octobercms/1073311#3)找到更多信息。 ## **以編程方式注入頁面資源** 如果需要，您可以使用控制器`addCss`和`addJs`方法將資源（CSS和JavaScript文件）注入頁面。它可以在頁面或[布局](http://www.hmoore.net/followme/octobercms/1073311#3)模板`onStart`的[PHP部分](http://www.hmoore.net/followme/octobercms/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']); } ``` 要在頁面或[布局](http://www.hmoore.net/followme/octobercms/1073311#3)上輸出注入的資源，請使用[{％styles％}](http://www.hmoore.net/followme/octobercms/1073311#3)和[{％scripts％}](http://www.hmoore.net/followme/octobercms/1073311#3)標記。例： ``` <head> ... {% styles %} </head> <body> ... {% scripts %} </body> ```