Matrix 首页推荐 

Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。

文章代表作者个人观点，少数派仅对标题和排版略作修改。

开篇

之前我也只是偶尔娱乐性地研究 Home Assistant，但自从搬入新家后，我下定决心要将其融入日常生活。

从 11 月起，我的生活被两大热情所填满：白天里的设计工作，夜晚则是沉浸在智能家居中。这段时间里，我积累了一系列有趣的案例和经验。现在，我希望通过文字与更多热爱折腾的朋友们分享这段探索与实践的旅程，让我们一同在智能化的生活里找到乐趣。 由于，很多案例都是根据我自己的需求来制作的，零零散散，我就先按照最近的开始发，然后在后续更新的文章里再梳理成目录。

在智能家居管理中，一个直观且响应式的用户界面是至关重要的。Home Assistant 作为一个强大的开源家居自动化平台，提供了高度可定制的仪表板。

在本教程中，我们将探究如何利用 Home Assistant 的模板功能，动手升级将原有的仪表盘卡片更新为可实时状态显示动态卡片，实现根据不同的传感器状态动态更改仪表板图标和颜色，以增强用户界面的交互性和直观性。

准备工作

确保你已经安装了 Home Assistant，并且有权限编辑你的 Lovelace UI。本教程还假设你已经安装了 Mushroom 卡片，或者你可以将以下示例应用于任何支持模板的自定义卡片。

Mushroom 卡片的 GitHub 安装教程

https://github.com/piitaya/lovelace-mushroom

案例一：创建一个安全卡片，实现 ICON 和颜色根据燃气报警器状态更新，并显示燃气报警器状态

首先添加一张卡片，如果你已经安装好 Mushroom ，那么往下滑动，你能找到名为「Mushroom Template Card 」的卡片。

点击它，然后进入到卡片配置界面。

这个卡片首页，用于作为分类的导航卡片。这次我配置的是「安全」的分类，点击之后跳转到摄像头、报警器、人在传感器和网关的集成界面。

接下进入配置界面：

图标定制

如果是静态图标，只需要输入图标名字

mdi:shield

那么就会出现一个代表安全的盾牌，但是我们要实现动态图标就需要配置以下字符串：

 {% if is_state('sensor.lumi_mcn02_64ec_status', 'normal') %}
      mdi:shield-check
    {% else %}
      mdi:shield-alert
    {% endif %}

这串代码实现了根据一个特定传感器的状态来决定显示哪个图标。这里使用了 Jinja2 模板中的条件语句。

解析

这段模板代码用于在 Home Assistant 的用户界面上根据传感器的状态动态地改变显示的图标。如果状态是正常的，就显示一个勾选的盾牌图标，表示一切安全；如果状态不正常，就显示一个带有感叹号的盾牌图标，表示需要注意或有潜在的问题。

因为我这设置的是根据小米的天然气报警器状态来实现动态图标的转换的，如果天然气报警器状态正常，则会显示：'normal' ，如果不是，则代表故障或者警报。

{% if is_state('sensor.lumi_mcn02_64ec_status', 'normal') %}检查 sensor.lumi_mcn02_64ec_status 这个传感器的状态是否为 'normal'。

如果状态是 'normal'，那么 {% else %} 之前的 mdi:shield-check将被选中，这意味着将显示一个表示「检查」或「安全」的图标。

如果状态不是 'normal'，则执行 {% else %} 之后的代码，显示 mdi:shield-alert 图标，这个图标通常表示警告或注意。

sensor.lumi_mcn02_64ec_status 可以换成你自己的传感器

图标颜色

同理，如果是静态图标颜色，只需要输入颜色

red

或者如果需要更多颜色可以用十六位进制来实现

#E60013

那么能将图标更改为红色。但是我们要实现动态图标颜色就需要配置以下字符串：

    {{ 'green' if is_state('sensor.lumi_mcn02_64ec_status', 'normal') else 'red' }}

这串代码实现了根据一个特定传感器的状态来决定显示哪个图标颜色。

解析

'green' if is_state('sensor.lumi_mcn02_64ec_status', 'normal') else 'red' 是一个条件表达式。

is_state('sensor.lumi_mcn02_64ec_status', 'normal') 检查传感器 sensor.lumi_mcn02_64ec_status 的状态是否等于 'normal'。

如果是，那么整个表达式的结果是 'green'。如果不是，那么结果是 'red'。

sensor.lumi_mcn02_64ec_status 可以换成你自己的传感器，颜色可以是英文名字或者是十六位进制。

状态显示

光是图标和颜色提示只能知道出现故障了，如果还想一目了然的知道故障原因，那么可以进一步的创建一个状态显示，为了不影响主标题显示，次我们选择次要信息（副标题）进行配置。

输入以下字符串进行配置：

{{ '燃气安全' if is_state('sensor.lumi_mcn02_64ec_status', 'normal') else '燃气泄漏' }}

解析

{{ ... }} 表示这是一个需要被解析的模板。

is_state('sensor.lumi_mcn02_64ec_status', 'normal') 检查传感器 sensor.lumi_mcn02_64ec_status 的状态是否为 'normal'。

如果状态是 'normal'，则显示 '燃气安全'。

如果状态不是 'normal'，则显示 '燃气泄漏'。

最后配置

输入完成其他的字符就可以保存了，如果不需要显示，则可以留白。

• 首要信息：主标题
• 如果需要实现点击跳转其他页面，则需要配置以下选项
• 点击动作：前往
• 导航路径：/lovelace/Safe
• Safe 换成你自己的页面名称

保存完成

好了，点击保存，卡片页面就配置完成了。

案例二：创建一个网络卡片，实现下载网速实时更新

状态显示

我们直接到状态显示这一步，图标和颜色方面，大同小异，大家可以参考一下之前代码：

直接添加路由器的下载速度实体 ID，就可以显示实体的状态信息。

{{ states("sensor.tp_link_smb_tl_r488gpm_ac_download_speed") }}

但是网速小数点后面太多位了，我们需要精简到小数点后一位。

{{ states("sensor.tp_link_smb_tl_r488gpm_ac_download_speed") | float | round(1) }} 

然后前后直接添加名称和单位就完善了。

下载 {{ states("sensor.tp_link_smb_tl_r488gpm_ac_download_speed") | float | round(1) }} KB/s

解析

{{ ... }}：这是 Home Assistant 模板中用来输出表达式结果的标记。

states("sensor.tp_link_smb_tl_r488gpm_ac_download_speed")：这是一个函数调用，用来获取实体 sensor.tp_link_smb_tl_r488gpm_ac_download_speed 的状态值。这通常是一个数字，表示当前的下载速度。

| float：这是一个过滤器，它尝试将前面的状态值转换为浮点数。这是必要的，因为所有从 states 函数获取的状态值都是字符串格式的，即使它们看起来像数字。

| round(1)：这是另一个过滤器，它将浮点数四舍五入到一位小数。这样做可以使显示的下载速度更为简洁，并且对于用户来说更易于阅读。

案例三：创建一个灯光卡片，实现 ICON 和颜色根据灯光状态更新，并显示全无灯光状态

状态显示

我们直接到状态显示这一步，图标和颜色方面，大同小异，大家可以参考一下之前代码。为了实现任意一个灯光实体打开则显示灯光打开（全屋有一个及以上灯光打开），如果所有灯光关闭则显示灯光关闭（全无灯光都关闭）。

{% set lights_on = states.light | selectattr('state', 'equalto', 'on') | list %}
{{ '灯光打开' if lights_on | length > 0 else '灯光关闭' }}

解析

{% set lights_on = states.light | selectattr('state', 'equalto', 'on') | list %} 这行代码创建了一个变量 lights_on，它是一个列表，包含所有状态为 'on' 的灯光实体。

{{ '灯光打开' if lights_on | length > 0 else '灯光关闭' }} 这行代码检查 lights_on 列表的长度是否大于 0。如果是，说明至少有一个灯光处于打开状态，因此返回 '灯光打开'；如果列表长度为 0，说明没有灯光打开，因此返回 '灯光关闭'。

那么接下来我们也可以根据判断逻辑，这个来更新图标定制和图标颜色了。我直接放出代码，大家修改一下即可。

图标定制

 {% set lights_on = states.light | selectattr('state', 'eq', 'on') | list %}
  {{ 'mdi:lightbulb-on' if lights_on | length > 0 else 'mdi:lightbulb-off-outline' }}

图标颜色

{% set lights_on = states.light | selectattr('state', 'eq', 'on') | list %}
  {{ 'yellow' if lights_on | length > 0 else 'grey' }}

结尾

好了，今天的教程就到这里了，其他的卡片大同小异，其实用的最多的就是逻辑判断和获取状态，所以大家多看解析，稍微修改一下就可以用在别的地方，比如：环境卡片就可以根据空气质量来变化图标和颜色，然后获取空气净化器的 PM 2.5 数值的实体 ID，就可以更新状态了，大家举一反三，就能完善所有的卡片了。

之前所以写这么多，是希望新手也能看到这个教程，动起手来。后续我也会持续更新这个系列的教程，谢谢大家的支持。