瞭解如何使用即時AEM內容建立、自訂和測試網站主題。
在AEM快速網站建立歷程的上一個檔案中, 擷取Git存放庫存取資訊, 您已瞭解前端開發人員如何使用Cloud Manager存取Git存放庫資訊,您現在應:
此歷程的這一部分會採取下一個步驟,並深入探究網站主題,示範如何自訂,然後使用您擷取的存取憑證來認可這些自訂。
本檔案說明如何建立AEM網站主題、如何自訂,以及如何使用即時AEM內容來測試主題。 閱讀本文件後,您應該:
此歷程的這一部分適用於前端開發人員。
將AEM管理員提供的主題擷取到您想要編輯主題的位置,並在您偏好的編輯器中將其開啟。
您會看到主題是典型的前端專案。 此結構最重要的部分為:
src/main.ts
:JS & CSS主題的主要進入點src/site
:套用至整個網站的JS & CSS檔案src/components
:AEM元件專屬的JS & CSS檔案src/resources
:圖示、標誌和字型等靜態檔案如果您想深入瞭解標準AEM網站主題,請參閱 其他資源 區段。
在您熟悉佈景主題專案的結構後,請啟動本機Proxy,以便根據實際AEM內容即時檢視任何佈景主題自訂。
從命令列,瀏覽至本機電腦上主題的根目錄。
執行 npm install
和npm會擷取相依性並安裝專案。
執行 npm run live
Proxy伺服器就會啟動。
Proxy伺服器啟動時,會自動開啟瀏覽器,以 http://localhost:7001/
. 點選或按一下 本機登入(僅限管理員工作) 並使用AEM管理員提供給您的Proxy使用者認證登入。
如果您沒有這些認證,請向參照 從範本建立網站文章的設定代理主機使用者區段 在此歷程中。
登入後,請變更瀏覽器中的URL,使其指向AEM管理員提供給您的範例內容路徑。
/content/<your-site>/en/home.html?wcmmode=disabled
http://localhost:7001/content/<your-site>/en/home.html?wcmmode=disabled
您可以導覽網站以探索內容。 系統會從即時AEM例項即時提取網站,這樣您就可以根據實際內容自訂主題。
現在您可以開始自訂佈景主題。 以下是一個簡單範例,說明如何透過Proxy即時檢視變更。
在編輯器中,開啟檔案 <your-theme-sources>/src/site/_variables.scss
編輯變數 $color-background
並將其設定為白色以外的值。 在此範例中, orange
已使用。
儲存檔案時,您會看到Proxy伺服器透過行辨識變更 [Browsersync] File event [change]
.
切換回Proxy伺服器的瀏覽器時,變更會立即顯示。
您可以根據AEM管理員提供給您的要求,繼續自訂主題。
完成自訂後,您可以將其提交到AEM Git存放庫。 首先,您必須將存放庫複製到本機電腦。
在命令列中,導覽至您要複製存放庫的位置。
執行命令 先前從Cloud Manager擷取。 它應類似於 git clone https://git.cloudmanager.adobe.com/<my-org>/<my-program>/
. 使用符合以下條件的Git使用者名稱和密碼: 您已在此歷程的上一部分中擷取。
使用類似於的命令將您編輯的主題專案移動到克隆的存放庫中 mv <site-theme-sources> <cloned-repo>
在複製存放庫的目錄中,使用下列命令提交您剛移入的主題檔案。
git add .
git commit -m "Adding theme sources"
git push
自訂會推送至AEM Git存放庫。
您的自訂內容現在會安全地儲存在AEM Git存放庫中。
現在您已完成AEM快速網站建立歷程的這一部分,您應:
在此知識的基礎上繼續您的AEM快速網站建立歷程,接下來檢視檔案 部署您的自訂主題, 在這裡,您將瞭解如何使用前端管道部署主題。
我們建議您檢閱檔案,繼續快速網站建立歷程的下一部分 部署您的自訂主題, 以下是一些其他可選資源,這些資源對本文檔中提到的一些概念進行了更深入的探究,但並非繼續此歷程所必需的。