Home-AssistantConfig 自定义 UI 搭建：5 个步骤让智能设备状态上墙

Home-AssistantConfig 自定义 UI 搭建5 个步骤让智能设备状态上墙【免费下载链接】Home-AssistantConfig:house: Home Assistant configuration Documentation for my Smart House. Write-ups, videos, part lists, and links throughout. Be sure to :star: it. Updated FREQUENTLY!项目地址: https://gitcode.com/gh_mirrors/ho/Home-AssistantConfig这篇文章解决一个问题如何用 Home-AssistantConfig 这套配置实践 Home Assistant 自定义 UI。内容覆盖卡片模块注册、YAML 面板拆分、主题定义、Kiosk 页面与防漂移自动化共 5 步。这个功能到底能做什么在这套仓库里自定义 UI 不是一张漂亮截图而是一组可管理的文件config/dashboards/下按房间拆分的视图、config/www/下的独立 HTML 页面、config/themes/里的屏幕级主题。它适合两种场景墙面需要 24 小时显示状态的 Kiosk 平板以及需要给不同成员看不同内容的多人家庭。动手前你需要准备什么运行中的 HA 核心HACS 已装好config 目录可读写一个测试浏览器先把仓库拉下来对照真实文件结构读这篇流程git clone https://gitcode.com/gh_mirrors/ho/Home-AssistantConfig完整实现流程步骤一用 YAML 注册自定义卡片做什么把 card-mod、mushroom 这类第三方卡片声明成模块资源。怎么做在config/dashboards/resources.yaml中按resource_mode: yaml的方式列出模块 URL- type: module url: /hacsfiles/lovelace-card-mod/card-mod.js - type: module url: /hacsfiles/lovelace-mushroom/mushroom.js为什么模块版本进了仓库重装系统时卡片不会丢也不依赖 UI 里零散的存储记录。模块装好之后面板本身的结构是下一步的事。步骤二把面板拆成视图文件做什么让主入口只负责 include每个视图各自成文件。怎么做config/ui-lovelace.yaml一行 include 指向 dashboard 文件dashboard 再用!include_dir_list拉取整个视图目录title: Bear Stone views: !include_dir_list /config/dashboards/overview/views每个房间一个 dashboard 子目录视图、sections、templates 分层存放。为什么改卧室屏不会碰厨房屏Git 差异一眼能看出动了哪个房间。结构拆完配色策略接着定。步骤三为不同屏幕定义主题做什么在config/themes/kiosk_satellite.yaml里同时给出两套调色板。怎么做kiosk_satellite_auto带 light/dark 双模式跟随客户端选择kiosk_satellite_dark固定暗色只覆盖卡片背景与文字变量kiosk_satellite_dark: card-background-color: #151d27 primary-text-color: #f3f6fa lovelace-background: #0b0f14为什么厨房那块屏挂在走廊夜里必须全暗卧室屏则允许家人白天用亮色一个主题文件服务两种策略。主题只管外观墙面上真正跑什么页面是下一层问题。步骤四给 Kiosk 写独立 HTML 页面做什么绕过完整 dashboard用一个静态渲染器config/www/bedroom-kiosk.html服务在/local/路径下。怎么做页面是一张三行网格——顶部状态横幅、中间双摄像头位、底部事件区字号放大到隔两米可读深色模式用 CSS 变量整体切换。仓库里那台 Android 5 的 Fully 平板跑完整 dashboard 会卡跑这个页面则没问题。为什么www/目录天然被发布到/local/HTML 不依赖任何插件刷新即可部署坏了回滚也只是删文件。步骤五用自动化守住页面不漂移做什么平板的 WebView 会被系统更新、误触带跑需要一个看门狗。怎么做config/packages/kiosk_tablet.yaml里的自动化监听当前页面传感器页面一旦离开/local/bedroom-kiosk.html就重按加载起始 URL 的按钮并写一条日志trigger: - platform: state entity_id: sensor.alarm_panel_1_current_page action: - service: button.press target: entity_id: button.alarm_panel_1_load_start_url为什么漂移检测加自动恢复后墙面屏幕从偶尔有人路过发现不对变成无人值守运行异常还会被记录进 logbook 可查。新手最容易踩的坑⚠️ 四个问题在仓库注释里都有对应解法但没人提醒的话你会自己撞一遍。平板启动慢界面半天不出现→ 全局侧边栏插件在 WebView 里用不到反而拖慢老硬件 → 仓库用config/www/custom-sidebar-loader.js检测 UAAndroid WebView 直接跳过插件导入。改了面板资源却不生效→ YAML 面板下 UI 存储.storage里的资源声明不参与加载 → 模块统一声明在 resources.yaml别再手动改 .storage 文件。卡片显示为空白块→ 模块 URL 与 HACS 实际路径不符或缺少版本参数 → 浏览器控制台看 404核对 /hacsfiles/ 下的真实文件名再刷新资源。主题对某个视图不生效→ 该视图没有显式绑定主题 → 在视图里写 theme 字段或像厨房屏那样整个 dashboard 固定暗色主题。下一步可以探索什么按用户分流视图仓库的视图文件里已有visible: user列表可以按家庭成员下发不同 dashboard比如访客只能看到灯光控制。摄像头事件接管车库门一开就切车库画面大门解锁就切门口画面。这类策略仓库里用模板传感器加 button 实体实现思路可以照搬到自己的设备。面板健康巡检定时截图加新鲜度检查屏幕挂了会主动报问题而不是等人路过发现。这是 Kiosk 长期无人值守的关键一环。把界面当配置管进版本库是这套 Home Assistant 自定义 UI 做法里最值得抄的一点。想继续看细节直接翻仓库里config/dashboards/和config/packages/kiosk_tablet.yaml的注释每一步都写清楚了为什么这样做。【免费下载链接】Home-AssistantConfig:house: Home Assistant configuration Documentation for my Smart House. Write-ups, videos, part lists, and links throughout. Be sure to :star: it. Updated FREQUENTLY!项目地址: https://gitcode.com/gh_mirrors/ho/Home-AssistantConfig创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考