根据对话框使组件可链接或不可链接
Make a component linkable or not based on the dialog
我有一个组件，想在对话框中为作者提供添加 link 路径的选项。如果填写这个 link 路径，那么我希望组件包装器是一个 <a> 标签。如果没有填写，我希望它保持 <div>
<div class="section" data-sly-test="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
有没有比使用 data-sly-test 开关为整个组件创建两个单独的构建更简洁的方法？我在很多这样的例子中苦苦挣扎，其中包装 tag/div 被对话框改变了。在我的代码中寻找类似于 data-sly-element 在 <h2> 上的行为方式的东西。
有多种方法可以实现您的目标。
使用 data-sly-element 和 data-sly-attribute
如果属性值为 empty/null，data-sly-attribute 不会将属性添加到标签。因此，如果路径不可用，它可以如下所示使用 div 替换锚标记。
<a class="section" data-sly-attribute.href="${properties.path}" data-sly-element="${properties.path ? 'a' : 'div'}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
使用data-sly-unwrap
Unwrap 仅删除包含标签，不会删除所有内部标签。因此，可以如下所示使用它。
<div class="section" data-sly-unwrap="${properties.path}">
<a href="${properties.path}" class="section" data-sly-unwrap="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
</div>
使用 data-sly-template 和 data-sly-call
这与您最初编写的内容类似，但不是复制整个内部 HTML，而是可以将其移至模板并调用两次。
<div class="section" data-sly-test="${!properties.path}">
<sly data-sly-call="${tpl}"></sly>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<sly data-sly-call="${tpl}"></sly>
</a>
<!--/* The template */-->
<template data-sly-template.tpl="">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</template>
有关 HTL 块语句的详细信息，请参阅 this official doc。
我有一个组件，想在对话框中为作者提供添加 link 路径的选项。如果填写这个 link 路径，那么我希望组件包装器是一个 <a> 标签。如果没有填写，我希望它保持 <div>
<div class="section" data-sly-test="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
有没有比使用 data-sly-test 开关为整个组件创建两个单独的构建更简洁的方法？我在很多这样的例子中苦苦挣扎，其中包装 tag/div 被对话框改变了。在我的代码中寻找类似于 data-sly-element 在 <h2> 上的行为方式的东西。
有多种方法可以实现您的目标。
使用 data-sly-element 和 data-sly-attribute
如果属性值为 empty/null，data-sly-attribute 不会将属性添加到标签。因此，如果路径不可用，它可以如下所示使用 div 替换锚标记。
<a class="section" data-sly-attribute.href="${properties.path}" data-sly-element="${properties.path ? 'a' : 'div'}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
使用data-sly-unwrap
Unwrap 仅删除包含标签，不会删除所有内部标签。因此，可以如下所示使用它。
<div class="section" data-sly-unwrap="${properties.path}">
<a href="${properties.path}" class="section" data-sly-unwrap="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
</div>
使用 data-sly-template 和 data-sly-call
这与您最初编写的内容类似，但不是复制整个内部 HTML，而是可以将其移至模板并调用两次。
<div class="section" data-sly-test="${!properties.path}">
<sly data-sly-call="${tpl}"></sly>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<sly data-sly-call="${tpl}"></sly>
</a>
<!--/* The template */-->
<template data-sly-template.tpl="">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</template>
有关 HTL 块语句的详细信息，请参阅 this official doc。