主题工作流

注意

此处展示的快速网站创建功能将于2021年下半年发布。 相关文档可供预览。

在本章中,我们将更新Adobe Experience Manager网站的主题源,以应用特定于品牌的样式。 我们将了解在我们针对实时网站编码时,如何使用代理服务器查看CSS和Javascript更新的预览。 本教程还将介绍如何使用GitHub操作将主题更新部署到AEM网站。

最后,我们的网站将进行更新以包含与WKND品牌匹配的样式。

前提条件

这是一个多部分教程,假定已完成页面模板章节中概述的步骤。

目标

  1. 了解如何下载和修改网站的主题源。
  2. 了解如何针对实时网站编码以进行实时预览。
  3. 了解使用GitHub操作将编译的CSS和JavaScript更新作为主题一部分交付的端到端工作流。

更新主题

接下来,对主题源进行更改,以便网站与WKND品牌的外观相匹配。

视频的高级步骤:

  1. 在AEM中创建本地用户以与代理开发服务器一起使用。
  2. 从AEM下载主题源,然后使用本地IDE(如VSCode)打开。
  3. 修改主题源,并使用代理开发服务器实时预览CSS和JavaScript更改。
  4. 更新主题源,以便杂志文章与WKND品牌风格和模型相匹配。

解决方案文件

下载WKND主题的已完成样式

部署主题

使用GitHub操作将主题更新部署到AEM环境。

视频的高级步骤:

  1. 将主题源项目作为新存储库🔗添加到GitHub。
  2. 在GitHub中创建个人访问令牌并保存到安全位置。
  3. 在AEM环境中配置GitHub设置,以指向GitHub存储库并包含您的个人访问令牌。
  4. 在GitHub存储库中创建以下加密密钥:
    • AEM_SITE - AEM站点的根(即 wknd)
    • AEM_URL - AEM创作环境的url
    • GIT_TOKEN — 步骤2中的个人访问令牌。
  5. 运行GitHub操作:生成和部署Github工件。 这将产生运行操作的下游效果:使用项目id​更新AEM上的主题配置,该项目将按AEM_URLAEM_SITE指定的方式将主题源部署到AEM环境。

示例repo

有几个示例GitHub repo可用作引用:

恭喜!

恭喜,您刚刚创建并部署了一个主题到AEM!

后续步骤

深入了解AEM开发,并通过使用AEM项目原型创建站点,进一步了解基础技术。

在此页面上