「HA」HomeAssistant 主题美化 - 侧边栏篇

本文为小红书笔记的延伸，方便大家复制小红书里不太好编辑的代码。
小红书主页

 

---

 

写在前面

本文主题整体的灵感来源来自于github上作者matt8707的hass-config主题。
但是hass-config完全依赖于ui-lovelace.yaml文件编辑，其纯代码的编辑方式不是很方便编辑和添加设备，也不利于新手学习。

本文的主题是我参考hass-config的风格，自己制作的一套主题，大部分都使用了HA官方自带的卡片，便于随时调整，学习门槛也比较低。

 

---

 

开始

在开始前我们可以先设置一下主题和背景。
以下为下载链接，内容包括主题文件和我自己制作的标签页图片及psd源文件，方便自行修改。

下载链接:HomeAssistant主题相关 密码: 5100
下载好后
1.将HomeAssistant主题相关/主题里的tablet.yaml（通用主题）和transparent.yaml（透明卡片）这两个文件，放在HA根目录/config/themes文件夹下。
2.将HomeAssistant主题相关/背景图里的background.png放在HA根目录/config/www文件夹下，如果没有www文件夹可以自己新建。
3.点击HA首页，开发者工具 - YAML 配置重新加载 - 所有YAML配置用来加载主题。
4.加载完成后，在HA首页点击左下角的用户，下拉找到浏览器设置 - 主题设置为深色，主题选择tablet就可以得到和我一样的主题和背景了。

1.添加仪表盘

(1).在HA主页，点击设置。
(2).找到仪表盘。
(3).点击右下角的添加仪表盘。
(4).选择从新建仪表盘开始。
(5).为这个仪表盘起一个合适的名称，选一个图标，网址可以不填。

2.创建视图

添加好仪表盘后，HA主页的左侧就会出现我们添加的这个仪表盘。

(1).点击这个仪表盘。
(2).在右上角点击编辑仪表盘。
(3).点击+号 添加视图，为每一个房间创建一个视图，视图名称为房间名称。
(4).视图的部件最大宽度选择3（即左侧边栏占1列，右侧操作区域占2列），都选好后点击保存。

—— 可选 ——

创建好视图后，我们可以在第一个视图内左侧创建一个垂直堆叠卡片，然后左侧边栏里的所有内容都在这个垂直堆叠卡片内编辑。
这样整个左侧整个侧边栏就算1个卡片，我们在其中一个视图内创建好边栏后只要复制这个垂直堆叠卡片到其他视图，即可保证每个视图的边栏是一致的。
我们整个侧边栏的逻辑其实就是每个视图的左侧侧边栏内容一致，右侧操作区域为每个房间的设备，以此实现整体侧边栏和操作区域独立的效果。

 

---

 

时间和日期

1.安装Button-Card

在HACS里搜索并安装Button-Card

2.编辑configuration.yaml

在HA根目录/config下的configuration.yaml文件里添加如下代码（推荐使用VS Code编辑）。

sensor:
  - platform: time_date
    display_options:
      - 'time'
      - 'date'
  - platform: template
    sensors:
      current_time:
        friendly_name: "当前时间"
        value_template: "{{ as_timestamp(now()) | timestamp_custom('%H:%M') }}"
      current_date:
        friendly_name: "当前日期"
        value_template: >
          {{ ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"][now().weekday()] }}
          {{ now().strftime('%m月%d日') }}

以上代码是用于创建时间&日期传感器，添加在configuration.yaml文件的末尾即可。

3.创建时间&日期卡片

进入创建的垂直堆叠卡片，在里面点击+号新建一个卡片，卡片类型选择最底部的手动。

输入如下代码。

type: custom:button-card
styles:
  card:
    - font-weight: bold
    - line-height: 1.2
    - color: white
    - text-align: left
    - padding: 10px
    - border-radius: 10px
    - background-color: transparent !important
    - border: none
    - box-shadow: none
    - justify-content: flex-start
    - align-items: center
    - width: 100%
    - margin-top: 20px
  custom_fields:
    time:
      - font-size: 48px
      - font-weight: 400
      - text-align: left
      - width: 100%
custom_fields:
  time: |
    [[[ return states['sensor.current_time'].state; ]]]
show_icon: false

以上代码是一个时间卡片。
时间卡片创建好后再点击+号新建一个新卡片，同样选择手动，输入如下代码。

type: custom:button-card
styles:
  card:
    - font-weight: normal
    - line-height: 1.2
    - color: gray
    - text-align: left
    - padding: 10px
    - background-color: transparent !important
    - border: none
    - box-shadow: none
    - justify-content: flex-start
    - align-items: center
    - width: 100%
    - margin-top: "-30px"
  custom_fields:
    date:
      - font-size: 20px
      - font-weight: normal
      - text-align: left
      - width: 100%
custom_fields:
  date: |
    [[[ return states['sensor.current_date'].state; ]]]
show_icon: false

以上代码是一个日期卡片。

 

---

 

天气预报

1.安装天气预报集成

在HACS里搜索并安装天气预报集成。

如果在HACS里搜不到，可以去作者的Github主页手动添加
https://github.com/hasscc/tianqi
如果打不开Github可以尝试使用以下网址
https://my.home-assistant.io/redirect/hacs_repository/?owner=hasscc&repository=tianqi&category=integration 打开后输入自己HA的ip和端口号点击save即可。
配置集成：
安装完后在HA的设置 - 设备与服务里点击右下角添加集成。搜索天气预报，服务器域填写weather.com.cn，搜索地点填写你所在的城市地区，然后回车，搜索完成后勾选搜索出来的地区，点击提交即可。

2.配置天气卡片

添加天气卡片并调用天气预报集成

(1).在垂直堆叠卡片里点击+号新建卡片，卡片类型选择天气预报。
(2).实体选择先前添加的天气实体。
(3).主题选择transparent（这是一个透明主题，选择该主题可以让卡片的背景透明化）。
(4).要显示的天气选择只显示当前天气（也可根据自己喜好选择）。

 

---

 

湿度和降雨量（进度条样式）

1.创建湿度卡片

在垂直堆叠卡片里点击+号新建卡片，卡片类型选择手动，并输入以下代码。

type: custom:button-card
name: 湿度
entity: sensor.jiangning_humidity
styles:
  card:
    - padding: 10px
    - border-radius: 10px
    - height: auto
    - border: none
    - box-shadow: none
    - margin-top: "-20px"
    - background-color: transparent !important
  grid:
    - grid-template-areas: "\"n value\" \"bar bar\""
    - grid-template-rows: auto 20px
    - grid-template-columns: 1fr auto
  name:
    - justify-self: start
    - font-size: 14px
    - color: rgba(255, 255, 255, 0.7)
    - font-weight: bold
  custom_fields:
    value:
      - justify-self: end
      - font-size: 14px
      - color: rgba(255, 255, 255, 0.7)
    bar:
      - height: 8px
      - background-color: rgba(255, 255, 255, 0.2)
      - border-radius: 4px
      - overflow: hidden
custom_fields:
  value: |
    [[[ 
      if (entity && entity.state) {
        return `${entity.state}%`;  // 显示湿度数值
      }
      return 'N/A';  // 如果状态无效，显示“不可用”
    ]]]
  bar: |
    [[[ 
      if (entity && entity.state) {
        const value = parseFloat(entity.state);
        return `<div style="width: ${value}%; height: 100%; background-color: rgba(255, 255, 255, 0.7);"></div>`;  // 填充透明度为 70%
      }
      return `<div style="width: 0%; height: 100%; background-color: rgba(255, 255, 255, 0.3);"></div>`;  // 未填充部分透明度为 30%
    ]]]

以上代码是一个湿度卡片

！！注意！！

以上代码中，开头部分第三行的entity: sensor.jiangning_humidity字段需替换成自己所在城市的实体。可以在HA的设置 — 设备与服务 — 天气预报集成的实体里找到湿度集成，点开后右上角选择设置按钮，然后复制实体标识符的内容进行替换。

2.创建降雨量卡片

在垂直堆叠卡片里点击+号新建卡片，卡片类型选择手动，并输入以下代码。

type: custom:button-card
name: 降雨量
entity: sensor.jiangning_precipitation
styles:
  card:
    - padding: 10px
    - border-radius: 10px
    - height: auto
    - border: none
    - box-shadow: none
    - margin-top: "-20px"
    - background-color: transparent !important
  grid:
    - grid-template-areas: "\"n value\" \"bar bar\""
    - grid-template-rows: auto 20px
    - grid-template-columns: 1fr auto
  name:
    - justify-self: start
    - font-size: 14px
    - color: rgba(255, 255, 255, 0.7)
    - font-weight: bold
  custom_fields:
    value:
      - justify-self: end
      - font-size: 14px
      - color: rgba(255, 255, 255, 0.7)
    bar:
      - height: 8px
      - background-color: rgba(255, 255, 255, 0.2)
      - border-radius: 4px
      - overflow: hidden
custom_fields:
  value: |
    [[[ 
      if (entity && entity.state) {
        return `${entity.state} mm`;  // 显示降雨量数值，单位为毫米
      }
      return 'N/A';  // 如果状态无效，显示“不可用”
    ]]]
  bar: |
    [[[ 
      if (entity && entity.state) {
        const value = parseFloat(entity.state);  // 转换降雨量为数值
        const percentage = Math.min((value / 50) * 100, 100);  // 将降雨量映射为百分比，假设最大值为 50mm
        return `<div style="width: ${percentage}%; height: 100%; background-color: rgba(255, 255, 255, 0.7);"></div>`;  // 填充为白色，透明度 70%
      }
      return `<div style="width: 0%; height: 100%; background-color: rgba(255, 255, 255, 0.3);"></div>`;  // 未填充部分透明度为 30%
    ]]]

以上代码是一个降雨量卡片

！！注意！！

以上代码中，开头部分第三行的entity: sensor.jiangning_precipitation字段需替换成自己所在城市的实体。可以在HA的设置 — 设备与服务 — 天气预报集成的实体里找到降水量集成，点开后右上角选择设置按钮，然后复制实体标识符的内容进行替换。

 

---

 

侧边栏标签页

侧边栏标签页的逻辑是使用了官方自带的图片元素卡片。

1.制作前请先下载文章开头处的主题包。
如果我的主题包内预设的标签页文字和图标不适合你，你也可以利用包内的psd文件自行更改，各种icon图标可以在https://pictogrammers.com/library/mdi/下载。

2.将下载或自己制作的图片放在HA根目录/config/www文件夹下（没有这个文件夹可以自己新建）。
为方便管理，我讲所有的图片都放在了HA根目录/config/www/home下。
后面设置文件夹地址时，/www即/local
例：/www/home/ui/概览选中.png即/local/home/ui/概览选中.png

1.添加图片元素

添加图片元素卡片并设置卡片选项。

(1).在垂直堆叠卡片里点击+号新建卡片，卡片类型选择图片元素。
(2).点击展开卡片选项。
(3).设置图像路径为本地路径或web网址下面的图像路径填写先前我们上传的图片路径。
例：/www/home/ui/概览选中.png即/local/home/ui/概览选中.png
(4).主题选择transparent（即透明主题）。

2.设置元素行为

(1).删除默认的状态徽章。
(2-3).选择添加新元素为图像。
(4).在互动选项卡中，选择点击行为为前往。
(5).导航路径下拉选择对应的视图路径。
(6).选择图像路径为本地路径或 Web 网址，地址和上面一样填写。例：/local/home/ui/概览选中.png。
(7).下拉到页面最底部，添加以下代码，用于控制图片元素的大小。

left: 50%
top: 50%
width: 100%
height: 100%

以上便完成了其中一个跳转标签的设定，点击该标签即可跳转到对应页面，接下来就可以仿照以上的设置，设置其他的标签。

整体的标签逻辑为：
为每一张图片元素标签设置一个点击行为，点击图片跳转到对应视图页面。 每一页视图下，该视图的图片设置为选中状态（白底），其他图片为未选中（透明底）。

例：点击“概览”则跳转到 dashboard-xxx/1 即概览页面，
此页面“概览”这张图为选中状态，有一个白底。其余图片都是透明底。
点击“平面图”则跳转到 dashboard-xxx/2 即平面图页面，
此页面“概览”，包括其他标签都为透明底，“平面图”为选中状态，有一个白底。

以此类推，将我们制作好的整个垂直堆叠卡片复制，并粘贴到其他视图，粘贴好后修改当前视图的跳转标签即可。

 

---

 

室内温湿度

1.安装card-mod

在HACS里搜索并安装card-mod（用于自定义卡片颜色等）。

2.添加温湿度卡片

新建一个水平堆叠卡片（将温湿度两个卡片放进同一个水平堆叠卡片里，方便复制到其他视图）。

(1).新建一个水平堆叠卡片。
(2).点击+号分别添加温湿度卡片，卡片类型选择传感器。
(3).选择实体，我这里调用的是米家温湿度计的数据。
(4).主题选择transparent（透明主题）。
(5).温湿度两个卡片都设置好后，点击底部的显示代码编辑器。
(6).在底部添加以下代码

    card_mod:
      style: |
        ha-card {
          --accent-color: #49b7e8; /* 修改线条颜色为蓝色 */
          border-radius: 0 !important; /* 取消圆角 */
        }
grid_options:
  columns: 12
  rows: 2.9

以上代码用于自定义颜色及卡片高度，也可自行修改