主題設定工作流程 theming
在本章中,我們會更新Adobe Experience Manager網站的主題來源,以套用品牌特定的樣式。 我們瞭解如何使用Proxy伺服器來檢視CSS和Javascript更新的預覽,同時針對已上線的網站進行程式碼。 本教學課程也將涵蓋如何使用Adobe Cloud Manager的前端管道將主題更新部署到AEM網站。
最後,我們的網站會更新,加入符合WKND品牌的樣式。
先決條件 prerequisites
此教學課程包含多個部分,並假設您已完成下列步驟: 頁面範本 章節已完成。
目標
- 瞭解如何下載及修改網站的主題來源。
- 瞭解即時網站程式碼如何供即時預覽。
- 瞭解使用Adobe Cloud Manager的前端管道將編譯的CSS和JavaScript更新交付為主題一部分的端對端工作流程。
更新主題 theme-update
接下來,變更主題來源,讓網站符合WKND品牌的外觀和風格。
影片的高層級步驟:
- 在AEM中建立本機使用者,以搭配Proxy開發伺服器使用。
- 從AEM下載主題來源,並使用本機IDE (如VSCode)開啟。
- 修改主題來源,並使用Proxy開發伺服器即時預覽CSS和JavaScript變更。
- 更新主題來源,使雜誌文章符合WKND品牌樣式和模型。
解決方案檔案
下載完成的樣式 WKND範例主題
使用前端管道部署主題 deploy-theme
使用Cloud Manager的前端管道將主題的更新部署到AEM環境。
影片的高層級步驟:
-
建立新的Git Cloud Manager中的存放庫
-
將您的主題來源專案新增到Cloud Manager Git存放庫:
code language-shell $ cd <PATH_TO_THEME_SOURCES_FOLDER> $ git init -b main $ git add . $ git commit -m "initial commit" $ git remote add origin <CLOUD_MANAGER_GIT_REPOSITORY_URL>
-
設定 前端管道 在Cloud Manager中部署前端計畫碼。
-
執行前端管道將更新部署到目標AEM環境。
存放庫範例
提供幾個可作為參考的範例GitHub存放庫:
- aem-site-template-standard
- aem-site-template-basic-theme-e2e — 用於「真實世界」專案的範例。
恭喜! congratulations
恭喜,您剛才已更新並部署主題至AEM!
後續步驟 next-steps
更深入瞭解AEM開發,並透過使用建立網站,瞭解更多基礎技術 AEM專案原型.
recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9