組件 · October Cms 筆記

# 組件組件是可配置的構建元素，可以附加到任何頁面，部分或布局。組件是十月的主要特征。每個組件都實現了一些擴展您的網站的功能。組件可以在頁面上輸出HTML標記，但這不是必需的 - 組件的其他重要功能是處理[AJAX請求](http://www.hmoore.net/followme/octobercms/1073835#3)，處理表單回發和處理頁面執行周期，允許向頁面注入變量或實現網站安全性。本文介紹了組件的基礎知識，但沒有解釋如何使用[AJAX組件](http://www.hmoore.net/followme/octobercms/1073835#3)或將組件作為插件的一部分進行[開發](http://www.hmoore.net/followme/octobercms/1073835#3)。 > \*\*注意：\*\*在partials中使用組件具有有限的功能，這在[動態partials](http://www.hmoore.net/followme/octobercms/1073835#3)文章中有更詳細的描述。 ## **介紹** 如果使用后端用戶界面，則可以通過單擊“組件”面板中的組件將組件添加到頁面，部分和布局中。如果使用文本編輯器，則可以通過將組件名稱添加到模板文件的“[配置”](http://www.hmoore.net/followme/octobercms/1073835#3)部分來將組件附加到頁面或布局。下一個示例演示如何將演示待辦事項組件添加到頁面： ``` title = "Components demonstration" url = "/components" [demoTodo] maxItems = 20 == ... ``` 這將使用組件部分中定義的屬性初始化組件。許多組件都具有屬性，但不是必需的。某些屬性是必需的，某些屬性具有默認值。如果您不確定組件支持哪些屬性，請參閱開發人員提供的文檔，或使用10月后端的Inspector。單擊頁面或布局組件面板中的組件時，將打開Inspector。引用組件時，它會自動創建與組件名稱匹配的頁面變量（`demoTodo`在上一個示例中）。提供HTML標記的組件可以在帶有`{% component %}`標記的頁面上呈現，如下所示： ``` {% component 'demoTodo' %} ``` > \*\*注意：\*\*如果將兩個具有相同名稱的組件一起分配給頁面和布局，則頁面組件將覆蓋布局組件的任何屬性。 ## **組件別名** 如果有兩個插件注冊具有相同名稱的組件，則可以使用其完全限定的類名稱附加組件并為其分配*別名*： ``` [October\Demo\Components\Todo demoTodoAlias] maxItems = 20 ``` 該部分中的第一個參數是類名，第二個參數是附加到頁面時將使用的組件別名。如果指定了組件別名，則在引用組件時應在頁面代碼中的任何位置使用它。請注意，下一個示例引用組件別名： ``` {% component 'demoTodoAlias' %} ``` 別名還允許您通過首先使用短名稱和使用別名第二個來在同一頁面上定義同一類的多個組件。這使您可以在頁面上使用同一組件的多個實例。 ``` [demoTodo todoA] maxItems = 10 [demoTodo todoB] maxItems = 20 ``` ## **使用外部屬性值** 默認情況下，屬性值在Configuration部分中初始化，其中定義了組件，屬性值是靜態的，如下所示： ``` [demoTodo] maxItems = 20 == ... ``` 但是，有一種方法可以使用從外部參數加載的值初始化屬性 - URL參數或[部分](http://www.hmoore.net/followme/octobercms/1073835#3)參數（對于在\[partial中\](#3）。使用`{{ paramName }}`應從部分變量加載的值的語法： ``` [demoTodo] maxItems = {{ maxItems }} == ... ``` 假設在上面的示例中，組件**demoTodo**是在partial中定義的，它將使用從**maxItems**部分變量加載的值進行初始化： ``` {% partial 'my-todo-partial' maxItems='10' %} ``` 要從URL參數加載屬性值，請使用`{{ :paramName }}`語法，其中名稱以冒號（`:`）開頭，例如： ``` [demoTodo] maxItems = {{ :maxItems }} == ... ``` 組件所屬的頁面應該定義相應的[URL參數](http://www.hmoore.net/followme/octobercms/1073835#3)： ``` url = "/todo/:maxItems" ``` 在10月后端，您可以使用Inspector工具為組件屬性分配外部值。在Inspector中，您不需要使用花括號來輸入參數名稱。檢查器中的每個字段右側都有一個圖標，用于打開外部參數名稱編輯器。輸入`paramName`部分變量或`:paramName`URL參數的參數名稱。 ## **將變量傳遞給組件** 組件可以設計為在呈現時使用變量，類似于[部分變量](http://www.hmoore.net/followme/octobercms/1073835#3)，可以在`{% component %}`標記中的組件名稱之后指定它們。指定的變量將顯式覆蓋[組件屬性](http://www.hmoore.net/followme/octobercms/1073835#3)的值，包括[外部屬性值](http://www.hmoore.net/followme/octobercms/1073835#3)。在此示例中，組件的**maxItems**屬性在**呈現**組件時將設置為*7*： ``` {% component 'demoTodoAlias' maxItems='7' %} ``` > **注意**：渲染時并非所有組件都支持傳遞變量。 ## **自定義默認標記** 組件提供的標記通常用作組件的使用示例。在某些情況下，您可能希望修改組件的外觀和輸出。[將默認標記移動到主題部分](http://www.hmoore.net/followme/octobercms/1073835#3)適合于徹底檢查組件。[覆蓋組件部分](http://www.hmoore.net/followme/octobercms/1073835#3)對于要定制的櫻桃采摘區域非常有用。 ### **將默認標記移動到部件** 每個組件都可以有一個名為**default.htm**的入口點部分，它在`{% component %}`調用標記時呈現，在下面的示例中，我們假設該組件名為**blogPost**。 ``` url = "blog/post" [blogPost] == {% component "blogPost" %} ``` 輸出將從插件目錄**components / blogpost / default.htm**呈現。您可以復制此文件中的所有標記，并將其直接粘貼到頁面中，或者粘貼到名為**blog-post.htm**的新部分中。 ``` <h1>{{ __SELF__.post.title }}</h1> <p>{{ __SELF__.post.description }}</p> ``` 在標記內部，您可能會注意到對被調用變量的引用`__SELF__`，這是指組件對象，應該替換為頁面上使用的組件別名，在本例中它是`blogPost`。 ``` <h1>{{ blogPost.post.title }}</h1> <p>{{ blogPost.post.description }}</p> ``` 這是允許默認組件標記在主題內的任何位置工作所需的唯一更改。現在可以使用主題partial來自定義和呈現組件標記。 ``` {% partial 'blog-post.htm' %} ``` 可以對組件部分目錄中找到的所有其他部分重復此過程。 ### **覆蓋組件部件** 可以使用主題部分覆蓋所有組件部分。如果名為**channel**的組件使用**title.htm**partial。 ``` url = "mypage" [channel] == {% component "channel" %} ``` 我們可以通過在我們的主題中創建一個名為**partials / channel / title.htm**的文件來覆蓋partial。文件路徑段分解如下：分割描述**partials**主題部分目錄**channel**組件別名（部分子目錄）**title.htm**部分要覆蓋的組件通過簡單地為組件分配同名別名，可以將部分子目錄名稱自定義為任何名稱。例如，通過為**通道**組件分配不同的別名**foobar**，還會更改覆蓋目錄： ``` [channel foobar] == {% component "foobar" %} ``` 現在我們可以通過在我們的主題中創建一個名為**partials / foobar / title.htm**的文件來覆蓋**title.htm**partial。 ## **"View Bag" 組件** 10月份包含一個特殊組件`viewBag`，可以在任何頁面或布局上使用。它允許在標記區域內輕松定義和訪問ad hoc屬性作為變量。一個很好的用法示例是在頁面內定義活動菜單項： ``` title = "About" url = "/about.html" layout = "default" [viewBag] activeMenu = "about" == <p>Page content...</p> ``` 然后，使用`viewBag`變量在頁面，布局或部分標記內部為組件定義的任何屬性都可用。例如，在此布局中，如果值設置為**about**，則將**活動**類添加到列表項：`viewBag.activeMenu` ``` description = "Default layout" == [...]  <ul> <li class="{{ viewBag.activeMenu == 'about' ? 'active' }}">About</li> [...] </ul> ``` 復制 > **注意**：viewBag組件隱藏在后端，僅可用于基于文件的編輯。它也可以被其他插件用來存儲數據。