在button-card中正确使用条件语句的技巧

button-card是Home Assistant中一款强大的自定义卡片，它允许用户创建高度定制化的按钮界面。然而，许多用户在尝试使用条件语句时遇到了困难，特别是当需要在卡片配置中根据实体状态动态改变样式或行为时。

条件语句的两种语法

在button-card配置中使用条件语句时，有两种主要语法可供选择：

1. Jinja2模板语法：这是Home Assistant中常用的模板语法，使用{% if %}和{% else %}结构
2. JavaScript语法：使用[[[ ]]]包裹的JavaScript代码块

常见问题分析

许多用户尝试在button-card中使用Jinja2模板语法来实现条件逻辑，但发现无法正常工作。这是因为button-card对这两种语法的支持有所不同：

• 在styles部分的属性值中，必须使用JavaScript语法
• 在service_data等部分，两种语法都可以使用，但JavaScript语法通常更可靠

解决方案示例

以下是一个正确使用条件语句的button-card配置示例，实现了根据input_boolean状态切换图标和场景的功能：

type: custom:button-card
name: " "
show_name: true
show_icon: false
aspect_ratio: 3/2
style:
  top: 15%
  left: 9%
  width: 10%
styles:
  card:
    - background: rgba(255, 255, 255, 0.1)
    - color: "#D1F2EB"
    - background-image: |
        [[[
          if (states['input_boolean.escena_todas_las_luces_exteriores'].state == 'on')
            return "url('/local/plano/light_on.png')";
          else
            return "url('/local/plano/light_off.png')";
        ]]]
    - background-size: 120%
    - background-repeat: no-repeat
    - background-position: center
  icon:
    - color: "#48C9B0"
tap_action:
  action: call-service
  service: scene.turn_on
  service_data:
    entity_id: >
      [[[ if
      (states['input_boolean.escena_todas_las_luces_exteriores'].state ==
      'on')
        return "scene.todas_las_luces_exteriores_apagar";
      else
        return "scene.todas_las_luces";
      ]]]

最佳实践建议

1. 样式部分：在styles下的属性值中，始终使用JavaScript语法（[[[ ]]]）
2. 服务数据：在service_data等部分，两种语法都可以使用，但JavaScript语法通常更可靠
3. 状态检查：使用states['entity_id'].state来获取实体状态
4. 代码格式化：保持条件语句的良好缩进，便于阅读和维护
5. 测试验证：在实现复杂逻辑前，先用简单条件测试语法是否正确解析

通过正确理解和使用button-card中的条件语句语法，用户可以创建出更加动态和智能的界面元素，大大提升Home Assistant的使用体验。