文件AEMAEM 教學課程AEM Sites WKND 教學課程

主題設定工作流程 theming

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • 初學者
  • 開發人員

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

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

先決條件 prerequisites

此教學課程包含多個部分，並假設頁面範本章節中概述的步驟已完成。

目標

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

更新主題 theme-update

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

https://video.tv.adobe.com/v/332918?quality=12&learn=on

影片的高層級步驟：

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

解決方案檔案

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

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

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

https://video.tv.adobe.com/v/338722?quality=12&learn=on

影片的高層級步驟：

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

  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