OctoberCMS-4-頁面

Tianby發表於2019-02-16

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 AcmeBlogClassesPost;

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 %}就可以了。

相關文章