页面和模板

在本章中,我们将探讨基本页面组件与可编辑模板之间的关系。 我们将基于AdobeXD中的某些模型构建未设置样式的文章模板。 在构建模板过程中,将介绍可编辑模板的核心组件和高级策略配置。

前提条件

查看设置本地开发环境所需的工具和说明。

入门项目

注意

如果您成功完成了上一章,则可以重复使用该项目并跳过签出起始项目的步骤。

查看本教程构建的基行代码:

  1. 查看GitHub中的tutorial/pages-templates-start分支

    $ cd ~/code/aem-guides-wknd
    $ git checkout tutorial/pages-templates-start
    
  2. 使用您的Maven技能将代码库部署到本地AEM实例:

    $ mvn clean install -PautoInstallSinglePackage
    
    注意

    如果使用AEM 6.5或6.4,请将classic配置文件附加到任何Maven命令。

    $ mvn clean install -PautoInstallSinglePackage -Pclassic
    

您始终可以在GitHub上查看完成的代码,或通过切换到分支tutorial/pages-templates-solution在本地签出代码。

目标

  1. Inspect在Adobe XD中创建的页面设计,并将其映射到核心组件。
  2. 了解可编辑模板的详细信息以及如何使用策略来强制对页面内容进行精细控制。
  3. 了解模板和页面的关联方式

将构建的内容

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

文章页面设计和未设置样式的版本

使用Adobe XD规划UI

在大多数情况下,首先会规划新网站的模型和静态设计。 Adobe XD是构建用户体验的设计工具。接下来,我们将检查UI工具包和模型,以帮助规划文章页面模板的结构。

下载WKND 文章设计文件

创建文章页面模板

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

可编辑模板的3个主要区域:

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

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

以下视频的高级步骤:

结构配置

  1. 使用名为​Article Page​的​页面模板类型​创建新模板。
  2. 切换到​结构​模式。
  3. 添加​体验片段​组件,以在模板顶部充当​标题
    • 将组件配置为指向/content/experience-fragments/wknd/us/en/site/header/master
    • 将策略设置为​Page Header,并确保将​Default Element​设置为header。 在下一章中,header元素将与CSS一起定位。
  4. 添加​体验片段​组件,以在模板底部充当​页脚
    • 将组件配置为指向/content/experience-fragments/wknd/us/en/site/footer/master
    • 将策略设置为​页脚,并确保将​默认元素​设置为footer。 在下一章中,footer元素将与CSS一起定位。
  5. 锁定最初创建模板时包含的​main​容器。
    • 将策略设置为​Page Main,并确保将​Default Element​设置为main。 在下一章中,main元素将与CSS一起定位。
  6. 将​Image​组件添加到​main​容器中。
    • 解锁​Image​组件。
  7. 在主容器中​Image​组件下添加​Breadcrumb​组件。
    • 为名为​文章页 — 痕迹导航​的​痕迹导航​组件创建新策略。 将​导航开始级别​设置为​4
  8. 在​Breadcrumb​组件下方和​main​容器内添加​容器​组件。 这将用作模板的​内容容器
    • 解锁​Content​容器。
    • 将策略设置为​Page Content
  9. 在​内容容器​下添加另一个​容器​组件。 这将用作模板的​侧边栏​容器。
    • 解锁​侧边栏​容器。
    • 创建名为​Article Page - Side Rail​的新策略。
    • 将​允许的组件​配置在​WKND Sites Project - Content​下,以包含:按钮下载图像列表分隔符社交媒体共享文本​和​标题/>。
  10. 更新页面根容器的策略。 这是模板上最外部的容器。 将策略设置为​页面根
    • 在​容器设置​下,将​布局​设置为​响应式网格
  11. 使用​内容容器​的布局模式。 从右向左拖动手柄,将容器缩小为8列宽。
  12. 使用​侧边栏容器​的布局模式。 从右向左拖动手柄,将容器缩小为4列宽。 然后,从左到右拖动左手柄1列,使容器3列变宽,并在​内容容器​之间留1列间隙。
  13. 打开移动模拟器并切换到移动断点。 再次使用布局模式,并使​内容容器​和​侧边栏容器​具有页面的全宽。 这会在移动断点中垂直堆叠容器。
  14. 更新​内容容器​中​Text​组件的策略。
    • 将策略设置为​内容文本
    • 在​Plugins > 段落样式​下,选中​启用段落样式,并确保已启用​引号块

初始内容配置

  1. 切换到​初始内容​模式。
  2. 将​标题​组件添加到​内容容器​中。 这将用作文章标题。 当留空时,将自动显示当前页面的标题。
  3. 在第一个标题组件下方添加第二个​标题​组件。
    • 使用文本配置组件:“作者”。 这将是一个文本占位符。
    • 将类型设置为H4
  4. 在​By Author​标题组件下方添加​Text​组件。
  5. 将​标题​组件添加到​侧边栏容器​中。
    • 使用文本配置组件:“分享此故事”。
    • 将类型设置为H5
  6. 在​共享此文章​标题组件下方添加​社交媒体共享​组件。
  7. 在​社交媒体共享​组件下方添加​分隔符​组件。
  8. 在​Separator​组件下添加​Download​组件。
  9. 在​Download​组件下添加​List​组件。
  10. 更新模板的​初始页面属性
    • 在​社交媒体 > 社交媒体共享​下,检查​Facebook​和​Pinterest

启用模板并添加缩略图

  1. 在“模板”控制台中,通过导航到http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd查看模板

  2. ​启用“文章页面”模板。

  3. 编辑文章页面模板的属性并上传以下缩略图,以快速识别使用文章页面模板创建的页面:

    文章页面模板缩略图

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

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

AEM项目原型生成了页眉和页脚。 接下来,更新体验片段以匹配模型。 按照以下视频中的步骤操作:

以下视频的高级步骤:

  1. 下载示例内容包​WKND-PagesTemplates-Content-Assets.zip
  2. 使用位于http://localhost:4502/crx/packmgr/index.jsp的包管理器上载并安装内容包
  3. 更新Web变体模板,该模板是用于http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html上的体验片段的模板
    • 更新模板上的​Container​组件的策略。
    • 将策略设置为​XF根
    • 在​允许的组件​下,选择组件组​WKND站点项目 — 结构​以包含​语言导航导航​和​快速搜索​组件。

更新标题体验片段

  1. 打开在http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/header/master.html处呈现标题的体验片段
  2. 配置片段的根​容器。 这是最外部的​容器
    • 将​布局​设置为​响应式网格
  3. 将​WKND Dark Logo​作为图像添加到​Container​顶部。 徽标包含在上一步骤中安装的包中。
    • 将​WKND Dark Logo​的布局修改为​2​列宽。 从右向左拖动手柄。
    • 使用“WKND徽标”的​替换文本​配置徽标。
    • 将徽标配置为主页上的​链接​到/content/wknd/us/en
  4. 配置已放置在页面上的​Navigation​组件。
    • 将​排除根级别​设置为​1
    • 将​导航结构深度​设置为​1
    • 将​导航​组件的布局修改为​8​列宽。 从右向左拖动手柄。
  5. 删除​语言导航​组件。
  6. 将​Search​组件的布局修改为​2​列宽。 从右向左拖动手柄。 现在,所有组件应在一行上水平对齐。

更新页脚体验片段

  1. 打开在http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html处呈现页脚的体验片段
  2. 配置片段的根​容器。 这是最外部的​容器
    • 将​布局​设置为​响应式网格
  3. 将​WKND Light徽标​作为图像添加到​Container​顶部。 徽标包含在上一步骤中安装的包中。
    • 将​WKND Light徽标​的布局修改为​2​列宽。 从右向左拖动手柄。
    • 使用“WKND Logo Light”的​替换文本​配置徽标。
    • 将徽标配置为主页上的​链接​到/content/wknd/us/en
  4. 在徽标下方添加​Navigation​组件。 配置​Navigation​组件:
    • 将​排除根级别​设置为​1
    • 取消选中​收集所有子页面
    • 将​导航结构深度​设置为​1
    • 将​导航​组件的布局修改为​8​列宽。 从右向左拖动手柄。

创建文章页面

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

以下视频的高级步骤:

  1. 导航到位于http://localhost:4502/sites.html/content/wknd/us/en/magazine的站点控制台。
  2. 在​WKND > US > EN > Magazine​下创建新页面。
    • 选择​文章页面​模板。
    • 在​Properties​下,将​Title​设置为“LA滑板场终极指南”
    • 将​Name​设置为“guide-la-skateparks”
  3. 将​By Author​标题替换为文本“By Stacey Roswells”。
  4. 更新​Text​组件以包含用于填充文章的段落。 您可以使用以下文本文件作为副本:la-skate-parks-copy.txt
  5. 添加另一个​Text​组件。
    • 更新组件以包含报价:“没有比洛杉矶更好的地方可以粉碎。”
    • 以全屏模式编辑富文本编辑器,并修改上述引号以使用​引用块​元素。
  6. 继续填充文章正文以匹配模型。
  7. 配置​Download​组件以使用文章的PDF版本。
    • 在​Download > Properties​下,单击复选框以​从DAM资产​获取标题。
    • 将​Description​设置为:“获取完整的故事”。
    • 将​Action Text​设置为:“下载PDF”。
  8. 配置​List​组件。
    • 在​列表设置 > 使用​构建列表下,选择​子页面
    • 将​父页面​设置为/content/wknd/us/en/magazine
    • 在​项目设置​下,选中​链接项目,然后选中​显示日期

Inspect节点结构

此时,文章页面显然未设置样式。 但是,基本结构已经到位。 接下来,检查文章页面的节点结构,以更好地了解模板、页面和组件的角色。

在本地AEM实例上使用CRXDE-Lite工具来查看基础节点结构。

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

  2. 单击la-skateparks页面下方的jcr:content节点,并查看属性:

    JCR内容属性

    请注意cq:template的值,该值指向我们之前创建的文章页面模板/conf/wknd/settings/wcm/templates/article-page

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

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

    JCR内容LA滑板场

    您应该能够将每个节点松散地映射到创作的组件。 查看您是否可以通过检查前缀为container的节点来标识不同的布局容器。

  4. 接下来,在/apps/wknd/components/page检查页面组件。 在CRXDE Lite中查看组件属性:

    页面组件属性

    请注意,页面组件下只有2个HTL脚本,即customfooterlibs.htmlcustomheaderlibs.html那么,此组件如何渲染页面?

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

  5. Inspect WKND组件中的另一个组件Breadcrumb组件位于:/apps/wknd/components/breadcrumb。 请注意,可以找到相同的sling:resourceSuperType属性,但此时它指向core/wcm/components/breadcrumb/v2/breadcrumb。 这是使用代理组件模式包含核心组件的另一个示例。 事实上,WKND代码库中的所有组件都是AEM核心组件的代理(我们著名的HelloWorld组件除外)。 在​编写自定义代码之前,最好尝试并尽可能多地重复使用核心组件的功能。

  6. 接下来,使用CRXDE Lite在/libs/core/wcm/components/page/v2/page检查核心组件页面:

    注意

    在AEM 6.5/6.4中,核心组件位于/apps/core/wcm/components下。 在AEM as aCloud Service中,核心组件位于/libs下,并会自动更新。

    核心组件页面

    请注意,此页面下方包含更多脚本。 核心组件页面包含许多功能。 此功能已划分为多个脚本,以便于维护和可读。 您可以通过打开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.htmlcustomheaderlibs.html)的明确目的是通过实施项目来覆盖脚本。

    您可以阅读本文🔗,进一步了解可编辑模板如何将因素引入到内容页面的渲染中。

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

将配置保存到源控件

在很多情况下,特别是在AEM项目开始时,将配置(如模板和相关内容策略)保留到源控制中非常有价值。 这可确保所有开发人员针对同一组内容和配置开展工作,并可确保各环境之间具有额外的一致性。 一旦项目达到一定的成熟度,管理模板的做法就可以交给一组特定的高级用户。

目前,我们将像对待其他代码一样对待模板,并将​文章页面模板​向下同步作为项目的一部分。 到目前为止,我们的AEM项目中还有​pushed​代码,这些代码会从我们的项目推送到AEM的本地实例。 文章页面模板​直接在AEM的本地实例上创建,因此我们需要将​导入​模板到我们的AEM项目中。 出于此特定目的,ui.content​模块包含在AEM项目中。

接下来的几个步骤将使用VSCode IDE使用VSCode AEM Sync插件进行,但可能是使用您配置为​import​的任何IDE执行,或从AEM的本地实例导入内容。

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

  2. 在项目资源管理器中展开​ui.content​模块。 展开src文件夹,然后导航到/conf/wknd/settings/wcm/templates

  3. 右键+单 击文 templates 件夹,然后选 择从AEM Server导入:

    VSCode导入模板

    应导入article-page,并更新page-contentxf-web-variation模板。

    更新了模板

  4. 重复这些步骤以导入内容,但选择位于/conf/wknd/settings/wcm/policies的​policys​文件夹。

    VSCode导入策略

  5. Inspect位于ui.content/src/main/content/META-INF/vault/filter.xmlfilter.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.xmlui.apps/src/main/content/META-INF/vault/filter.xml以了解每个模块管理的不同节点。

    警告

    为确保WKND引用站点的一致部署,已设置项目的某些分支,这样ui.content将覆盖JCR中的任何更改。 这是特意设计的,即解决方案分支,因为将为特定策略编写代码/样式。

恭喜!

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

后续步骤

此时,文章页面显然未设置样式。 请按照客户端库和前端工作流教程,了解包含CSS和Javascript以将全局样式应用到站点并集成专用的前端内部版本的最佳实践。

GitHub上查看完成的代码,或在Git浏览器tutorial/pages-templates-solution上的本地查看并部署代码。

  1. 克隆github.com/adobe/aem-wknd-guides存储库。
  2. 查看tutorial/pages-templates-solution分支。

在此页面上