修饰标记

呈现网页中的组件后,可以生成一个 HTML 元素,以将呈现的组件封装在其中。这主要用于两个目的:

  • 组件仅在用HTML元素封装时才能进行编辑。

  • 包装元素用于应用提供以下内容的HTML类:

    • 布局信息
    • 样式信息

对于开发人员而言,AEM 可提供清晰而简单的逻辑来控制用于封装所包含组件的修饰标记。装饰标签的呈现方式和呈现方式由两个因素的组合来定义,本页将深入讨论这两个因素:

  • 组件本身可以使用一组属性配置其装饰标签。
  • 包含组件(HTL、JSP、调度程序等)的脚本可以使用包含参数来定义装饰标签的各个方面。

推荐

以下是一些一般性建议,介绍何时包含包装器元素,这些元素有助于避免遇到意外问题:

  • 包装器元素的存在在WCMModes(编辑或预览模式)、实例(作者或发布)或环境(暂存或生产)之间不应有所不同,因此页面的CSS和JavaScripts在所有情况下都可以相同地工作。
  • 应将包装器元素添加到所有可编辑的组件,以便页面编辑器能够正确初始化和更新它们。
  • 对于不可编辑的组件,如果包装器元素不用于特定的功能,则可以避免包装器元素,因此生成的标记不会毫无必要地膨胀。

组件控件

以下属性和节点可以应用于组件以控制其装饰标签的行为:

  • cq:noDecoration {boolean}: 此属性可以添加到组件,而且,如果值为true,则AEM不得在组件上生成任何包装器元素。
  • cq:htmlTag节点: 此节点可以添加到组件下,并且可以具有以下属性:
    • cq:tagName {String}: 这可用于指定用于封装组件的自定义HTML标签,而不是默认DIV元素。
    • class {String}: 这可用于指定要添加到包装器的css类名称。
    • 其他属性名称将添加为HTML属性,其String值与提供的相同。

脚本控件

但包装器行为确实不同,具体取决于是否使用HTLJSP来包含元素。

HTL

通常,HTL中的包装器行为可以概括如下:

  • 默认情况下(仅执行data-sly-resource="foo"操作时)不呈现包装器DIV。
  • 所有wcm模式(禁用、预览、在创作和发布时编辑)呈现相同。

包装器的行为也可以完全控制。

  • HTL脚本完全控制包装器标签的生成行为。
  • 组件属性(如cq:noDecorationcq:tagName)也可以定义包装器标签。

可以完全控制HTL脚本中的包装器标签及其关联逻辑的行为。

有关在HTL中进行开发的更多信息,请参阅HTL文档

决策树

此决策树汇总确定包装器标签行为的逻辑。

chlimage_1-75

用例

以下三个用例提供了包装器标签的处理方式示例,并说明控制包装器标签的所需行为是多么简单。

下面的所有示例都采用以下内容结构和组件:

/content/test/
  @resourceType = "test/components/one"
  child/
    @resourceType = "test/components/two"
/apps/test/components/
  one/
    one.html
  two/
    two.html
    cq:htmlTag/
      @cq:tagName = "article"
      @class = "component-two"

用例1:包含代码重用组件

最典型的用例是当组件由于代码重用原因而包含另一个组件时。 在这种情况下,不希望包含的组件能够使用其自己的工具栏和对话框进行编辑,因此不需要包装器,将忽略组件的cq:htmlTag。 这可以视为默认行为。

one.html: <sly data-sly-resource="child"></sly>

two.html: Hello World!

/content/test.html上生成输出:

Hello World!

例如,一个组件包含用于显示图像的核心图像组件,通常在这种情况下,它使用合成资源,包括通过向表示组件将具有的所有属性的数据——秘密资源传递一个映射对象来包含虚拟子组件。

用例2:包含可编辑的组件

另一个常见用例是容器组件包括可编辑的子组件(如布局容器)。 在这种情况下,每个包含的子级都必须有一个包装器才能使编辑器正常工作(除非使用cq:noDecoration属性显式禁用)。

由于包含的组件是独立组件,因此它需要一个包装器元素才能使编辑器工作,并定义要应用的布局和样式。 要触发此行为,有decoration=true选项。

one.html: <sly data-sly-resource="${'child' @ decoration=true}"></sly>

two.html: Hello World!

/content/test.html上生成输出:

<article class="component-two">Hello World!</article>

用例3:自定义行为

可能存在任意数量的复杂情况,HTL可以明确提供这些情况,从而很容易实现:

  • decorationTagName='ELEMENT_NAME' 定义包装器的元素名称。
  • cssClassName='CLASS_NAME' 定义要在其上设置的CSS类名称。

one.html: <sly data-sly-resource="${'child' @ decorationTagName='aside', cssClassName='child'}"></sly>

two.html: Hello World!

生成输出/content/test.html:

<aside class="child">Hello World!</aside>

JSP

当包含使用cq:include或sling:include的组件时,AEM中的默认行为是使用DIV来包装元素。 但是,可以通过两种方式自定义此包装:

  • 显式告诉AEM不要使用cq:noDecoration封装组件。
  • 使用自定义HTML标记以使用cq:htmlTag/ cq:tagNamedecorationTagName封装组件。

决策树

以下决策树说明了cq:noDecorationcq:htmlTagcq:tagNamedecorationTagName如何影响包装器行为。

chlimage_1-3

On this page

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