OctoberCMS-4-頁面

Pages

Pages：頁面；網站頁面的內容由Page模板定義。模板文件位置：themes/theme_name/pages目錄下。頁面文件的擴展名爲htm。文檔結構中，Configuration（配置）和Twig Markup（標記）部分是必須的，PHP代碼部分是可選的。

最簡單的例子

url = "/"
==
<h1>Hello, world!</h1>

頁面配置

頁面配置在Configuration Section中定義。主要定義一下內容：

參數 描述
URL 頁面網址，必填。
title 頁面標題，必填。
Layout 頁面佈局可選。若是指定，應包含佈局文件的名稱，不帶擴展名，例如：default。
Description 後端接口的頁面描述，可選。

URL設置語法

URL以正斜槓" / "開頭，能夠包含參數也能夠不包含。好比：

url = "/blog"

帶參數的URL以" : "開頭。好比下面的url表示，/blog/post/...斜槓後面的就是參數。這個參數能夠被October組件或者PHP代碼部分訪問。

url = "/blog/post/:post_id"

PHP代碼部分訪問的例子以下：參數名與php變量名要求一致。

url = "/blog/post/:post_id"
==
function onStart()
{
    $post_id = $this->param('post_id');
}
==

可選參數：只須要在其後面加？便可。

url = "/blog/post/:post_id?"

URL中間的參數不能是可選的。在下一個示例中，該:post_id參數被標記爲可選，但會當作必須的處理。

url = "/blog/:post_id?/comments"

可選參數運行有默認值。在沒有提供參數的時候，這些默認值做爲POST的值。默認值不能包含任何" 星號 管道符 問號 "

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"

好比下面的例子：

/color/:color/make/:make*/edit
能夠匹配：
/color/brown/make/volkswagen/beetle/retro/edit
其中：
color: 匹配了 brown
make: 匹配了 volkswagen/beetle/retro

動態頁面

在模板的Twig標記部分，可使用October提供的函數，過濾器和標籤。其中的變量在頁面中是必須的，這些變量在 page和layout中，由PHP代碼或者組件提供變量的值。

頁面執行的聲明週期

onInit當全部組件被初始化而且在處理AJAX請求以前，該函數被執行。

onStart 函數在頁面開始執行時執行。

onEnd函數在頁面渲染以前和執行頁面Components以後執行。

在onStart和onEnd函數中，您能夠將變量注入到Twig環境中。使用array notation將變量傳遞給頁面：

url = "/"
==
function onStart()
{
    $this['hello'] = "Hello world!";
}
==
<h3>{{ hello }}</h3>

下面的例子說明了如何從數據庫加載文章的集合，並顯示在頁面上。

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>

發送自定義響應

頁面執行聲明週期中定義的全部函數均可以暫停執行進程，發送自定義的響應。從生命週期函數中返回響應是很簡單的，下面的例子中，頁面將不載入任何頁面內容，只是僅僅返回一個Hello world字符串到瀏覽器。

function onStart()
{
    return 'Hello world!';
}

比較有用的例子是作重定向：

public function onStart()
{
    return Redirect::to('http://google.com');
}

Handling Forms

處理表單：能夠在page或者layout中的PHP代碼部分定義處理表單的函數。使用form_open()函數來定義什麼函數來處理這個表單。

{{ 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>

上述定義的來處理表單的函數爲onHandleForm函數，這個函數是在PHP代碼部分進行定義的：

function onHandleForm()
{
    $this['lastValue'] = post('value');
}

這個函數使用POST獲取表單提交的值，並把這個值給當前頁面的變量 lastValue ，而後在上面的Twig代碼中的最後一行中，把這個值給顯示出來。

關於重名：若是在page、layout和component中定義了具備相同名稱的函數，October將根據以下順序肯定優先級：Page > Layout > Component。老是前面的優先被執行。

若是引用組件中的函數，則使用組件名或者別名，後跟 [ :: ] ，再加函數名。

{{ form_open({ request: 'myComponent::onHandleForm' }) }}

404 Page

當系統找不到目標頁面時，系統將顯示404頁面內容，URL爲 /404 。

Error Page

默認狀況下，任何錯誤都會顯示一個詳細的錯誤頁面，其中包含錯誤發生處的文件內容，行號和堆棧跟蹤。

咱們能夠顯示一個自定義的錯誤頁面。首先在配置文件config/app.php中找到字段debug，並設置爲false。而後創建一個URL爲：" /error "的頁面。

Page Variables

PHP/Component訪問：頁面的屬性能夠被PHP代碼部分或者組件部分經過 $this->page 來進行訪問。好比：

function onEnd()
{
    $this->page->title = 'A different page title';
}

Twig標記訪問：這些變量也能夠被Twig標記訪問，方式爲 this.page.variable ；

<p>The title of this page is: {{ this.page.title }}</p>

程序化方式注入資源到頁面

可使用 addCss addJs 兩個方法，分別注入樣式表和js腳本到頁面中。只須要在頁面或者佈局的PHP代碼部分，經過 onStart 函數進行注入操做。

function onStart()
{
    $this->addCss('assets/css/hello.css');
    $this->addJs('assets/js/app.js');
}

關於路徑，若是以 / 開頭，則說明是網站的根目錄，若是不是 / 開頭，則是指主題目錄。同時，這些路徑支持數組模式，以便提供多個文件的注入。

function onStart()
{
    $this->addCss(['assets/css/hello.css', 'assets/css/goodbye.css']);
    $this->addJs(['assets/js/app.js', 'assets/js/nav.js']);
}

支持SCSS和LESS：

function onStart()
{
    $this->addCss(['assets/less/base.less']);
}

注入的文件如何在頁面或者佈局中輸出呢，經過 {% styles %} 和 {% scripts %}就能夠了。