如何在AEM CQ对话框中为核心组件添加CLASS属性文本字段

不需要重写Java后端逻辑，核心组件默认支持直接读取自定义JCR属性，按以下步骤操作即可：

1. 编写组件对话框字段配置 #

不要使用class作为属性名（属于Java/JCR保留关键字，部分AEM版本存值会出现异常），改用cssClass作为属性名，在组件的.content.xml对话框配置里添加如下字段：

<cssClass
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldDescription="要应用到组件的HTML CLASS属性，多个类名用空格分隔"
    fieldLabel="CSS 类名"
    name="./cssClass"/>

配置完成后对话框就会出现对应的文本输入框，和之前添加的ID字段交互逻辑一致。

2. 在HTL模板中输出属性值 #

之前配置字段后不生效，本质是只完成了值的存储逻辑，没有在组件渲染时把值输出到HTML标签的class属性上。这一步完全不需要写Java代码，用HTL内置的properties全局对象就能直接读取存在JCR节点上的自定义属性值。

如果是用代理组件继承核心组件，只需要在自定义组件目录下创建对应HTL文件，复用核心组件原有渲染逻辑的同时，把自定义类名追加到外层标签即可，以Image组件为例：

<div data-sly-use.image="com.adobe.cq.wcm.core.components.models.Image"
     id="${image.id}"
     class="cmp-image ${properties.cssClass @ context='attribute'}">
    <!-- 直接引入核心组件原有渲染内容，不需要重写全部组件逻辑 -->
    <sly data-sly-include="/apps/core/wcm/components/image/v3/image/image.html"></sly>
</div>

注意：输出属性值时必须加@ context='attribute'，会自动做XSS转义，避免恶意代码注入风险。

常见疑问说明 #

• 为什么ID可以直接用${image.id}获取？
  核心组件的Sling Model专门为ID字段做了封装（支持自动生成唯一ID、对接营销追踪参数等扩展能力），所以可以通过Model对象直接调用。普通自定义属性不需要这层封装，直接通过properties对象读取即可，不需要额外写Java逻辑。你翻Image接口没找到ID关联逻辑也很正常，ID的基础封装是在所有核心组件共用的顶层接口里实现的。
• 支持多个类名输入吗？
  直接在文本框中输入空格分隔的多个类名即可，输出后浏览器会正常识别多个class。如果需要更友好的输入交互（比如类名自动补全、标签化输入），可以把textfield组件替换为Granite UI的tags选择组件，不影响后续属性读取逻辑。

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