页面和模板 pages-and-template

查看 tutorial/pages-templates-start 分支自 GitHub

$ 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. 此 header元素将在下一章中使用CSS进行定位。

添加 体验片段 要用作 页脚 位于模板底部。

• 配置组件以指向 /content/experience-fragments/wknd/us/en/site/footer/master.
• 将策略设置为 页脚 并确保 默认元素 设置为 footer. 此 footer 元素将在下一章中使用CSS进行定位。

锁定 主要 最初创建模板时包含的容器。

• 将策略设置为 页面主要 并确保 默认元素 设置为 main. 此 main 元素将在下一章中使用CSS进行定位。

添加 图像 组件到 主要 容器。

• 解锁 图像 组件。

添加 痕迹导航 组件位于 图像 组件进行标记。

• 为创建策略 痕迹导航 组件已命名 文章页面 — 痕迹导航. 设置 导航开始级别 到 4.

添加 容器 组件位于 痕迹导航 组件和内部 主要 容器。 这用作 内容容器 用于模板。

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

添加其他 容器 组件位于 内容容器. 这用作 侧边栏 模板的容器。

• 解锁 侧边栏 容器。
• 创建名为的策略 文章页面 — 侧边栏.
• 配置 允许的组件 下 WKND站点项目 — 内容 要包括，请执行以下操作： 按钮， 下载， 图像， 列表， 分隔符， 社交媒体共享， 文本、和 标题.

更新页面根容器的策略。 这是模板上最外部的容器。 将策略设置为 页面根目录.

• 下 容器设置，设置 布局 到 响应式网格.

参与以下项目的布局模式： 内容容器. 从右向左拖动手柄，并将容器收缩为八列宽。

参与以下项目的布局模式： 侧边栏容器. 从右向左拖动手柄，并将容器收缩为四列宽。 然后，将左侧手柄从左到右拖动一列，以使容器3列宽，并在 内容容器.

打开移动模拟器并切换到移动断点。 再次参与布局模式并做出 内容容器 和 侧边栏容器 页面的完整宽度。 这会将容器垂直栈叠在移动设备断点中。

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

• 将策略设置为 内容文本.
• 下 插件 > 段落样式，检查 启用段落样式 并确保 报价块 已启用。

切换到 初始内容 模式。

添加 标题 组件到 内容容器. 它用作文章标题。 如果留空，则会自动显示当前页面的标题。

添加秒数 标题 第一个标题组件下的组件。

• 使用文本“By Author”配置组件。 这是一个文本占位符。
• 将类型设置为 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根.
• 在 允许的组件 选择组件组 WKND Sites项目 — 结构 要包含 语言导航， 导航、和 快速搜索 组件。

打开在以下位置呈现标题的体验片段： http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/header/master.html

配置根 容器 片段的URL。 这是最外层 容器.

• 设置 布局 到 响应式网格

添加 wknd深色徽标 作为顶部图像 容器. 徽标包含在上一步中安装的软件包中。

• 修改布局 wknd深色徽标 成为 二 列宽。 从右到左拖动手柄。
• 使用配置徽标 替换文本 “WKND徽标”的。
• 将徽标配置到 链接 到 /content/wknd/us/en 主页。

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

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

删除 语言导航 组件。

修改布局 Search 要成为的组件 二 列宽。 从右到左拖动手柄。 现在，所有组件都应水平对齐一行。

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

配置根 容器 片段的URL。 这是最外层 容器.

• 设置 布局 到 响应式网格

添加 WKND浅色徽标 作为顶部图像 容器. 徽标包含在上一步中安装的软件包中。

• 修改布局 WKND浅色徽标 成为 二 列宽。 从右到左拖动手柄。
• 使用配置徽标 替换文本 “WKND徽标光”的徽标。
• 将徽标配置到 链接 到 /content/wknd/us/en 主页。

添加 导航 徽标下的组件。 配置 导航 组件：

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

导航到站点控制台，网址为 http://localhost:4502/sites.html/content/wknd/us/en/magazine.

在下创建页面 WKND > US > EN > 杂志.

• 选择 文章页面 模板。
• 下 属性 设置 标题 到《洛杉矶滑板公园终极指南》
• 设置 名称 到“滑板公园指南”

替换 按作者 标题中包含“由Stacey Roswells撰写”。

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

添加其他 文本 组件。

• 更新组件以包括引用：“没有比洛杉矶更适合清除的地方。”
• 以全屏模式编辑富文本编辑器，并修改上述引号以使用 报价块 元素。

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

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

• 下 下载 > 属性，单击该复选框可 从DAM资源获取标题.
• 设置 描述 收件人：“获取完整故事”。
• 设置 操作文本 收件人：“下载PDF”。

配置 列表 组件。

• 下 列表设置 > 使用以下项目生成列表，选择 子页面.
• 设置 父页面 到 /content/wknd/us/en/magazine.
• 在 项目设置 check 链接项目 并选中 显示日期.

打开 CRXDE-Lite 并使用树导航来导航到 /content/wknd/us/en/magazine/guide-la-skateparks.

单击 jcr:content 节点位于 la-skateparks 页面并查看属性：

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

另外请注意的值 sling:resourceType，指向 wknd/components/page. 这是由AEM项目原型创建的页面组件，负责根据模板呈现页面。

展开 jcr:content 节点在下 /content/wknd/us/en/magazine/guide-la-skateparks/jcr:content 并查看节点层次结构：

您应该能够将每个节点松散映射到已创作的组件。 查看您是否可以通过检查带有前缀的节点来识别所使用的不同布局容器 container.

接下来，在检查页面组件 /apps/wknd/components/page. 以CRXDE Lite查看组件属性：

只有两个HTL脚本， customfooterlibs.html 和 customheaderlibs.html 在页面组件下。 那么，此组件如何呈现页面呢？

此 sling:resourceSuperType 属性指向 core/wcm/components/page/v2/page. 此属性允许WKND的页面组件继承 所有 核心组件页面组件的功能。 这是第一个例子，我们称之为 代理组件模式. 可以找到更多信息 此处.

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

接下来，在以下位置检查核心组件页面： /libs/core/wcm/components/page/v2/page 使用CRXDE Lite：

请注意，此页面下包含许多脚本文件。 核心组件页面包含多项功能。 此功能分为多个脚本，以便更轻松地维护和读取。 您可以通过打开 page.html 并查找 data-sly-include：

<!--/* /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创建用于明确目的，以便由实施项目覆盖。

您可以了解有关可编辑模板如何影响渲染的更多信息 内容页面（阅读本文）.

Inspect是另一个核心组件，如上的痕迹导航 /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.

Inspect filter.xml 文件来源 ui.content/src/main/content/META-INF/vault/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 了解每个模块管理的不同节点。