如何将 Material 设计组件添加到 Adobe Experience Manager
How To Add Material Design Components To Adobe Experience Manager
我的任务是在 Adobe Experience Manager 中使用 Material Design 编写样式和功能的组件。我已经完成了一半 - 我已经将 CSS for Material Design 导入到我的 AEM 组件中,并且工作正常。
但是,我不知道如何让 Material 设计的 Javascript 部分在我的组件中工作。据我了解,您必须将 Javascript 个文件一个一个地添加到您的 clientlib
文件夹中,然后再将它们添加到您的 js.txt
文件中。
Material Design 在他们的库中有几十个单独的 JS 文件,我无法想象我需要将它们一个一个地添加到我的 clientlib
。
关于让 Material 设计与 AEM 一起工作的任何提示?
如果我理解你的问题是正确的,你想从你引用的库中包含 material 组件 JS:material-components-web
为此,您可以从此 link 下载完整的缩小库:https://unpkg.com/material-components-web/dist/material-components-web.min.js
我在 material-component getting started guide 之后发现
你也可以从他们发布的 npm 依赖项中包含它(如果你有一个 npm 项目)。
您可以在当前的 clientlib 中包含 JS,或者 create a clientlib 包含该 JS(不会详细介绍如何创建 clientlib,因为这不是问题所在)
或者,如果您不想包含整个 material 库,您更愿意选择包含在您的 clientlib 中的组件,您将必须通过 WebPack 或任何其他 JS 捆绑器创建一个捆绑包, WebPack 是最受欢迎的。解释 WebPack 需要很长的答案,google 为此,您会找到许多示例配置和项目。我发现这个 repo 有一个 material 组件的入门项目:https://github.com/vardius/web-components-webpack-es6-boilerplate
我的任务是在 Adobe Experience Manager 中使用 Material Design 编写样式和功能的组件。我已经完成了一半 - 我已经将 CSS for Material Design 导入到我的 AEM 组件中,并且工作正常。
但是,我不知道如何让 Material 设计的 Javascript 部分在我的组件中工作。据我了解,您必须将 Javascript 个文件一个一个地添加到您的 clientlib
文件夹中,然后再将它们添加到您的 js.txt
文件中。
Material Design 在他们的库中有几十个单独的 JS 文件,我无法想象我需要将它们一个一个地添加到我的 clientlib
。
关于让 Material 设计与 AEM 一起工作的任何提示?
如果我理解你的问题是正确的,你想从你引用的库中包含 material 组件 JS:material-components-web
为此,您可以从此 link 下载完整的缩小库:https://unpkg.com/material-components-web/dist/material-components-web.min.js 我在 material-component getting started guide 之后发现 你也可以从他们发布的 npm 依赖项中包含它(如果你有一个 npm 项目)。
您可以在当前的 clientlib 中包含 JS,或者 create a clientlib 包含该 JS(不会详细介绍如何创建 clientlib,因为这不是问题所在)
或者,如果您不想包含整个 material 库,您更愿意选择包含在您的 clientlib 中的组件,您将必须通过 WebPack 或任何其他 JS 捆绑器创建一个捆绑包, WebPack 是最受欢迎的。解释 WebPack 需要很长的答案,google 为此,您会找到许多示例配置和项目。我发现这个 repo 有一个 material 组件的入门项目:https://github.com/vardius/web-components-webpack-es6-boilerplate