文件AEM GuidesAEM Guides 文件

安裝和使用AEM Guides擴充功能套件

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

建立對象：

  • 使用者
  • 管理員

擴充功能可讓您自訂AEM Guides應用程式，以更符合您的需求。 AEM Guides v4.3以上（內部部署）和2310 （雲端）支援此擴充功能框架。

要求

此封裝需要Git Bash和npm

安裝

啟動AEM Guides框架安裝的最簡單方法就是透過cli

npx @adobe/create-guides-extension

新增自訂程式碼

  1. 在src/目錄中為您要擴充的每個元件新增程式碼檔案。 已經為您新增了一些範例檔案。

  2. 現在在位於src/目錄中的index.ts檔案中：

    • 匯入.ts檔案，其中包含您要在組建中新增的自訂。
    • 新增匯入至window.extension
    • 註冊自訂元件的id並對應的tcx extensions匯入
    • 請參閱範例/src/index.ts

建立自訂程式碼

  • 在根目錄中執行npm run build。 您將在目錄dist/中取得3個檔案：

    • build.css
    • guides-extension.js
    • guides-extension.umd.cjs

建置輸出

將自訂新增至AEM

  • 移至CRXDE crx/de/index.jsp#/
  • 在apps資料夾下，建立型別cq:ClientLibraryFolder的新節點

資料夾結構

  • 在節點的properties中，選取Multi新增下列屬性
    名稱： categories
    型別： String []
    值： apps.fmdita.review_overrides， apps.fmdita.xml_editor.page_overrides

資料夾屬性

  • 若要新增內建js，請建立新檔案，例如，在上述建立的節點中tcx1.js。 在這裡，新增來自dist/guides-extension.umd.cjs或dist/guides-extension.js的程式碼。 現在建立新檔案js.txt，我們在這裡新增js檔案的名稱，在此案例中會是：
#base=.
tcx1.js
  • 若要新增內建的css，請建立新檔案，例如tcx1.css在上述建立的節點中。 在這裡，新增來自dist/build.css的程式碼。 現在建立新檔案css.txt，在此加入我們的css檔案名稱，在此案例中會是：
#base=.
tcx1.css
  • 執行shift + refresh以載入包含自訂內容的應用程式！

疑難排解

檢查上述所有步驟是否正確執行。
將程式碼新增至tcx.js後，請務必執行強制重新整理(shift+refresh)。
現在開啟AEM，按一下滑鼠右鍵並按一下Inspect
移至[來源]並搜尋您的[node_name].js （例如： extensions.js）檔案。 執行Control / Cmd + D以搜尋您的檔案。 如果存在包含您從dist/guides-extension.umd.cjs或dist/guides-extension.js貼上之JS程式碼的.js檔案，表示您的設定已完成

recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178