安装和使用AEM Guides扩展包
通过扩展,您可以自定义您的AEM Guides应用程序,以更好地满足您的需求。 AEM Guides v4.3及更高版本(内部部署)和2310(云)都支持此扩展框架。
要求
此包需要Git Bash和npm
安装
引导AEM Guides Framework安装的最简单方法是通过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
- 要添加内置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 +刷新)。
现在打开AEM,右键单击并单击Inspect
转到“源”并搜索您的[node_name].js
(例如: extensions.js)文件。 执行控制/Cmd + D以搜索文件。 如果存在包含从dist/guides-extension.umd.cjs
或dist/guides-extension.js
粘贴的JS代码的.js
文件,则已完成设置
recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178