Home Assistant自定义卡片：Button Card安装与配置完全指南

Home Assistant自定义卡片：Button Card安装与配置完全指南

button-card ❇️ Lovelace button-card for home assistant 项目地址: https://gitcode.com/gh_mirrors/bu/button-card

项目基础介绍及主要编程语言

Button Card是一个专为Home Assistant设计的Lovelace UI组件，它提供了一个高度可定制的按钮界面，用于控制你的智能家居设备。该项目基于JavaScript开发，利用了HTML、CSS和Handlebars模板引擎来实现其功能与样式自定义，属于前端技术栈。

关键技术和框架

• Lovelace：Home Assistant的UI构建系统，允许用户通过拖拽或代码方式创建自定义的用户界面。
• Handlebars.js：一种轻量级的模板引擎，用于动态生成HTML内容。
• Custom Elements：Web平台的一部分，使得开发者可以创建自定义的、可复用的HTML标签（如<custom-button-card>）。
• JavaScript：作为主要编程语言，处理卡片的逻辑和交互。

安装和配置准备与详细步骤

准备工作

1. 确保拥有Home Assistant: 首先，你需要有一个运行着最新版本的Home Assistant环境。
2. 开启开发者工具: 在Home Assistant中启用开发者工具，这通常在设置中的“常规”选项里找到。

安装步骤

手动安装

1. 下载仓库: 访问Button Card GitHub页面，点击右上角的"Clone or download"按钮，然后选择"Download ZIP"下载压缩包。

2. 解压文件: 将下载的ZIP文件解压到本地。

3. 上传至Home Assistant: 通过Home Assistant的Web界面，进入“配置” > “HACS”（如果已安装）或直接进入配置目录下的www文件夹（手动安装路径）。如果没有HACS且不打算安装，将解压后的button-card文件夹整个移动到您的Home Assistant配置的www/community目录下。如果该目录不存在，您可能需要创建它。

使用HACS安装（推荐）

1. 安装HACS: 如果还没安装HACS，先按照HACS官方文档完成安装。

2. 添加源: 在HACS界面点击左侧菜单栏的三个水平线（侧边栏），然后选择"Repositories"。

3. 搜索并添加: 在搜索框内输入custom_cards/button-card，找到后点击“+Add repository”将其添加。

4. 安装: 成功添加后，在HACS的“Cards”分类下找到“Button Card”，点击“Install”。

配置使用

一旦Button Card安装完毕，你可以通过编辑Lovelace UI界面来添加和配置按钮卡。

1. 打开Lovelace UI编辑器: 在Home Assistant主界面，点击界面上方的小齿轮图标进入“配置”，然后选择“视图”来编辑你的Lovelace界面。

2. 添加卡片: 在编辑模式下，点击加号图标添加新元素，如果是手动安装需要输入以下YAML代码片段；如果是通过HACS安装，可以在小部件选择器中找到Button Card。

   type: custom:button-card
   entity: switch.your_switch_entity  # 替换为你的实体ID
   name: 开关灯  # 显示名称
   icon: mdi:lightbulb-on  # 图标
   

3. 保存并查看: 编辑完成后保存，返回主页查看你的新按钮卡效果。

高级配置示例

对于更复杂的配置，比如添加点击事件、改变样式等，参考Button Card的GitHub页面上的文档进行相应的配置调整。

记得每次更改后保存并刷新页面以查看更新。

这样，你就成功地安装并配置了Button Card，开始了在Home Assistant中更加个性化的UI定制之旅。

button-card ❇️ Lovelace button-card for home assistant 项目地址: https://gitcode.com/gh_mirrors/bu/button-card