中用更中看，Lovelace 界面定制与 HomeAssistant 美化

作者：BigBubbleGum

本文是玩转 HA 系列的第三篇，在前两篇中我分享了 HomeAssistant 在树莓派 4B 上的安装，常见 add-ons 插件与 Intergrations 组件的配置，并通过 HACS 接入了米家设备。HomeAssistant 不仅功能强大，前端界面也可以变得很好看，本篇就来分享下 HA 美化的那些事儿。

如果你还没有安装 HomeAssistant，没关系，你可以去这个 demo 网站上演示体验下不同风格的 HA 界面，点下一个演示进行切换。

对 HA 界面进行美化需要了解以下几个概念。

仪表盘(Dashboard)：在左侧菜单栏的顶部是仪表盘，每个仪表盘可以显示一套前端页面。

视图（View）：右侧页面显示的是视图，一个仪表盘中可以包含多个视图。

卡片（card）：视图由不同形式与风格的卡片组成，卡片用来显示设备状态、控制设备动作，等等。

徽章（Badges）：视图顶部显示的圆形图标。

一、仪表盘(Dashboard)

仪表盘就是一套前端页面，在左边菜单栏的顶部，默认只有一个「概览」仪表盘。

点击配置-仪表盘，可以添加新的仪表板，然后就可以从左边菜单栏进入。

可以将某一个仪表盘设置为默认，这时候该仪表盘将排在菜单第一位，并覆盖概览仪表盘。

Lovelace 是用户界面，可以理解为 UI，Lovelace 的功能就是定义每一个仪表板显示的内容与形式。点击仪表盘右上角就可以定制化 Lovelace 界面，需要注意的是如果自定了仪表盘内容的显示与排布后，任何新增实体都会破坏原有布局，因此一旦使用 Lovelace 定义了某个仪表盘的样式之后，任何新的实体都不会自动出现在该仪表盘中了，显示该实体需要再次编辑仪表盘手动添加。

二、视图（View）

一个仪表盘中可以包含多个视图，默认只有「HOME」一个视图，用户可以手动添加，点击顶部进行切换。

每个视图中可定义内容有：

显示内容：标题（Title）、图标（Icon）、徽章（Badges）、卡片（Cards）、

属性：网址（Path）、主题（Theme）、面板模式（Panel Mode）、哪些用户可见

顶部圆形图标为徽章，可以在定义视图的时候添加，用来快捷显示一些状态和信息。

三、过滤型徽章（FILTER BADGE）

有时候希望视图上面一排徽章显示一些需要关注的事情，比如当一盏灯打开的时候才显示，提醒我们去关闭它，而它是关闭的时候就不用显示了，这时候可以用过滤型徽章（FILTER BADGE）。

当前 HA 版本还不支持在前端直接定义过滤型徽章，需要在原始配置编辑器里修改。

以添加一个只会在打开状态显示的小米 WiFi 插座为例，在配置文件中添加以下内容：

- type: entity-filter

 entities:

   - entity: switch.wificha_zuo

 state_filter:

   - 'on'

注意格式与缩进。

只有打开 WiFi 插座后，过滤型徽章才会在顶部显示。

四、主题（Theme）

从 HACS 下载主题

主题就是页面风格，你可以在 HACS 的前端界面里下载社区里别人开发的 Lovelace 与主题。

取消勾选 Lovelace，出来的都是主题了，可以点击右侧主题预览，点击右下角安装。

安装完成之后，需要到 config 文件夹下的 configuration.yaml 里添加一行代码，再重启 home assistant 一次。

frontend:

 themes: !include_dir_merge_named themes

用 SSH 工具下载主题

如果没有 HACS 或者网络不好，也可以在Terminal & SSH工具中输入下面指令或者去 GitHub 手动下载到 /config/themes 文件夹中。

mkdir /config/themes

cd /config/themes/

git clone https://github.com/maartenpaauw/home-assistant-community-themes.git

同样需要配置下 configuration.yaml 文件让 HA 加载这些主题。

frontend:

 themes: !include_dir_merge_named themes

重启 HA，在定义视图的时候就可以选择不同的风格。

也可以在个人设置中改变整个 HA 前端的主题风格。

仅仅换了个主题，是不是感觉有那味了。

五、Lovelace 配置文件

Lovelace 配置文件存放在/config/.storage/文件夹中，以lovelace开头。文件lovelace_dashboards中是仪表盘整体的配置：一共有多少个仪表盘、分别是哪些；文件lovelace.xxxx是具体某个仪表盘的 lovelace 定义文件，删除后即可恢复这个仪表盘的初始状态。

比如删除文件 Lovelace，就能恢复仪表盘"概览"的默认显示，会显示 HA 的所有设备，且会随着设备的增减自动变化，建议进行界面美化设置时新建一个仪表盘。

六、卡片

官方卡片

Lovelace 中最核心的显示是一张张卡片，用来展示一个或者多个实体，不同卡片的前端展示形态是不同的。官方提供了29 种不同样式的卡片。CSDN中文介绍。

比如这个小米 WiFi 插座就有多种展示形式，其中按钮卡片和实体卡片可以直接点击操作，概览卡片只能显示当前状态。

除了上面这些默认卡片，还可以手动添加一些卡片，比如用 iframe 添加一个天气组件。

打开网站 https://www.windy.com/，选择地区调整到合适比例，复制代码。

添加“网页卡片”，在 URL 中只需要粘贴代码中的 src 部分，可以调整长宽比例。

一个精美的天气卡片就添加好了。

还记得最开始说的那个demo网站吗，里面的每个卡片都可以点开查看配置，喜欢的卡片可以直接复制过来。

自定义卡片

网上还有许多自定义卡片可以用来美化界面，下面以添加 auto-entities 为例。

auto-entities 是一个功能强大的 lovelace 插件，可以设置各种规则自动将实体放入 lovelace 卡片，例如可以制作一张实体卡，显示所有电池电量不足的遥控器。或者一张显示当前所有灯亮的概览卡。

打开 auto-entities 的 GitHub 主页，

点击 auto-entities.js 文件，在点击 Raw，浏览器中的就是下载地址。

将 auto-entities.js 文件下载到 www 目录下，

wget https://raw.githubusercontent.com/thomasloven/lovelace-auto-entities/master/auto-entities.js

点击配置-仪表盘-资源，添加 /local/auto-entities.js，（ /www/ 等同于 /local/）

然后就可以添加一个亮灯状态就会自动显示的卡片，添加两个过滤条件：domain 设置为 light，state 设置为 on 即可。

灯具被打开后就会自动显示在该卡片中。

从 HACS 安装 Lovelace 卡片

auto-entities 也被发布到了 HACS 中，还可以直接从 HACS 中下载添加。

下面以 mini-media-player 为例，在 HACS 的前端中搜索并下载 Lovelace 插件 mini-media-player，打开源码，复制连接地址的后面部分 xxxx.js，在配置-仪表盘-资源中添加。

然后就能在 HA 的前端界面中添加该自定义卡片。

上述两种自定义卡片在添加卡片选项的底端，可以直接点击添加，当然也可以用手动模式添加，具体的 usage 和 example 可以参考该 Lovelace 的的 GitHub 主页。

总结

以上就把 HomeAssistant 中关于 Lovelace 配置的方方面面都讲清楚了，这只是 Lovelace 的基础知识，教会你如何看懂 HA 界面，如果要把界面配置的超级美观，还需要学习 yaml 格式的基本规范和格式，我将在后续的专栏中继续分享，欢迎关注~