文档AEMAEM 教程AEM Sites WKND 教程

主题化工作流 theming

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 初学者
  • 开发人员

在本章中，我们更新了Adobe Experience Manager Site的主题源以应用品牌特定的样式。 我们了解如何使用代理服务器在针对实时站点进行编码时查看CSS和Javascript更新的预览。 本教程还将介绍如何使用AdobeCloud Manager的前端管道将主题更新部署到AEM站点。

最终，我们的网站将更新为包含符合WKND品牌的样式。

先决条件 prerequisites

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

目标

  1. 了解如何下载和修改站点的主题源。
  2. 了解针对实时网站的代码如何实现实时预览。
  3. 了解使用AdobeCloud Manager的前端管道将编译的CSS和JavaScript更新作为主题的一部分交付的端到端工作流。

更新主题 theme-update

接下来，对主题源进行更改，使站点与WKND品牌的外观相匹配。

https://video.tv.adobe.com/v/332918?quality=12&learn=on

视频的高级步骤：

  1. 在AEM中创建用于代理开发服务器的本地用户。
  2. 从AEM下载主题源并使用本地IDE（如VSCode）打开。
  3. 修改主题源，并使用代理开发服务器实时预览CSS和JavaScript更改。
  4. 更新主题源，使杂志文章与WKND品牌样式和模型匹配。

解决方案文件

下载WKND示例主题的已完成样式

使用前端管道部署主题 deploy-theme

使用Cloud Manager的前端管道将主题更新部署到AEM环境。

https://video.tv.adobe.com/v/338722?quality=12&learn=on

视频的高级步骤：

  1. 在Cloud Manager🔗中创建新的Git 存储库

  2. 将主题源项目添加到Cloud Manager Git存储库：

    code language-shell 
    $ cd <PATH_TO_THEME_SOURCES_FOLDER>
$ git init -b main
$ git add .
$ git commit -m "initial commit"
$ git remote add origin <CLOUD_MANAGER_GIT_REPOSITORY_URL>

  3. 在Cloud Manager中配置前端管道以部署前端代码。

  4. 运行前端管道将更新部署到目标AEM环境。

示例存储库

提供了几个可用作参考的GitHub存储库示例：

恭喜！ congratulations

恭喜，您刚刚更新了一个主题并将其部署到AEM！

后续步骤 next-steps

通过使用AEM项目原型创建站点，更深入地了解AEM开发并了解更多基础技术。

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9