页面模板——静态

模板用于创建页面并定义可在所选范围内使用的组件。 模板是节点的层次结构,其结构与要创建的页面相同,但没有任何实际内容。

每个模板都会为您提供一系列可用组件。

  • 模板由组件构建;
  • 组件使用和允许访问构件,这些构件用于呈现内容。
注意

可编 辑模板也可用,并且是推荐的模板类型,以获得最大的灵活性和最新功能。

模板的属性和子节点

模板是cq:Template类型的节点,具有以下属性和子节点:

名称
类型
描述
.
cq:Template 当前模板。 模板的节点类型为cq:Template。
allowedChildren String[] 允许作为此模板子项的模板的路径。
allowedParents String[] 允许作为此模板父项的模板的路径。
allowedPaths String[] 允许基于此模板的页面的路径。
jcr:created 日期 模板的创建日期。
jcr:description 字符串 模板的说明。
jcr:title 字符串 模板的标题。
排名 长整型 模板的排名。 用于在用户界面中显示模板。
jcr:content cq:PageContent 包含模板内容的节点。
thumbnail.png nt:文件 模板的缩略图。
icon.png nt:文件 模板的图标。

模板是页面的基础。

要创建页面,必须将模板(node-tree /apps/<myapp>/template/<mytemplate>)复制到site-tree中的相应位置:这是使用​网站​选项卡创建页面时会发生的情况。

此复制操作还为页面提供其初始内容(通常仅限顶级内容)和属性sling:resourceType,用于呈现页面的页面组件的路径(子节点jcr:content中的所有内容)。

模板的结构方式

需要考虑两个方面:

  • 模板本身的结构
  • 使用模板时生成的内容的结构

模板的结构

在类型​cq:Template​的节点下创建模板。

screen_shot_2012-02-13at63646pm

可以设置各种属性,特别是:

  • jcr:title -模板的标题;创建页面时显示在对话框中。
  • jcr:description -模板的描述;创建页面时显示在对话框中。

此节点包含一个jcr:content(cq:PageContent)节点,该节点用作生成页面的内容节点的基础;此引用使用sling:resourceType,即用于呈现新页面实际内容的组件。

screen_shot_2012-02-13at64010pm

此组件用于定义创建新页面时内容的结构和设计。

screen_shot_2012-02-13at64137pm

模板生成的内容

模板用于创建类型为cq:Page的页面(如前所述,页面是特殊类型的组件)。 每个AEM页面都有一个结构化节点jcr:content。 此功能:

  • 属于cq:PageContent类型
  • 是包含已定义内容定义的结构化节点类型
  • 具有属性sling:resourceType以引用包含sling脚本的组件,这些脚本用于呈现内容

默认模板

AEM附带许多现成可用的默认模板。 在某些情况下,您可能希望按原样使用模板。 在这种情况下,您需要确保该模板可用于您的网站。

例如,AEM附带多个模板,包括内容页面和主页。

标题 组件 位置 用途
主页 homepage geometrixx Geometrixx 主页模板。
内容页 contentpage geometrixx Geometrixx 内容页模板。

显示默认模板

要查看存储库中所有模板的列表,请按如下步骤继续:

  1. 在 CRXDE Lite 中,打开​工具​菜单,然后单击​查询

  2. 在“查询”选项卡中

  3. 选择 XPath 作为​类型

  4. 在​查询​输入字段中,输入以下字符串:

    //element(&ast;, cq:Template)

  5. 单击​执行。将在结果框中显示列表。

在大多数情况下,您需要使用现有模板并开发一个新模板供自己使用。 有关详细信息,请参阅开发页面模板

要为您的网站启用现有模板,并且希望在从​网站​控制台中的​网站​下创建页面时,该模板显示在​创建页面​对话框中,请将模板节点的allowedPaths属性设置为:/content(/)。&ast;?

如何应用模板设计

当在UI中使用设计模式定义样式时,设计将保留在要为其定义样式的内容节点的正确路径上。

注意

Adobe建议仅通过设计模式应用设计。

例如,在 CRX DE 中修改设计不是最佳实践,并且此类设计的应用程序可能与预期不同。

如果仅使用设计模式应用设计,则以下部分设计路径分辨率决策树示例不适用。

注意

本节介绍AEM 6.4.2.0的设计路径分辨率行为。

设计路径分辨率

当基于静态模板呈现内容时,AEM将尝试基于内容层次结构的遍历将最相关的设计和样式应用于内容。

AEM按以下顺序确定内容节点的最相关样式:

  • 如果内容节点具有完整且精确的路径设计(如在设计模式中定义设计时),则使用该设计。
  • 如果父项的内容节点有设计,则使用该设计。
  • 如果内容节点路径上的任何节点都有设计,则使用该设计。

在最后两种情况下,如果有多个适用的设计,请使用最接近内容节点的设计。

决策树

这是设计路径分辨率逻辑的图形表示。

design_path_resolution

示例

请考虑如下简单的内容结构,其中设计可应用于任何节点:

/root/branch/leaf

下表说明AEM将如何选择设计。

查找针对
设计适用于
选择设计
注释
leaf

root

branch

leaf

leaf 始终采用最精确的匹配。
leaf

root

branch

branch 倒回树下最接近的匹配。
leaf root root 如果所有其他方法都失败,则取剩余的。
branch branch branch
branch

branch

leaf

branch
branch

root

branch

branch
branch

root

leaf

root

如果没有完全匹配,请取树中的下一个。

假定这将始终适用,但树的上端可能过于特定。

开发页面模板

AEM页面模板只是用于创建新页面的模型。 它们可以根据需要包含尽可能少或尽可能多的初始内容,其角色是创建正确的初始节点结构,并将所需的属性(主要是sling:resourceType)设置为允许编辑和渲染。

创建新模板(基于现有模板)

不用说可以完全从头开始创建新模板,但通常会复制并更新现有模板以节省时间和精力。 例如,可以使用Geometrixx中的模板开始操作。

要基于现有模板创建新模板,请执行以下操作:

  1. 将现有模板(最好将定义尽可能接近您想要达到的目标)复制到新节点。

    模板通常存储在​/apps/<website-name>/templates/<template-name>​中。

    注意

    可用模板的列表取决于新页面的位置以及在每个模板中指定的放置限制。 请参阅模板可用性

  2. 更改新模板节点的​jcr:title​以反映其新角色。 如果适用,还可以更新​jcr:description。 请确保根据需要更改页面的模板可用性。

    注意

    如果希望在从​网站​控制台中创建位于​网站​下的页面时在​创建页面​对话框中显示模板,请将模板节点的allowedPaths属性设置为:/content(/.*?lang=zh-Hans)?

    chlimage_1-251

  3. 复制模板所基于的组件(由模板中​jcr:content​节点的​sling:resourceType​属性指示)以创建新实例。

    组件通常存储在​/apps/<website-name>/components/<component-name>​中。

  4. 更新新组件的​jcr:title​和​jcr:description

  5. 如果希望在模板选择列表(大小为128 x 98 px)中显示新的缩览图图片,请替换thumbnail.png。

  6. 更新模板的​jcr:content​节点的​sling:resourceType​以引用新组件。

  7. 对模板和/或其基础组件的功能或设计进行进一步更改。

    注意

    对​**/apps/<website>/templates/<template-name>​节点所做的更改将影响模板实例(如在选择列表中)。
    对​
    /apps/<website>/components/<component-name>**​节点所做的更改将影响在使用模板时创建的内容页面。

    您现在可以使用新模板在网站中创建页面。

注意

编辑器客户端库假定内容页面中存在cq.shared命名空间,如果不存在,则将导致JavaScript错误Uncaught TypeError: Cannot read property 'shared' of undefined
所有示例内容页面都包含cq.shared,因此基于这些页面的任何内容都会自动包含cq.shared。 但是,如果您决定从头开始创建您自己的内容页面而不基于示例内容,则必须确保包含cq.shared命名空间。
有关详细信息,请参阅使用客户端库

使现有模板可用

此示例说明如何允许将模板用于某些内容路径。 创建新页面时页面作者可用的模板由模板可用性中定义的逻辑决定。

  1. 在CRXDE Lite中,导航到要用于页面的模板,例如新闻稿模板。

  2. 更改allowedPaths属性和用于模板可用性的其他属性。 例如,allowedPaths:/content/geometrixx-outdoors/[^/]+(/.*?lang=zh-Hans)?表示允许在/content/geometrixx-outdoors下的任何路径中使用此模板。

    chlimage_1-252

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now