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

Last update: Mon Feb 24 2025 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

新增自訂程式碼

在src/目錄中為您要擴充的每個元件新增程式碼檔案。已經為您新增了一些範例檔案。
現在在位於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

NOTE

對於倒數第二個UI，值為： apps.fmdita.penultimate.xml_editor.page_overrides和apps.fmdita.review_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