从 AEM 对话框填充 html 标签，如 <h2>

Question

我正在尝试允许作者根据带有选项 "h1, h2, h3, h4" 的对话框中的下拉菜单更改标记中的标题大小。如果选择 none，则默认为 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

Populate a html tag like <h2> from AEM dialog