使用樣式系統進行開發 developing-with-the-style-system
瞭解如何使用Experience Manager的樣式系統來實作個別樣式並重複使用核心元件。 本教學課程涵蓋樣式系統的開發，以使用範本編輯器的品牌特定CSS和進階原則設定來擴充核心元件。
先決條件 prerequisites
檢閱設定所需的工具和指示 本機開發環境.
也建議檢閱 使用者端程式庫與前端工作流程 教學課程以瞭解使用者端資料庫的基礎知識，以及AEM專案中建置的各種前端工具。
入門專案
檢視教學課程建置的基底程式碼：
-
檢視
tutorial/style-system-start分支來源 GitHubcode language-shell $ cd aem-guides-wknd $ git checkout tutorial/style-system-start -
使用您的Maven技能將程式碼庫部署到本機AEM執行個體：
code language-shell $ mvn clean install -PautoInstallSinglePackagenote note NOTE 如果使用AEM 6.5或6.4，請附加 classic設定檔至任何Maven指令。code language-shell $ mvn clean install -PautoInstallSinglePackage -Pclassic
您一律可以於檢視完成的程式碼 GitHub 或切換至分支以在本機簽出程式碼 tutorial/style-system-solution.
目標
- 瞭解如何使用樣式系統將品牌特定的CSS套用至AEM核心元件。
- 瞭解BEM標籤法，以及如何使用它來仔細設定樣式的範圍。
- 使用可編輯的範本套用進階原則設定。
您即將建置的內容 what-build
本章使用 造型系統特徵 若要建立 標題 和 文字 用於文章頁面上的元件。
可用於標題元件的底線樣式
背景 background
此 樣式系統 可讓開發人員和範本編輯器建立元件的多個視覺變體。 接著，作者就可以決定構成頁面時要使用的樣式。 樣式系統會在本教學課程的其餘部分中使用，以在低程式碼方法使用核心元件時獲得數個獨特樣式。
樣式系統的一般構想是，作者可以選擇元件的各種樣式。 「樣式」受到插入元件外部div的其他CSS類別支援。 在使用者端資料庫中，會根據這些樣式類別新增CSS規則，讓元件能夠變更外觀。
您可以找到 此處為樣式系統的詳細檔案. 此外，還有一個 瞭解樣式系統的技術影片.
底線樣式 — 標題 underline-style
此 標題元件 已代理至下的專案 /apps/wknd/components/title 做為 ui.apps 模組。 標題元素的預設樣式(H1， H2， H3…)已實作於 ui.frontend 模組。
此 wknd文章設計 為帶有底線的標題元件包含唯一的樣式。 您可以使用「樣式系統」來允許作者加入底線樣式的選項，而不是建立兩個元件或修改元件對話方塊。
新增標題原則
讓我們為Title元件新增一項原則，讓內容作者選擇要套用至特定元件的Underline樣式。 這是使用AEM中的範本編輯器完成。
-
導覽至 文章頁面 範本來源： http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html
-
在 結構 模式，主要的 配置容器，選取 原則 圖示加以存取 標題 元件列於下 允許的元件：
-
使用下列值建立Title元件的原則：
原則標題*： WKND標題
屬性 > 樣式索引標籤 > 新增樣式
底線 ：
cmp-title--underline
按一下 完成 以儲存標題原則的變更。
note note NOTE 值 cmp-title--underline會在元件HTML標籤的外部div上填入CSS類別。
套用底線樣式
身為作者，我們可以將底線樣式套用至某些標題元件。
-
導覽至 滑板公園 AEM Sites編輯器中的文章： http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
-
在 編輯 模式，選擇標題元件。 按一下 繪圖筆刷 圖示並選取 底線 樣式：
note note NOTE 此時，不會發生可見的變更，因為 underline尚未實作樣式。 在下一個練習中，會實作此樣式。 -
按一下 頁面資訊 圖示> 以發佈的形式檢視 以在AEM編輯器外部檢查頁面。
-
使用瀏覽器開發人員工具，驗證Title元件周圍的標籤是否具有CSS類別
cmp-title--underline套用至外部div。
code language-html <div class="title cmp-title--underline"> <div data-cmp-data-layer="{"title-b6450e9cab":{"@type":"wknd/components/title","repo:modifyDate":"2022-02-23T17:34:42Z","dc:title":"Vans Off the Wall Skatepark"}}" id="title-b6450e9cab" class="cmp-title"> <h2 class="cmp-title__text">Vans Off the Wall Skatepark</h2> </div> </div>
實作底線樣式 — ui.frontend
接下來，使用下列專案實作底線樣式 ui.frontend AEM專案的模組。 隨附的Webpack開發伺服器 ui.frontend 用於預覽樣式的模組 早於 使用部署至AEM的本機執行個體。
-
開始
watch從內部處理 ui.frontend 模組：code language-shell $ cd ~/code/aem-guides-wknd/ui.frontend/ $ npm run watch這會啟動監控變更的程式。
ui.frontend模組並同步變更至AEM執行個體。 -
返回IDE並開啟檔案
_title.scss從：ui.frontend/src/main/webpack/components/_title.scss. -
引入目標定位的新規則
cmp-title--underline類別：code language-scss /* Default Title Styles */ .cmp-title {} .cmp-title__text {} .cmp-title__link {} /* Add Title Underline Style */ .cmp-title--underline { .cmp-title__text { &:after { display: block; width: 84px; padding-top: 8px; content: ''; border-bottom: 2px solid $brand-primary; } } }note note NOTE 最佳實務就是一律將樣式嚴格限定為目標元件。 這樣可確保額外的樣式不會影響頁面的其他區域。 所有核心元件都必須遵守 BEM標籤法. 建立元件的預設樣式時，最佳實務是鎖定外部CSS類別。 另一個最佳實務是鎖定核心元件BEM標籤法所指定的類別名稱，而非HTML元素。 -
返回瀏覽器和AEM頁面。 您應該會看到底線樣式已新增：
-
在AEM編輯器中，您現在應該能夠開啟和關閉 底線 樣式化，並透過視覺效果呈現變更。
引號區塊樣式 — 文字 text-component
接下來，重複類似的步驟，將唯一的樣式套用至 文字元件. 文字元件已代理至下的專案 /apps/wknd/components/text 做為 ui.apps 模組。 段落元素的預設樣式已實作於 ui.frontend.
此 wknd文章設計 包含具有引號區塊的文字元件的唯一樣式：
新增文字原則
接著，新增文字元件的原則。
-
導覽至 文章頁面範本 從： http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html.
-
在 結構 模式，主要的 配置容器，選取 原則 圖示加以存取 文字 元件列於下 允許的元件：
-
使用以下值更新文字元件原則：
原則標題*： 內容文字
外掛程式 > 段落樣式 > 啟用段落樣式
樣式索引標籤 > 新增樣式
報價區塊 ：
cmp-text--quote
按一下 完成 以儲存對文字原則所做的變更。
套用引號區塊樣式
-
導覽至 滑板公園 AEM Sites編輯器中的文章： http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
-
在 編輯 模式，選擇文字元件。 編輯元件以包含引號元素：
-
選取文字元件，然後按一下 繪圖筆刷 圖示並選取 報價區塊 樣式：
-
使用瀏覽器的開發人員工具來檢查標籤。 您應該會看到類別名稱
cmp-text--quote已新增至元件的外部div：code language-html <!-- Quote Block style class added --> <div class="text cmp-text--quote"> <div data-cmp-data-layer="{"text-60910f4b8d":{"@type":"wknd/components/text","repo:modifyDate":"2022-02-24T00:55:26Z","xdm:text":"<blockquote>&nbsp; &nbsp; &nbsp;&quot;There is no better place to shred then Los Angeles&quot;</blockquote>\r\n<p>- Jacob Wester, Pro Skater</p>\r\n"}}" id="text-60910f4b8d" class="cmp-text"> <blockquote> "There is no better place to shred then Los Angeles"</blockquote> <p>- Jacob Wester, Pro Skater</p> </div> </div>
實作引號區塊樣式 — ui.frontend
接下來，讓我們使用 ui.frontend AEM專案的模組。
-
如果尚未執行，請啟動
watch從內部處理 ui.frontend 模組：code language-shell $ npm run watch -
更新檔案
text.scss從：ui.frontend/src/main/webpack/components/_text.scss：code language-css /* Default text style */ .cmp-text {} .cmp-text__paragraph {} /* WKND Text Quote style */ .cmp-text--quote { .cmp-text { background-color: $brand-third; margin: 1em 0em; padding: 1em; blockquote { border: none; font-size: $font-size-large; font-family: $font-family-serif; padding: 14px 14px; margin: 0; margin-bottom: 0.5em; &:after { border-bottom: 2px solid $brand-primary; /*yellow border */ content: ''; display: block; position: relative; top: 0.25em; width: 80px; } } p { font-family: $font-family-serif; } } }note caution CAUTION 在此案例中，樣式目標是原始HTML元素。 這是因為文字元件為內容作者提供RTF編輯器。 直接針對RTE內容建立樣式時，應謹慎進行，而且更重要的一點是應嚴格限定樣式的範圍。 -
再次返回瀏覽器，您應該會看到已新增Quote區塊樣式：
-
停止webpack開發伺服器。
固定寬度 — 容器（額外優點） layout-container
容器元件已用來建立文章頁面範本的基本結構，並提供放置區域，讓內容作者在頁面上新增內容。 容器也可以使用「樣式系統」，為內容作者提供設計版面的更多選項。
此 主要容器 的範本。文章頁面範本包含兩個可編寫的容器，且寬度固定。
文章頁面範本中的主要容器.
的原則 主要容器 將預設元素設為 main：
此CSS使得 主要容器 固定設定於 ui.frontend 模組在 ui.frontend/src/main/webpack/site/styles/container_main.scss ：
main.container {
padding: .5em 1em;
max-width: $max-content-width;
float: unset!important;
margin: 0 auto!important;
clear: both!important;
}
不要鎖定目標 main HTML元素，樣式系統可用來建立 固定寬度 做為容器原則一部分的樣式。 樣式系統可讓使用者選擇是否切換 固定寬度 和 流動寬度 容器。
- 額外挑戰 — 運用從先前練習中吸取的經驗教訓，並使用樣式系統來實作 固定寬度 和 流動寬度 容器元件的樣式。
恭喜！ congratulations
恭喜，文章頁面幾乎已設定樣式，而您透過AEM樣式系統獲得實作體驗。
後續步驟 next-steps
瞭解建立 自訂AEM元件 會顯示在對話方塊中編寫的內容，並探索開發Sling模型來封裝商業邏輯以填入元件的HTL。
檢視完成的程式碼： GitHub 或在Git分支上檢閱並部署程式碼至本機 tutorial/style-system-solution.
- 原地複製 github.com/adobe/aem-wknd-guides 存放庫。
- 檢視
tutorial/style-system-solution分支。