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…

後續補充

相關文章