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

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 中使用的块语句的更多信息，请参阅此官方文档

从 AEM 对话框填充 html 标签，例如 &lt;h2&gt;