樣式系統

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

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

使用案例

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

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

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

  • 範本作者可在元件的內容原則中定義樣式類別。
  • 然後,內容作者可以在編輯頁面上的元件時,從下拉式清單中選取這些類別,以套用對應的樣式。

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

概覽

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

  1. 網頁設計人員會建立不同的元件視覺變化。

  2. HTML開發人員會提供元件的HTML輸出以及所要實作的視覺變化。

  3. HTML開發人員會定義對應於每個視覺變化且要插入在元素上、包住元件的CSS類別。

  4. HTML開發人員會針對每個視覺變化建置對應的CSS程式碼(和選擇性的JS程式碼),讓它們看起來都如定義。

  5. AEM開發人員將提供的CSS(和選用的JS)放入用戶端程式庫中,並加以部署。

  6. AEM開發人員或範本作者會設定頁面範本並編輯每個樣式元件的原則、新增已定義的CSS類別、為每個樣式指定好用的名稱,以及指出哪些樣式可以合併。

  7. 然後,AEM頁面作者就可以透過元件工具列的樣式選單,在頁面編輯器中選擇設計的樣式。

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

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

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

aem-style-system

使用

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

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

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

  1. 概述一節所述,將CSS安裝為用戶端程式庫。
  2. As a Template Author一節所述,設定您要讓內容作者使用的CSS類別。
  3. 然後,內容作者可使用一節中所述的樣式,作為內容作者

身為內容作者

  1. 安裝WKND專案後,導覽至WKND的英文主版首頁http://<host>:<port>/sites.html/content/wknd/language-masters/en並編輯該頁面。

  2. 在頁面下方選擇​Title​元件

    作者的樣式系統

  3. 點選或按一下​List​元件工具列上的​Styles​按鈕,以開啟樣式選單並變更元件的外觀。

    選取樣式

    注意

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

作為模板作者

  1. http://<host>:<port>/sites.html/content/wknd/language-masters/en編輯WKND的英文主版頁面時,請透過​頁面資訊->編輯範本​編輯頁面範本。

    編輯範本

  2. 點選或按一下元件的​Policy​按鈕,編輯​Title​元件的策略。

    編輯原則

  3. 在屬性的「樣式」索引標籤上,您可以看到樣式的設定方式。

    編輯屬性

    • 群組名稱: 在內容作者在設定元件樣式時會看到的樣式選單中,可將樣式分組。
    • 可組合樣式: 允許同時選取該群組中的多種樣式。
    • 樣式名稱: 設定元件樣式時,將顯示給內容作者的樣式說明。
    • 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)頁籤預設不啟用。

元素名稱的樣式

開發人員也可以使用cq:styleElements字串陣列屬性,設定元件上樣式的允許元素名稱清單。 然後,在設計對話方塊中原則的「樣式」索引標籤中,範本作者也可以選擇要針對每個樣式設定的元素名稱。 這將設定包裝器元素的元素名稱。

此屬性在cq:Component節點上設定。 例如:

  • /apps/<yoursite>/components/content/list@cq:styleElements=[div,section,span]
注意

避免為可組合的樣式定義元素名稱。 定義多個元素名稱時,優先順序為:

  1. HTL優先於一切:data-sly-resource="${'path/to/resource' @ decorationTagName='span'}
  2. 然後,在多個作用中樣式中,會選取元件原則中設定之樣式清單中的第一個樣式。
  3. 最後,元件的cq:htmlTag/ cq:tagName將視為備援值。

此定義樣式名稱的功能對於非常一般的元件(例如「版面容器」或「內容片段」元件)非常有用,以提供其他意義。

例如,它可讓配置容器具有<main><aside><nav>等語義。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now