页面模板

注意

快速网站创建工具当前为技术预览。 它可用于测试和评估目的,并且除非与Adobe支持部门达成协议,否则不会用于生产。

在本章中,我们将探讨页面模板与页面之间的关系。 我们将根据 AdobeXD. 在构建模板过程中,将介绍核心组件和高级策略配置。

前提条件

这是一个多部分教程,我们假定在 创作内容和发布更改 章节已完成。

目标

  1. 了解页面模板的详细信息以及如何使用策略来强制对页面内容进行精细控制。
  2. 了解模板和页面的关联方式。
  3. 创建新模板并创作页面。

将构建的内容

在本教程的这一部分中,您将构建新的杂志文章页面模板,该模板可用于创建新的杂志文章,并与通用结构保持一致。 模板将基于AdobeXD中生成的设计和UI Kit。 本章仅侧重于构建模板的结构或框架。 将不会实施样式,但模板和页面将可正常工作。

创建杂志文章页面模板

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

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

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

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

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

文章页面模板缩略图

解决方案包

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

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

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

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

以下视频的高级步骤:

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

创建杂志文章页面

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

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

恭喜!

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

后续步骤

此时,杂志文章页面和网站与WKND的品牌样式不匹配。 关注 天明 本教程介绍了更新CSS和Javascript前端代码的最佳实践,这些代码用于将全局样式应用到网站。

解决方案包

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

在此页面上