AEM组件中rel属性无法在锚标签中显示的问题求助

问题根源：AEM核心组件的Button模型默认未暴露rel属性，直接绑定${button.rel}会因模型无对应方法失效；同时data-sly-attribute="${button.buttonLink.htmlAttributes}"仅渲染链接相关默认属性，不包含你自定义的rel字段。

以下是三种可行解决方案：

方案1：扩展核心组件Button模型，添加rel属性支持 #

创建自定义Sling Model继承核心组件的Button实现类，暴露rel属性：

package your.project.models;

import com.adobe.cq.wcm.core.components.models.Button;
import com.adobe.cq.wcm.core.components.internal.models.v1.ButtonImpl;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.ValueMapValue;

import static org.apache.sling.models.annotations.DefaultInjectionStrategy.OPTIONAL;

@Model(
    adaptables = Resource.class,
    adapters = Button.class,
    resourceType = "your-project/components/button", // 替换为你的自定义Button组件resourceType
    defaultInjectionStrategy = OPTIONAL
)
public class CustomButtonImpl extends ButtonImpl {

    @ValueMapValue
    private String rel;

    public String getRel() {
        return rel;
    }
}

之后将组件content.xml的resourceType指向自定义组件，模板中保留rel="${button.rel}"即可生效。

方案2：直接从组件资源中读取rel属性（无需扩展模型） #

修改button.html，跳过核心模型直接从当前组件的资源值映射中获取rel：

<button 
    data-sly-use.button="com.adobe.cq.wcm.core.components.models.Button" 
    data-sly-element="${button.buttonLink.valid ? 'a' : 'button'}" 
    type="${button.buttonLink.valid ? '' : 'button'}" 
    id="${button.id}" 
    rel="${properties.rel}" 
    class=""
    data-sly-attribute="${button.buttonLink.htmlAttributes}" 
    aria-label="${button.accessibilityLabel}" 
    data-cmp-clickable="${button.data ? true : false}" 
    data-cmp-data-layer="${button.data.json}">
    <span data-sly-test="${button.text}" class="">${button.text}</span>
</button>

若模板无法直接访问properties，可添加data-sly-use.resource="org.apache.sling.api.resource.Resource"，改用${resource.valueMap.get('rel')}替代${properties.rel}。

方案3：将rel合并到buttonLink的htmlAttributes中 #

通过Sly的对象合并语法，把自定义rel属性加入buttonLink.htmlAttributes，由data-sly-attribute统一渲染：

<button 
    data-sly-use.button="com.adobe.cq.wcm.core.components.models.Button" 
    data-sly-element="${button.buttonLink.valid ? 'a' : 'button'}" 
    type="${button.buttonLink.valid ? '' : 'button'}" 
    id="${button.id}" 
    class=""
    data-sly-attribute="${button.buttonLink.htmlAttributes += (properties.rel ? {'rel': properties.rel} : {})}" 
    aria-label="${button.accessibilityLabel}" 
    data-cmp-clickable="${button.data ? true : false}" 
    data-cmp-data-layer="${button.data.json}">
    <span data-sly-test="${button.text}" class="">${button.text}</span>
</button>

这种方式无需单独写rel属性，会自动将其合并到链接属性中渲染。

内容的提问来源于stack exchange，提问作者ideaguy1974