OctoberCMS-8-元件

Tianby發表於2019-02-16
元件

Components

Components這裡我們稱之為元件。

元件是可以配置的構建元素。可以附加到Pages（頁面）、Layouts（佈局）、Partials（部件）中。元件是October的核心特性。每個元件都可以對網站的功能進行擴充套件。元件可以在頁面上輸出HTML程式碼，但是這不是主要的，元件的一個重要功能是處理Ajax請求、處理表單提交回撥，處理頁面執行週期。允許向頁面注入變數或者實現網站安全性。

介紹

啟用元件，如果是後端管理系統中，可以選擇元件皮膚，將元件拖動新增到頁面、部件和佈局中。如果是採用文字編輯模式，則可以將元件的對應模板的名稱新增到對應的模板的配置部分。比如：下面的例子演示瞭如何將todolist元件新增到頁面中。

title = "Components demonstration"
url = "/components"

[demoTodo]
maxItems = 20
==
...

當您引用Components時，它會自動建立一個與Components名稱匹配的Page變數（在前面的示例中為demoTodo）。提供HTML標記的Components可以使用標記在Page上呈現{% component %}，如下所示：

{% component `demoTodo` %}

如果具有相同名稱的兩個元件分配給Page和Layout，Page中的元件將覆蓋佈局中的元件。

元件的別名

如果有兩個註冊Components的名稱相同，則可以使用完全限定的名稱引用元件，併為其指定一個別名：

[OctoberDemoComponentsTodo demoTodoAlias]
maxItems = 20

第一個引數是類名，第二個引數是注入到Page時使用的元件的別名。如果您指定了元件的別名，那麼在引用元件時，可以頁面程式碼中的任何地方使用。下一個示例引用Components別名：

{% component `demoTodoAlias` %}

允許給同一個元件定義多個別名，以實現在同一個頁面上使用一個元件的多個例項。

[demoTodo todoA]
maxItems = 10
[demoTodo todoB]
maxItems = 20

元件使用外部屬性值

預設情況下，屬性值在定義元件的配置部分會進行初始化，這時候屬性值是靜態的，如下所示：

[demoTodo]
maxItems = 20
==
...

不過有一個辦法可以使用外部的引數為元件屬性進行初始化。可以是URL引數，Partial部件引數。使用{{ paramName }}從外部變數載入的值的語法：

[demoTodo]
maxItems = {{ maxItems }}
==
...

假設在上面的示例中，元件 demoTodo 在部件中使用，則部件的變數maxItems**將為元件的變數進行初始化：

{% partial `my-todo-partial` maxItems=`10` %}

如果是URL引數，則使用的方式略有不同：使用{{ :paramName }}名稱以冒號（:）開頭的語法

[demoTodo]
maxItems = {{ :maxItems }}
==
...

元件對應的頁面在配置部分，應該具有相應的URL引數定義：

url = "/todo/:maxItems"

在October的後端，您可以使用Inspector工具將外部值分配給Components屬性。在Inspector中，您不需要使用大括號輸入引數名稱。Inspector中的每個欄位在右側都有一個圖示，用於開啟外部引數名稱編輯器。輸入paramName部分變數或:paramNameURL引數的引數名稱。

自定義預設標記

http://octobercms.com/docs/cm…

後續補充

相關文章