页面模板 page-templates

在本章中,我们将探讨页面模板与页面之间的关系。 我们将根据AdobeXD的一些模型构建一个无样式的杂志文章模板。 在构建模板的过程中,将涵盖核心组件和高级策略配置。

先决条件 prerequisites

这是一个多部分教程,并假定已完成创作内容和发布更改章节中概述的步骤。

目标

  1. 了解页面模板的详细信息,以及如何使用策略对页面内容实施精细控制。
  2. 了解如何链接模板和页面。
  3. 创建新模板并创作页面。

您将构建的内容 what-you-will-build

在本教程的这一可选部分中,您将构建一个新的“杂志文章页面”模板,该模板可用于创建新的杂志文章并与通用结构保持一致。 该模板基于设计和在AdobeXD中生成的UI套件。 本章仅侧重于构建模板的结构或框架。 未实施任何样式,但模板和页面可正常使用。

创建杂志文章页面模板

创建页面时,必须选择一个模板,该模板用作创建新页面的基础。 模板定义生成页面的结构、初始内容和允许的组件。

页面模板有3个主要区域:

  1. 结构 — 定义模板中的组件。 内容作者无法编辑这些内容。
  2. 初始内容 — 定义模板开始的组件,这些组件可由内容作者编辑和/或删除
  3. 策略 — 定义有关组件的行为方式以及作者可用的选项的配置。

接下来,在AEM中创建一个与模型结构匹配的新模板。 这将发生在AEM的本地实例中。 按照以下视频中的步骤进行操作:

您可以使用以下缩略图来标识您的模板(或上传您自己的模板!)

文章页面模板缩略图

解决方案包

可以通过包管理器下载并安装已完成的杂志模板🔗的解决方案。

使用体验片段更新页眉和页脚 experience-fragments

创建全局内容(如页眉或页脚)时的常见做法是使用体验片段。 体验片段,允许用户组合多个组件以创建单个可引用的组件。 体验片段具有支持多站点管理和本地化的优势。

站点模板生成了页眉和页脚。 接下来,更新体验片段以匹配模型。 按照以下视频中的步骤进行操作:

下面是视频的高级步骤:

  1. 下载示例内容包​ WKND-Starter-Assets-Skate-Article-1.2.zip
  2. 使用包管理器上载并安装内容包。
  3. 更新页眉和页脚体验片段以使用WKND徽标

创建杂志文章页面

接下来,使用“杂志文章页面”模板创建一个新页面。 创作页面的内容以匹配站点模型。 按照以下视频中的步骤进行操作:

使用提供的文本填充文章正文。

恭喜! congratulations

恭喜,您刚刚使用Adobe Experience Manager Sites创建了新模板和页面。

后续步骤 next-steps

此时,杂志文章页面和站点与WKND的品牌样式不匹配。 按照主题教程了解更新用于将全局样式应用于站点的CSS和Javascript前端代码的最佳实践。

解决方案包

本章的解决方案包可供下载: WKND-Magazine-Template-SOLUTION-1.0.zip

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