自定義網站主題

瞭解如何構建網站主題、如何自定義以及如何使用即時內容進AEM行test。

到目前為止的故事

在快速建立站AEM點的上一文檔中, 檢索Git儲存庫訪問資訊, 您瞭解了前端開發人員用戶Cloud Manager如何訪問git儲存庫資訊,現在您應該:

  • 高級瞭解Cloud Manager是什麼。
  • 已檢索您的憑據以訪AEM問Git,以便您可以提交自定義。

此部分將執行下一步並深入到站點主題中,並向您顯示如何自定義該主題,然後使用您檢索的訪問憑據提交這些自定義設定。

目標

本文檔介紹如AEM何構建站點主題、如何自定義它以及如何使用即時內容testAEM它。 閱讀完後,您應:

  • 瞭解網站主題的基本結構以及如何編輯它。
  • 瞭解如何通過本地代理使用真實內容AEMtest主題自定義。
  • 瞭解如何將更改提交到AEMGit儲存庫。

責任角色

這部分行程適用於前端開發商。

瞭解主題結構

將管理員提供的AEM主題解壓到您希望編輯該主題的位置,並在首選編輯器中開啟它。

編輯主題

您會看到主題是典型的前端項目。 該結構最重要的部分是:

  • src/main.ts:JS和CSS主題的主要入口點
  • src/site:應用於整個站點的JS和CSS檔案
  • src/components:特定於元件的JS和CSSAEM檔案
  • src/resources:靜態檔案,如表徵圖、徽標和字型
秘訣

如果您想瞭解有關標準網站主題的AEM更多資訊,請參閱 其他資源 的下界。

一旦您對主題項目的結構感到滿意,請啟動本地代理,以便您可以根據實際內容即時查看任何主題自AEM定義。

啟動本地代理

  1. 從命令行導航到本地電腦上主題的根。

  2. 執行 npm install npm檢索依賴項並安裝項目。

    npm安裝

  3. 執行 npm run live 代理伺服器啟動。

    npm運行即時

  4. 代理伺服器啟動時,會自動開啟瀏覽器 http://localhost:7001/。 點擊或按一下 本地登錄(僅限管理任務) 並使用管理員提供給您的代理用戶憑據登AEM錄。

    本地登錄

  5. 登錄後,請更改瀏覽器中的URL以指向管理員提供給您的示例內AEM容的路徑。

    • 例如,如果提供的路徑是 /content/<your-site>/en/home.html?wcmmode=disabled
    • 將URL更改為 http://localhost:7001/content/<your-site>/en/home.html?wcmmode=disabled

    代理樣本內容

您可以導航站點以瀏覽內容。 站點從即時實例中即時拉AEM出,以便您可以針對實際內容進行主題自定義。

自定義主題

現在可以開始自定義主題。 下面是一個簡單的示例,說明如何通過代理即時查看更改。

  1. 在編輯器中,開啟檔案 <your-theme-sources>/src/site/_variables.scss

    編輯主題

  2. 編輯變數 $color-background 將其設定為除白色以外的值。 在本例中, orange 的子菜單。

    已編輯主題

  3. 保存檔案時,代理伺服器通過該行識別更改 [Browsersync] File event [change]

    代理瀏覽器同步

  4. 切換回代理伺服器的瀏覽器後,更改立即可見。

    橙色主題

您可以根據管理員提供的要求繼續自定義主AEM題。

提交更改

完成自定義後,您可以將其提交到AEMgit儲存庫。 首先,必須將儲存庫克隆到本地電腦。

  1. 從命令行導航到要克隆回購的位置。

  2. 執行命令 以前從雲管理器檢索到。 應該和 git clone https://git.cloudmanager.adobe.com/<my-org>/<my-program>/。 使用Git用戶名和密碼 你在前一段路上取回了。

    克隆回購

  3. 使用類似於 mv <site-theme-sources> <cloned-repo>

  4. 在克隆的回購目錄中,使用以下命令提交您剛移入的主題檔案。

    git add .
    git commit -m "Adding theme sources"
    git push
    
  5. 將自定義項推送到AEMGit儲存庫。

    提交的更改

您的自定義內容現在安全地儲存AEM在Git儲存庫中。

下一步是什麼

現在,您已完成快速站點創AEM建過程的這一部分:

  • 瞭解網站主題的基本結構以及如何編輯它。
  • 瞭解如何通過本地代理使用真實內容AEMtest主題自定義。
  • 瞭解如何將更改提交到AEMGit儲存庫。

在此知識基礎上構建並繼AEM續快速建立網站的過程,方法是下次查看文檔 部署您的自定義主題, 您將在其中學習如何使用前端管道部署主題。

其他資源

建議您通過審閱文檔進入快速站點建立過程的下一部分 部署您的自定義主題, 下面是一些附加的可選資源,這些資源對本文檔中提到的一些概念進行了更深入的瞭解,但不需要繼續旅行。

  • 網AEM站主題 — 這是網站主題的GitHubAEM儲存庫。
  • npm — 用AEM於快速構建站點的主題基於npm。
  • 網路包 — 用AEM於快速構建網站的主題依賴webpack。

本頁內容