AEM 6.3 HTL变量用法

我对AEM真的很陌生，而且我正在努力使用按钮组件 . 它有一个下拉要求打开类型，所以无论是新窗口还是模态 . 理想的是获取target =“_ blank”或数据模式作为渲染的一部分 .

这是我的对话框：

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Button"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
        margin="{Boolean}false">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <label
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Button label"
                        name="./label"/>
                    <linkTo
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                        fieldLabel="Link to"
                        name="./linkTo"
                        rootPath="/content"
                        suffix=".html"/>
                    <cssClass
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Css class(es)"
                        name="./cssClass"/>
                    <open
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/select"
                        fieldLabel="Open options"
                        fieldDescription="A new tab/window, or a modal"
                        name="./open">
                        <items jcr:primaryType="nt:unstructured">
                            <def
                                jcr:primaryType="nt:unstructured"
                                text="(default)"
                                value=""/>
                            <tab
                                jcr:primaryType="nt:unstructured"
                                text="New Tab/Window"
                                value="target='_blank'"/>
                            <modal
                                jcr:primaryType="nt:unstructured"
                                text="Modal Window"
                                value="data-xxx"/>

                        </items>
                    </open>
                    <secondary
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                        checked="${not empty cqDesign.useSecondary ? cqDesign.useSecondary : false}"
                        fieldDescription="Use the secondary style for the button."
                        name="./useSecondary"
                        text="Use secondary style"
                        uncheckedValue="false"
                        value="{Boolean}true"/>                  
                </items>
            </column>
        </items>
    </content>
</jcr:root>

这是我的button.java

package apps.bbcom_aem_project.components.content.button;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import org.apache.commons.lang3.StringUtils;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ValueMap;

import com.adobe.cq.sightly.WCMUsePojo;

public class Button extends WCMUsePojo {

    public static final Logger log = LoggerFactory.getLogger(Button.class);

    public static final String PROP_LINK_TO = "linkTo";
    public static final String PROP_LABEL = "label";
    public static final String CSS_CLASS = "cssClass";
    public static final String OPEN = "open";

    private String linkTo;
    private String label;
    private String cssClass;
    private String open;
    

    @Override
    public void activate() throws Exception {
        Resource resource = getResource();
        ValueMap properties = getProperties();
        linkTo = properties.get(PROP_LINK_TO, "#");
        label = properties.get(PROP_LABEL, "");
        cssClass = properties.get(CSS_CLASS, "");
        open = properties.get(OPEN, "");
        if (StringUtils.isNotEmpty(linkTo) && !"#".equals(linkTo)) {
            // is linkTO does not starts with http 
            if( !linkTo.startsWith("http") ) {
              linkTo = linkTo + ".html";
            }
        }
        log.debug("resource: {}", resource.getPath());
        log.debug("linkTo: {}", linkTo);
        log.debug("label: {}", label);
    }

    public String getLinkTo() {
        return linkTo;
    }
    
    public String getLabel() {
        return label;
    }

    public String getCssClass() {
        return cssClass;
    }
  
    public String getOpen() {
        return open;
    }  
  
}

此时我没有错误，并且maven clean install没有错误 .

这是我目前的button.html

<div data-sly-test="${wcmmode.edit || wcmmode.design}"><small class="text-muted"><em>Button Component - Configure</em></small></div>
    
<a data-sly-use.button="Button" data-sly-test="${button.label != ''}" class="btn ${properties.useSecondary ? 'btn-secondary' : 'btn-primary'} ${button.cssClass}" href="${button.linkTo}" role="button" data-opentype="${button.open}" ${button.open} >${button.label} ${button.open}</a>

当我检查元素时，我看到了这个：

<a class="btn btn-secondary " href="#" role="button" data-opentype="data-xxx" ${button.open}="">Workspaces data-xxx</a>

data-xxx 与我在组件选项中选择的内容相匹配，但我无法在开始标记中进行渲染 .