使用樣式系統進行開發 developing-with-the-style-system
瞭解如何使用Experience Manager的樣式系統來實作個別樣式並重複使用核心元件。 本教學課程涵蓋樣式系統的開發，以使用範本編輯器的品牌特定CSS和進階原則設定來擴充核心元件。
先決條件 prerequisites
檢閱設定本機開發環境所需的工具和指示。
也建議檢閱使用者端資料庫和前端工作流程教學課程，以瞭解使用者端資料庫的基礎知識以及內建在AEM專案中的各種前端工具。
入門專案
檢視教學課程建置的基底程式碼：
-
從GitHub檢視
tutorial/style-system-start分支code 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
本章使用樣式系統功能來建立文章頁面上所使用之 Title 和 Text 元件的變體。
標題
標題元件可用的底線樣式
背景 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編輯器中的 La Skateparks 文章，網址為： 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
接下來，使用AEM專案的 ui.frontend 模組實作Underline樣式。 使用 ui.frontend 模組隨附的Webpack開發伺服器，以在 部署到AEM的本機執行個體之前，預覽樣式。
-
從 ui.frontend 模組內啟動
watch處理序：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編輯器中的 La Skateparks 文章，網址為： 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
接下來，讓我們使用AEM專案的 ui.frontend 模組來實作報價區塊樣式。
-
如果尚未執行，請從 ui.frontend 模組內啟動
watch處理序：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/src/main/webpack/site/styles/container_main.scss的 ui.frontend 模組中：
main.container {
padding: .5em 1em;
max-width: $max-content-width;
float: unset!important;
margin: 0 auto!important;
clear: both!important;
}
樣式系統不適用於mainHTML專案，而是可用來建立 固定寬度 樣式，做為容器原則的一部分。 樣式系統可讓使用者選擇在 固定寬度 和 流動寬度 容器之間切換。
- 額外挑戰 — 使用從先前練習中取得的課程，並使用樣式系統來實作Container元件的 固定寬度 和 流動寬度 樣式。
恭喜！ congratulations
恭喜，文章頁面幾乎已設定樣式，而您透過AEM樣式系統獲得實作體驗。
後續步驟 next-steps
瞭解建立自訂AEM元件 （顯示對話方塊中編寫的內容）的端對端步驟，並探索開發Sling模型以封裝填入元件HTL的業務邏輯。
在GitHub上檢視完成的程式碼，或在Git分支tutorial/style-system-solution上檢閱並部署本機的程式碼。
- 複製github.com/adobe/aem-wknd-guides存放庫。
- 檢視
tutorial/style-system-solution分支。