@adobe/aem-site-theme-builder 中文文档教程

Question

AEM Site Theme Builder

此存储库包含用于构建网站主题的脚本，确保与 AEM 网站模板的要求兼容。 集成 Theme Builder 的推荐方法是将其安装为站点模板主题的 npm 依赖项。 这样 aem-site-theme-builder 命令可以在 NPM 脚本中使用。 可以在标准站点模板 中找到此类集成的示例。

Installation

cd <your-site-theme>
npm install @adobe/aem-site-theme-builder --save-dev

Usage

Proxy

将在 AEM 上作为云服务运行的站点代理到本地主机，并将对站点主题的请求替换为站点主题的本地编译版本。

npx aem-site-theme-builder proxy

可以通过环境变量中描述的.env提供网站主题的URL。 为了注入本地编译的主题，已编译站点主题的位置 必须匹配。

Live Preview

实时预览将运行代理服务器（如上所述）以及浏览器同步功能。 浏览器同步将指向代理页面，并将在 dist 文件夹中查找更改，并在每次发生更改时刷新页面。

npx aem-site-theme-builder live

Theme Deployment

1. Compile your theme and make the artifact available on GitHub. AEM as a Cloud Service will try to access https://api.github.com/repos/%GIT_ORG%/%GIT_REPO%/actions/artifacts/%GIT_ARTIFACT_ID%/zip in order to download the theme.
2. Execute npx aem-site-theme-builder deploy in order to update the reference on AEM as a Cloud Service.

Complete development workflow

为了充分利用主题构建器，您必须运行提供代理和浏览器同步功能的实时预览。 最重要的是，您需要确保您的源文件有额外的观察器来触发您的主题构建过程，该过程会在您的主题的 dist 文件夹中产生变化。 这样，在对源文件进行更改后，您将通过浏览器同步刷新代理页面。

API

Environment Variables

Theme Builder 脚本基于您提供的环境变量。 这些变量用于正确提供 AEM Site Theme Builder 的实时预览和部署功能。 以下是所需变量的列表：

AEM_URL=<URL of the AEM as a Cloud Service instance>
AEM_SITE=<name of the AEM site>
AEM_PROXY_PORT=<localhost proxy server port>

定义站点变量的推荐方法是在主题项目存储库中使用/创建 .env 文件。

Expected Output of Compiled Site Theme

您可以自由使用您选择的任何构建工具。 与 Site Theme Builder 的唯一合同是编译后的工件应按如下方式提供：

dist/
    css/
        theme.css
    js/
        theme.js
    resources/
        a-font.font
        an-image.png

Release and publish

运行“发布和发布”GitHub 工作流程并提供您将要发布的语义版本。

Contributing

欢迎投稿！ 阅读贡献指南了解更多信息。

Licensing

这个项目是根据麻省理工学院许可证获得许可的。 有关详细信息，请参阅许可证。