文档AEM GuidesAEM Guides 文档

安装和使用AEM Guides扩展包

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • undefined
  • undefined

通过扩展，您可以自定义您的AEM Guides应用程序，以更好地满足您的需求。 AEM Guides v4.3及更高版本（内部部署）和2310（云）都支持此扩展框架。

要求

此包需要Git Bash和npm

安装

引导AEM Guides Framework安装的最简单方法是通过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 +刷新）。
现在打开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