页面和模板 pages-and-template

从 GitHub 签出 tutorial/pages-templates-start 分支

$ cd ~/code/aem-guides-wknd
$ git checkout tutorial/pages-templates-start

运用您的 Maven 技能将代码库部署到本地 AEM 实例：

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

使用名为​ 文章页面 ​的​ 页面模板类型 ​创建一个模板。

切换到​ 结构 ​模式。

添加一个​ 体验片段 ​组件作为模板顶部的​ 页眉。

• 配置组件，使其指向 /content/experience-fragments/wknd/us/en/site/header/master。
• 将策略设置为​ 页眉，并确保​ 默认元素 ​被设置为 header。下一章将通过 CSS 为 header 元素应用样式。

添加一个​ 体验片段 ​组件作为模板底部的​ 页脚。

• 配置组件，使其指向 /content/experience-fragments/wknd/us/en/site/footer/master。
• 将策略设置为​ 页脚，并确保​ 默认元素 ​被设置为 footer。下一章将通过 CSS 为 footer 元素应用样式。

锁定模板在初始创建时所包含的​ 主要 ​容器。

• 将策略设置为​ 主要页面，并确保​ 默认元素 ​被设置为 main。下一章将通过 CSS 为 main 元素应用样式。

将一个​ 图像 ​组件添加到​ 主要 ​容器中。

• 解锁​ 图像 ​组件。

在主要容器中​ 图像 ​组件的下面添加一个​ 痕迹导航 ​组件。

• 为​ 痕迹导航 ​组件创建一个名为​ 文章页面 - 痕迹导航 ​的策略。将​ 导航开始级别 ​设为 4。

在​ 主要 ​容器中​ 痕迹导航 ​组件的下面添加一个​ 容器 ​组件。它用作模板的​ 内容容器。

• 解锁​ 内容 容器。
• 将策略设置为​ 页面内容。

在​ 内容容器 ​下面再添加一个​ 容器 ​组件。它用作模板的​ 侧边栏 ​容器。

• 解锁​ 侧边栏 ​容器。
• 创建名为​ 文章页面 - 侧边栏 ​的策略。
• 在 WKND Sites 项目 - 内容 ​中配置​ 允许使用的组件，其中包含：按钮、下载、图像、列表、分隔符、社交媒体共享、文本 ​和​ 标题。

更新页面根容器的策略。这是模板上的最外层容器。将策略设置为​ 页面根。

• 在​ 容器设置 ​中，将​ 布局 ​设置为​ 响应式网格。

调整​ 内容容器 ​的布局模式。从右向左拖动手柄，将容器缩小到八列宽。

调整​ 侧边栏容器 ​的布局模式。从右向左拖动手柄，将容器缩小到四列宽。然后将左侧手柄从左向右拖一列，使容器变成 3 列宽，使​ 内容容器 ​之间留出 1 列的间隔。

打开移动设备模拟器，然后切换到移动设备断点。再次调整布局模式，使​ 内容容器 ​和​ 侧边栏容器 ​占据页面的整个宽度。这样，容器就在移动设备断点处上下叠放起来。

更新​ 内容容器 ​中​ 文本 ​组件的策略。

• 将策略设置为​ 内容文本。
• 在​ 插件 > 段落样式 ​中勾选​ 启用段落样式，并确保启用​ 引文块。

切换到​ 初始内容 ​模式。

在​ 内容容器 ​中添加一个​ 标题 ​组件。它用作文章标题。如果它为空，就会自动显示当前页面的标题。

在第一个标题组件下方添加第二个​ 标题 ​组件。

• 为该组件配置文本：“作者”。这是一个文本占位符。
• 将类型设置为 H4。

在​ 作者 ​标题组件下方添加一个​ 文本 ​组件。

在​ 侧边栏容器 ​中添加一个​ 标题 ​组件。

• 为该组件配置文本：“分享这个故事”。
• 将类型设置为 H5。

在​ 分享这个故事 ​标题组件下方添加​ 社交媒体分享 ​组件。

在​ 社交媒体分享 ​组件下方添加​ 分隔符 ​组件。

在​ 分隔符 ​组件下方添加​ 下载 ​组件。

在​ 下载 ​组件下方添加​ 列表 ​组件。

更新模板的​ 初始页面属性。

• 在​ 社交媒体 > 社交媒体分享 ​中勾选 Facebook 和 Pinterest

导航到 http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd，在模板控制台中查看模板

启用 ​文章页面模板。

编辑文章页面模板的属性，上传以下缩略图，以快速识别使用此文章页面模板创建的页面：

下载示例内容包 WKND-PagesTemplates-Content-Assets.zip。

使用包管理器上传并安装内容包，位于：http://localhost:4502/crx/packmgr/index.jsp

更新用于体验片段的 Web 变体模板，位于 http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html

• 更新模板上​ 容器 ​组件的策略。
• 将策略设置为 XF Root。
• 在​ 允许使用的组件 ​中选择组件组 WKND Sites 项目 - 结构，将​ 语言导航、导航 ​和​ 快速搜索 ​组件包含进去。

打开渲染页眉的体验片段，位于 http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/header/master.html

配置此片段的根​ 容器。这是最外层​ 容器。

• 将​ 布局 ​设置为​ 响应式网格

将 WKND 深色徽标 ​作为图像添加在​ 容器 ​顶部。该徽标包含在上一步已安装的包中。

• 将 WKND 深色徽标 ​的布局更改为​ 两 ​列宽。从右向左拖动手柄。
• 将徽标的​ 替换文本 ​配置为“WKND 徽标”。
• 配置徽标，将其​ 关联 ​到/content/wknd/us/en主页。

配置已经放在页面上的​ 导航 ​组件。

• 将​ 排除根级别 ​设置为 1。
• 将​ 导航结构深度 ​设置为 1。
• 将​ 导航 ​组件的布局改为​ 八 ​列宽。从右向左拖动手柄。

移除​ 语言导航 ​组件。

将​ 搜索 ​组件的布局改为​ 两 ​列宽。从右向左拖动手柄。现在，所有组件都应在同一行上水平对齐。

打开渲染页脚的体验片段，位于 http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html

配置此片段的根​ 容器。这是最外层​ 容器。

• 将​ 布局 ​设置为​ 响应式网格

将 WKND 浅色徽标 ​作为图像添加在​ 容器 ​顶部。该徽标包含在上一步已安装的包中。

• 将 WKND 浅色徽标 ​的布局改为​ 两 ​列宽。从右向左拖动手柄。
• 将徽标的​ 替换文本 ​配置为“WKND 浅色徽标”。
• 配置徽标，将其​ 关联 ​到/content/wknd/us/en主页。

在徽标下方添加​ 导航 ​组件。配置​ 导航 ​组件：

• 将​ 排除根级别 ​设置为 1。
• 取消勾选​ 收集所有子页面。
• 将​ 导航结构深度 ​设置为 1。
• 将​ 导航 ​组件的布局改为​ 八 ​列宽。从右向左拖动手柄。

导航到位于 http://localhost:4502/sites.html/content/wknd/us/en/magazine 的 Sites 控制台。

在 WKND > US > EN > 杂志 ​下方创建一个页面。

• 选择​ 文章页面 ​模板。
• 在​ 属性 ​中，将​ 标题 ​设置为“洛杉矶滑板运动场终极指南”
• 将​ 名称 ​设置为“guide-la-skateparks”

将​ 作者 ​标题替换为“By Stacey Roswells”文本。

更新​ 文本 ​组件，以包含一个用于填充文章的段落。您可以使用以下文本文件作为副本：la-skate-parks-copy.txt。

添加另一个​ 文本 ​组件。

• 更新组件，以包含以下引文：“没有比洛杉矶更适合玩滑板的地方了。”。
• 在全屏模式下编辑富文本编辑器，更改上述引文，使用​ 引文块 ​元素。

继续填充文章正文，以匹配模型。

配置​ 下载 ​组件，使用文章的 PDF 版本。

• 在​ 下载 > 属性 ​中，点击复选框​ 从 DAM 资产获取标题。
• 将​ 描述 ​设置为：“获取完整故事”。
• 将​ 操作文本 ​设置为：“下载 PDF”。

配置​ 列表 ​组件。

• 在​ 列表设置 > 构建列表方法 ​中，选择​ 子页面。
• 将​ 父页面 ​设置为 /content/wknd/us/en/magazine。
• 在​ 项设置 ​中，勾选​ 链接项 ​和​ 显示日期。

打开 CRXDE-Lite，然后使用导航树导航至 /content/wknd/us/en/magazine/guide-la-skateparks。

点击页面 la-skateparks 下方的节点 jcr:content，查看属性：

注意 cq:template 的值，它指向 /conf/wknd/settings/wcm/templates/article-page，即之前创建的文章页面模板。

还应注意 sling:resourceType 的值，它指向 wknd/components/page。这是通过 AEM 项目原型创建的页面组件，负责根据模板渲染页面。

展开 /content/wknd/us/en/magazine/guide-la-skateparks/jcr:content 下面的 jcr:content 节点，查看节点层级结构：

您应该能将每个节点松散地映射到已创作的组件。查看以 container 为前缀的节点，看看您是否可以识别所使用的不同布局容器。

接下来在 /apps/wknd/components/page 查看页面组件。查看 CRXDE Lite 中的组件属性：

页面组件下方只有两个 HTL 脚本，customfooterlibs.html 和 customheaderlibs.html。那么这个组件如何渲染页面呢？

sling:resourceSuperType 属性指向 core/wcm/components/page/v2/page。此属性允许 WKND 的页面组件继承核心组件页面组件的​ 所有 ​功能。这是代理组件模式的第一个示例。更多信息请参见此处。

查看 WKND 组件中的另一个组件，即 /apps/wknd/components/breadcrumb 中的 Breadcrumb 组件。请注意，可以找到相同的 sling:resourceSuperType 属性，但这次它指向 core/wcm/components/breadcrumb/v2/breadcrumb。这是使用代理组件模式包含核心组件的另一个示例。事实上，WKND 代码库中的所有组件都是 AEM 核心组件的代理（自定义的 HelloWorld 演示组件除外）。最佳做法是在编写自定义代码​ 之前 ​尽可能多地重复使用核心组件的功能。

接下来使用 CRXDE Lite 查看 /libs/core/wcm/components/page/v2/page 上的核心组件页面：

请注意，在此页面的下方包含了许多脚本文件。核心组件页面包含许多功能。此功能被分成多个脚本，以方便维护和阅读。您可以通过打开 page.html 查找 data-sly-include 来跟踪 HTL 脚本的包含情况：

<!--/* /libs/core/wcm/components/page/v2/page/page.html */-->
<!DOCTYPE HTML>
<html data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page" lang="${page.language}"
    data-sly-use.head="head.html"
    data-sly-use.footer="footer.html"
    data-sly-use.redirect="redirect.html">
    <head data-sly-call="${head.head @ page = page}"></head>
    <body class="${page.cssClassNames}"
        id="${page.id}"
        data-cmp-data-layer-enabled="${page.data ? true : false}">
        <script data-sly-test.dataLayerEnabled="${page.data}">
        window.adobeDataLayer = window.adobeDataLayer || [];
        adobeDataLayer.push({
            page: JSON.parse("${page.data.json @ context='scriptString'}"),
            event:'cmp:show',
            eventInfo: {
                path: 'page.${page.id @ context="scriptString"}'
            }
        });
        </script>
        <sly data-sly-test.isRedirectPage="${page.redirectTarget && (wcmmode.edit || wcmmode.preview)}"
            data-sly-call="${redirect.redirect @ redirectTarget = page.redirectTarget}"></sly>
        <sly data-sly-test="${!isRedirectPage}">
            <sly data-sly-include="body.skiptomaincontent.html"></sly>
            <sly data-sly-include="body.socialmedia_begin.html"></sly>
            <sly data-sly-include="body.html"></sly>
            <sly data-sly-call="${footer.footer @ page = page}"></sly>
            <sly data-sly-include="body.socialmedia_end.html"></sly>
        </sly>
    </body>
</html>

将 HTL 分解为多个脚本的另一个原因是允许代理组件覆盖各个脚本，以实施自定义业务逻辑。创建 HTL 脚本 customfooterlibs.html 和 customheaderlibs.html 的明确目的就是被实施项目覆盖。

您可以阅读这篇文章，详细了解可编辑模板如何影响内容页面的渲染。

查看另一个核心组件，例如位于 /libs/core/wcm/components/breadcrumb/v2/breadcrumb 的痕迹导航。查看 breadcrumb.html 脚本，了解痕迹导航组件的标记是如何最终生成的。

在 VSCode 中打开 aem-guides-wknd 项目。

展开项目资源管理器中的 ui.content 模块。展开 src 文件夹，导航至 /conf/wknd/settings/wcm/templates。

右键单击 templates 文件夹，然后选择​ 从 AEM 服务器导入：

应导入 article-page，同时还应更新 page-content、xf-web-variation 模板。

重复导入内容的步骤，但选择 /conf/wknd/settings/wcm/policies 中的​ 策略 ​文件夹。

查看 ui.content/src/main/content/META-INF/vault/filter.xml 中的 filter.xml 文件。

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
    <filter root="/conf/wknd" mode="merge"/>
    <filter root="/content/wknd" mode="merge"/>
    <filter root="/content/dam/wknd" mode="merge"/>
    <filter root="/content/experience-fragments/wknd" mode="merge"/>
</workspaceFilter>

filter.xml 文件负责识别随包安装的节点的路径。注意每个过滤器上的 mode="merge"，这表明不会更改现有内容，只会添加新内容。由于内容作者可能会更新这些路径，因此代码部署​ 不会 ​覆盖内容，这一点很重要。查看 FileVault 文档，了解有关使用过滤器元素的更多详细信息。

比较 ui.content/src/main/content/META-INF/vault/filter.xml 和 ui.apps/src/main/content/META-INF/vault/filter.xml，了解每个模块管理的不同节点。