aem - 从 AEM 对话框填充 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 中使用的 block 语句的更多信息，请参阅 this official documentation