呈现网页中的组件后,可以生成一个 HTML 元素,以将呈现的组件封装在其中。这主要有两个目的:
仅当组件使用HTML元素封装时,才能对其进行编辑。
包装元素用于应用提供以下功能的HTML类:
对于开发人员而言,AEM 可提供清晰而简单的逻辑来控制用于封装所包含组件的修饰标记。是否以及如何呈现修饰标记取决于两个因素的组合,本页将深入探讨这两个因素:
以下是有关何时包含包装器元素的一些一般建议,这些建议应有助于避免遇到意外问题:
可以将以下属性和节点应用于组件以控制其修饰标记的行为:
cq:noDecoration {boolean}
: 此属性可以添加到组件中,true值会强制AEM不在该组件上生成任何包装器元素。
cq:htmlTag
节点: 此节点可以添加到组件下,并且可以具有以下属性:
cq:tagName {String}
: 这可用于指定用于封装组件的自定义HTML标记,而不是默认的DIV元素。class {String}
: 这可用于指定要添加到包装器的css类名称。包装器行为有所不同,但具体取决于 HTL 或 JSP 用于包含元素。
通常,HTL中的包装器行为可概括如下:
data-sly-resource="foo"
)。也可以完全控制包装器的行为。
cq:noDecoration
和 cq:tagName
)也可以定义包装器标记。可以从HTL脚本及其相关逻辑完全控制包装器标记的行为。
有关在HTL中进行开发的更多信息,请参阅 HTL文档.
此决策树汇总了确定包装器标记行为的逻辑。
以下三个用例提供了如何处理包装器标记的示例,并说明了控制包装器标记的所需行为是多么简单。
以下所有示例都假设以下内容结构和组件:
/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"
最典型的用例是当组件出于代码重用原因包含另一个组件时。 在这种情况下,包含的组件不需要通过自身的工具栏和对话框进行编辑,因此无需包装器,而且组件的 cq:htmlTag
将被忽略。 可将此视为默认行为。
one.html: <sly data-sly-resource="child"></sly>
two.html: Hello World!
结果输出于 /content/test.html
:
Hello World!
例如,组件中包含用于显示图像的核心图像组件,通常情况下使用合成资源显示图像,其中包括通过向data-sly-resource传递表示组件将具有的所有属性的Map对象来包含虚拟子组件。
另一个常见用例是当容器组件包含可编辑的子组件(如布局容器)时。 在这种情况下,每个包含的子级都迫切需要一个包装器才能让编辑器工作(除非使用 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>
复杂情况可以不限数量,利用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>
当使用包含组件时 cq:includ
或 sling:include
,AEM中的默认行为是使用DIV来封装元素。 但是,可以通过两种方式自定义此包装:
cq:noDecoration
.cq:htmlTag
/ cq:tagName
或 decorationTagName
.以下决策树说明了如何执行以下操作 cq:noDecoration
, cq:htmlTag
, cq:tagName
、和 decorationTagName
会影响包装器行为。