樣式系統

樣式系統允許模板作者在元件的內容策略中定義樣式類，以便內容作者在編輯頁面上的元件時能夠選擇它們。這些樣式可以替代元件的視覺變化，讓元件更具彈性。

這樣就不需要為每個樣式開發自定義元件，或自定義元件對話框以啟用這種樣式功能。它可提供更多可重複使用的元件，可快速輕鬆地配合內容作者的需求，毋需進行任何AEM後端開發。

使用案例

範本作者不僅需要設定元件如何為內容作者運作的能力，還需要設定元件的多種替代視覺變化。

同樣地，內容作者不僅需要建構和排列內容的能力，還需要選擇內容的視覺呈現方式。

Style System針對範本作者和內容作者的需求提供統一的解決方案：

然後，樣式類會插入元件的裝飾包裝元件上，讓元件開發人員不需要處理樣式，而不需要提供其CSS規則。

使用「樣式系統」通常採用下列形式。

請注意，AEM實際上只會執行最後三個步驟。這表示不需AEM，就可完成所有必要的CSS和Javascript開發。

實際實作樣式只需要在AEM上部署，並在所需範本的元件中選取。

下圖說明了樣式系統的體系結構。

aem-style-system

為展示此功能，我們將以WKND實作核心元件的title元件為例。

以下章節作為內容作者和作為範本作者說明如何使用WKND的樣式系統來測試樣式系統的功能。

如果要將樣式系統用於自己的元件，請執行以下操作：

安裝WKND專案後，導覽至WKND的英文主版首頁http://<host>:<port>/sites.html/content/wknd/language-masters/en並編輯該頁面。
在頁面下方選擇Title元件
點選或按一下List元件工具列上的Styles按鈕，以開啟樣式選單並變更元件的外觀。

注意

在本例中，Colors樣式（Black、White和Gray）是互斥的，而Style選項（Underline,a12/>右對齊和微小間距**）可結合。**這可在范本中設定為範本作者。

在http://<host>:<port>/sites.html/content/wknd/language-masters/en編輯WKND的英文主版頁面時，請透過頁面資訊->編輯範本編輯頁面範本。
點選或按一下元件的Policy按鈕，編輯Title元件的策略。
在屬性的「樣式」索引標籤上，您可以看到樣式的設定方式。
- 群組名稱： 在內容作者在設定元件樣式時會看到的樣式選單中，可將樣式分組。
- 可組合樣式： 允許同時選取該群組中的多種樣式。
- 樣式名稱： 設定元件樣式時，將顯示給內容作者的樣式說明。
- CSS類： 與樣式關聯的CSS類的實際名稱。
使用拖動控制滑塊來排列組的順序和組內的樣式。使用新增或刪除圖示來新增或移除群組或群組中的樣式。

注意

為了工作，必須將配置為元件策略樣式屬性的CSS類（以及任何必要的Javascript）部署為客戶端庫。

核心元件版本2及更新版本已完全啟用，以利用樣式系統，而且不需額外設定。

只需執行下列步驟，即可為您自己的自訂元件啟用樣式系統，或在「編輯」對話方塊中啟用選用的「樣式」標籤。🔗

若要讓元件搭配AEM的「樣式系統」運作，並在其設計對話方塊中顯示樣式標籤，元件開發人員必須在元件上加入具有下列設定的樣式標籤：

path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"
sling:resourceType = "granite/ui/components/coral/foundation/include"

在設定元件後，頁面作者所設定的樣式將會由AEM自動插入裝飾元素上，AEM會自動環繞每個可編輯的元件。元件本身不需要做其他任何動作，就能達成此目標。

自AEM 6.5.3.0版起，「編輯對話方塊」(Edit Dialog)中的「樣式」(Styles)頁籤現已可供使用。與「設計對話框」頁籤不同，「編輯對話框」中的頁籤對於「樣式系統」的運作並不重要，但對於內容作者來說，它是設定樣式的可選替代介面。

編輯對話框頁籤可以以與設計對話框頁籤類似的方式包括：

path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_edit/styletab"
sling:resourceType = "granite/ui/components/coral/foundation/include"

注意

「編輯」(Edit)對話框上的「樣式」(Styles)頁籤預設不啟用。