了解網站主題的建立方式、如何自訂,以及如何使用即時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
代理伺服器啟動。
代理伺服器啟動時,會自動開啟瀏覽器以 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
中所有規則的URL區段。
儲存檔案時,您會看到Proxy伺服器透過該行辨識變更 [Browsersync] File event [change]
.
切換回代理伺服器的瀏覽器後,變更會立即顯示。
您可以根據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快速網站的歷程 部署自定義主題, 您將在何處了解如何使用前端管道部署主題。
建議您透過檢閱檔案,繼續進行快速網站建立歷程的下一個階段 部署自定義主題, 以下是一些額外的選用資源,可更深入探討本檔案中提及的一些概念,但您不需要這些資源即可繼續進行歷程。