页面和模板 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。 header元素在下一章中以CSS为目标。

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

• 将组件配置为指向/content/experience-fragments/wknd/us/en/site/footer/master。
• 将策略设置为​ 页脚，并确保​ 默认元素 ​设置为footer。 footer元素在下一章中以CSS为目标。

锁定最初创建模板时包含的​ main ​容器。

• 将策略设置为​ Page Main，并确保​ Default Element ​设置为main。 main元素在下一章中以CSS为目标。

将​ Image ​组件添加到​ main ​容器。

• 解锁​ 图像 ​组件。

在主容器中的​ Image ​组件下添加​ 痕迹导航 ​组件。

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

在​ 痕迹导航 ​组件下方和​ 主要 ​容器内添加​ 容器 ​组件。 它充当模板的​ 内容容器。

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

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

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

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

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

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

启用​ 侧边栏容器 ​的布局模式。 从右向左拖动手柄，并将容器收缩为四列宽。 然后，将左侧句柄从左到右拖动一列，以使容器3列宽，并在​ 内容容器 ​之间留下1列间隙。

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

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

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

切换到初始内容​ 模式。

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

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

• 使用文本“By Author”配置组件。 这是一个文本占位符。
• 将类型设置为H4。

在​ By Author ​标题组件下添加​ 文本 ​组件。

将​ Title ​组件添加到​ 侧边栏容器。

• 使用文本配置组件：“共享此故事”。
• 将类型设置为H5。

在​ 共享此故事 ​标题组件下添加​ 社交媒体共享 ​组件。

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

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

在​ 下载 ​组件下添加​ List ​组件。

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

• 在​ 社交媒体 > 社交媒体共享 ​下，选中​ 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上的体验片段的模板

• 更新模板上的​ Container ​组件策略。
• 将策略设置为​ XF根。
• 在下，允许的组件 ​选择组件组​ 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 。
• 将​ Navigation ​组件的布局修改为​ 8 ​列宽。 从右到左拖动手柄。

删除​ 语言导航 ​组件。

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

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

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

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

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

• 将​ WKND Light Logo ​的布局修改为​ 两 ​列宽。 从右到左拖动手柄。
• 使用​ 替换文本 ​的“WKND徽标指示灯”配置徽标。
• 将徽标配置为​ 链接 ​到/content/wknd/us/en主页。

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

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

导航到http://localhost:4502/sites.html/content/wknd/us/en/magazine上的站点控制台。

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

• 选择​ 文章页面 ​模板。
• 在​ 属性 ​下，将​ 标题 ​设置为“LA滑板公园终极指南”
• 将​ Name ​设置为“指南 — 滑板场”

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

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

添加另一个​ Text ​组件。

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

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

将​ Download ​组件配置为使用文章的PDF版本。

• 在​ 下载 > 属性 ​下，单击此复选框可​ 从DAM资产中获取标题。
• 将​ Description ​设置为：“获取完整故事”。
• 将​ 操作文本 ​设置为：“下载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。

另请注意指向wknd/components/page的sling:resourceType值。 这是由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的页面组件继承核心组件页面组件的​ all ​功能。 这是称为代理组件模式的第一个示例。 可在此处找到更多信息。

Inspect WKND组件中的另一个组件，即Breadcrumb组件，来自： /apps/wknd/components/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的明确目的是要通过实施项目来覆盖。

通过阅读本文🔗，您可以了解有关可编辑模板如何影响内容页面渲染的更多信息。

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中选择​ 策略 ​文件夹。

从ui.content/src/main/content/META-INF/vault/filter.xmlInspectfilter.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以了解每个模块管理的不同节点。