如何使用Macro表达式添加CSS类？下拉CSS类配置不显示问题

按以下步骤排查修复，即可正常渲染下拉配置的CSS类名：

• 修正宏调用语法
  你当前代码里写的{% AlertCssBackground %}属于宏逻辑块调用语法，这类语法默认用于执行判断、循环等逻辑操作，不会直接输出字段存储的文本值。要输出下拉选项保存的类名，需要替换为变量输出语法：

  <div class="alert {{ AlertCssBackground }}">
    <div></div>
  </div>
  

  注意：如果使用的是带自动转义规则的Macro引擎（比如Twig、Kentico K#宏），需要给输出添加不转义标记，避免类名被转义为HTML实体导致失效，写法参考：{{ AlertCssBackground | raw }}。

• 核对下拉字段配置
  创建完下拉类型字段后，要确认两个关键配置无误：
  1. 下拉选项的存储值必须是完整CSS类名，不要用数字ID、索引作为存储值。正确配置示例为「存储值：alert-danger，显示文本：红色警示背景」，错误配置为「存储值：2，显示文本：红色警示背景」。
  2. 确认transformation界面绑定的数据源和字段挂载对象匹配：如果字段是创建在对应内容类型下的，要保证当前转换模板的数据源就是该内容类型，跨数据源引用会直接读取不到字段值，返回空内容。
• 校验渲染结果
  修改完配置后清空系统缓存，打开前台页面查看源代码，定位到对应div的class属性做最终验证：
  • 如果alert后内容为空：说明字段值未成功读取，回头检查字段作用域、宏调用语法是否正确
  • 如果出现"这类转义字符：说明输出被自动转义，添加不转义过滤器即可
  • 如果类名正常输出但样式未生效：检查对应CSS类的选择器优先级，确认是否被其他更高优先级的样式覆盖，这类问题和Macro配置无关

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