填充html标签，如来自AEM对话框

Question

我试图允许作者根据对话框中带有选项“h1，h2，h3，h4”的下拉列表来更改标记中的标题大小。如果未选择任何一个，则默认为h2。

我正在尝试使用三元代码，就像动态类或内容一样，但是当我这样做时，它只是在页面上输出代码。以下结果应该是<h2> Heading </h2>或用对话框选择替换h2

<${properties.headingSize ? properties.headingSize : 'h2'}>
    ${properties.heading}
</${properties.headingSize ? properties.headingSize : 'h2'}>

Inspect Element中此代码的结果是

<${properties.headingSize ? properties.headingSize :="h2" }>Heading <!--${properties.headingSize-->

这不是推荐的完成动态标记的方法吗？或者有没有办法让三元组正常工作？

Answer 1

解决问题的推荐方法是使用data-sly-element语句替换元素名称。示例用法如下所示。

<h2 data-sly-element="${properties.headingSize || 'h2'}">${properties.heading}</h2>

有关data-sly-element可接受值的更多信息以及可在HTL中使用的可用块语句，请参阅this official documentation

填充html标签，如 来自AEM对话框