主題設定工作流程 theming

在本章中,我們會更新Adobe Experience Manager網站的主題來源,以套用品牌特定的樣式。 我們瞭解如何使用Proxy伺服器來檢視CSS和Javascript更新的預覽,同時針對已上線的網站進行程式碼。 本教學課程也將涵蓋如何使用Adobe Cloud Manager的前端管道將主題更新部署到AEM網站。

最後,我們的網站會更新,加入符合WKND品牌的樣式。

先決條件 prerequisites

此教學課程包含多個部分,並假設您已完成下列步驟: 頁面範本 章節已完成。

目標

  1. 瞭解如何下載及修改網站的主題來源。
  2. 瞭解即時網站程式碼如何供即時預覽。
  3. 瞭解使用Adobe Cloud Manager的前端管道將編譯的CSS和JavaScript更新交付為主題一部分的端對端工作流程。

更新主題 theme-update

接下來,變更主題來源,讓網站符合WKND品牌的外觀和風格。

影片的高層級步驟:

  1. 在AEM中建立本機使用者,以搭配Proxy開發伺服器使用。
  2. 從AEM下載主題來源,並使用本機IDE (如VSCode)開啟。
  3. 修改主題來源,並使用Proxy開發伺服器即時預覽CSS和JavaScript變更。
  4. 更新主題來源,使雜誌文章符合WKND品牌樣式和模型。

解決方案檔案

下載完成的樣式 WKND範例主題

使用前端管道部署主題 deploy-theme

使用Cloud Manager的前端管道將主題的更新部署到AEM環境。

影片的高層級步驟:

  1. 建立新的Git Cloud Manager中的存放庫

  2. 將您的主題來源專案新增到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>
    
  3. 設定 前端管道 在Cloud Manager中部署前端計畫碼。

  4. 執行前端管道將更新部署到目標AEM環境。

存放庫範例

提供幾個可作為參考的範例GitHub存放庫:

恭喜! congratulations

恭喜,您剛才已更新並部署主題至AEM!

後續步驟 next-steps

更深入瞭解AEM開發,並透過使用建立網站,瞭解更多基礎技術 AEM專案原型.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9