根据对话框使组件可链接或不可链接

Question

我有一个组件，希望在对话框中为作者提供添加链接路径的选项。如果填写了此链接路径，那么我希望组件包装器为<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>

是否有比使用数据狡猾测试开关为整个组件创建两个单独的构件更好的方法呢？我在很多这样的示例中都感到苦恼，其中包装标签/ div被对话框更改。在这里寻找与数据狡猾元素在<h2>上的行为类似的东西。

Answer 1

有多种方法可以实现您想要的目标。

使用data-sly-element和data-sly-attribute

如果属性的值为空/ 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 Block语句的更多信息，请参见this official doc。