从AEM对话框中填充<h2>之类的html标签

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