樣式系統可讓範本作者在元件的內容原則中定義樣式類別,讓內容作者在編輯頁面上的元件時能夠選取這些類別。 這些樣式可作為元件的替代視覺變體,讓元件更靈活。
如此一來,您就不需要為每個樣式開發自訂元件,或是自訂元件對話方塊以啟用此類樣式功能。 這可帶來更多可重複使用的元件,這些元件可以快速輕鬆地適應內容作者的需求,而無需任何AEM後端開發。
範本作者不僅需要為內容作者設定元件運作方式的能力,還需要設定元件的數個替代視覺變數。
同樣地,內容作者不僅需要建構和排列其內容的能力,還需要選取視覺呈現的方式。
樣式系統針對範本作者與內容作者的需求,提供統一的解決方案:
接著,樣式類別會插入到元件的裝飾包裝函式元素上,如此一來,元件開發人員就不需要在提供其CSS規則之後,再處理樣式了。
通常,使用「樣式系統」會採用下列形式。
網頁設計工具會建立元件的不同視覺變數。
向HTML開發人員提供元件的HTML輸出以及要實施的所需視覺變化。
HTML開發人員會定義與每個視覺變數相對應的CSS類別,並會插入到元件包裝的元素上。
HTML開發人員會針對每個視覺變數實作對應的CSS程式碼(以及選用的JS程式碼),使其外觀與定義一致。
AEM開發人員將提供的CSS (和選用的JS)放在 客戶庫 並進行部署。
AEM開發人員或範本作者會設定頁面範本,並編輯每個已設定樣式元件的原則,新增定義的CSS類別、為每種樣式提供好記的名稱,並指示哪些樣式可以合併。
AEM頁面作者接著可以透過元件工具列的樣式選單,在頁面編輯器中選擇設計的樣式。
請注意,AEM中實際只執行最後三個步驟。 這表示所有必要的CSS和JavaScript開發都可以不使用AEM完成。
實際實作樣式只需要在AEM上部署,以及在所需範本的元件中選取即可。
下圖說明「樣式系統」的架構。
為了示範此功能,我們將使用 WKND核心元件的實施 標題元件 以為例。
下列章節 作為內容作者 和 作為範本作者 說明如何使用WKND的樣式系統來測試樣式系統的功能。
如果您希望對自己的元件使用「樣式系統」,請執行下列動作:
安裝WKND專案後,導覽至WKND的英文主版首頁: http://<host>:<port>/sites.html/content/wknd/language-masters/en
並編輯頁面。
選取 標題 頁面下方的元件
點選或按一下 樣式 「 」工具列上的按鈕 清單 元件以開啟樣式選單並變更元件的外觀。
在此範例中, 顏色 樣式(黑色, 白色、和 灰色)互斥,而 樣式 選項(底線, 靠右對齊、和 最小間距)可合併。 這可在范 本中設定為範本作者。
編輯WKND的英文主版首頁時 http://<host>:<port>/sites.html/content/wknd/language-masters/en
,透過編輯頁面的範本 頁面資訊 — >編輯範本.
編輯的原則 標題 點選或按一下 原則 元件的按鈕。
在屬性的「樣式」標籤上,您可以看到樣式的設定方式。
使用拖曳操作框來排列群組的順序以及群組內的樣式。 使用新增或刪除圖示來新增或移除群組內的群組或樣式。
設定為元件原則的樣式屬性的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版開始,現在提供「編輯」對話方塊中的選用「樣式」索引標籤。 與「設計」對話方塊索引標籤不同,「編輯」對話方塊中的索引標籤對於樣式系統的運作並非必要,但它是內容作者設定樣式的選用替代介面。
編輯對話方塊索引標籤可以類似設計對話方塊索引標籤的方式加入:
path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_edit/styletab"
sling:resourceType = "granite/ui/components/coral/foundation/include"
依預設,「編輯」對話方塊上的「樣式」索引標籤不會啟用。
開發人員也可以使用為元件上的樣式設定允許的元素名稱清單 cq:styleElements
字串陣列屬性。 然後在設計對話方塊中原則的「樣式」索引標籤中,範本作者也可以選擇要為每個樣式設定的元素名稱。 這會設定包裝函式元素的元素名稱。
此屬性設定在 cq:Component
節點。 例如:
/apps/<yoursite>/components/content/list@cq:styleElements=[div,section,span]
避免為可組合的樣式定義元素名稱。 定義多個元素名稱時,優先順序為:
data-sly-resource="${'path/to/resource' @ decorationTagName='span'}
cq:htmlTag
/ cq:tagName
將被視為遞補值。這種定義樣式名稱的功能對於非常一般的元件(例如佈局容器或內容片段元件)非常有用,可為其提供額外的含義。
例如,這可讓配置容器獲得如之類的語意 <main>
, <aside>
, <nav>
、等等。