01HomeAssistant 中如仪表盘中添加自定义按钮，点击之后切换另外的仪表盘页面

admin

在 Home Assistant (HA) 中，实现“点击按钮切换到另一个仪表盘页面”的核心机制是使用卡片的 “点击操作 (Tap Action)” 并将其设置为 “导航 (Navigate)”。

以下是保姆级操作步骤，分为准备工作、添加按钮、配置跳转三个阶段。

---

🟢 第一阶段：准备工作（获取目标路径）

在制作按钮之前，你需要先知道“要跳转到哪里”。

• 打开你要跳转的目标仪表盘页面。

• 观察浏览器顶部的地址栏。

  
  

  • 假设你的 HA 地址是 http://192.168.1.5:8123/lovelace/living-room

  • 那么目标路径就是 /lovelace/living-room (即域名/IP端口之后的部分)。

  • 注意：如果你的仪表盘是默认的，路径通常是

    
    

• 复制这个路径，稍后会用到。

  
  

---

🟢 第二阶段：添加自定义按钮（UI 可视化操作）

我们使用官方最通用的“按钮 (Button)”卡片来实现。

• 进入你想要放置按钮的仪表盘页面。

• 点击右上角的 铅笔图标 (编辑仪表盘)。

• 点击右下角的 “+ 添加卡片” 蓝色按钮。

• 在搜索栏输入 button，选择 “按钮 (Button)” 卡片。

  
  

---

🟢 第三阶段：配置跳转动作（关键步骤）

在卡片配置界面中，按以下步骤设置：

• 实体 (Entity)：（可选）

  
  

  • 如果你只是想做一个纯跳转按钮，不绑定具体设备，可以留空。

  • 或者随便选一个实体（如 sun.sun）来获取默认图标，稍后我们可以覆盖它。

    
    

• 名称 (Name)：输入按钮上显示的文字，例如“前往客厅”。

• 图标 (Icon)：选择一个合适的图标，例如 mdi:sofa。

• 点击操作 (Tap Action)：这是最关键的一步！

  
  

  • 找到“点击操作”或“动作 (Action)”选项。

  • 在下拉菜单中选择 “导航 (Navigate)”。

    
    

• 导航路径 (Navigation Path)：

  
  

  • 在出现的输入框中，粘贴第一阶段复制的路径（例如 /lovelace/living-room）。

    
    

• 点击右下角的 “保存 (Save)”。

  
  

---

🟢 进阶：使用 YAML 代码方式（更灵活）

如果你需要更高级的自定义（或者喜欢直接复制粘贴代码），可以在添加卡片时滑到最下方点击 “手动 (Manual)”，然后粘贴以下代码：

codeYaml

type: buttonname: 切换到监控中心icon: mdi:cctvshow_name: trueshow_icon: truetap_action:  action: navigate  navigation_path: /lovelace/cameras  # 请修改为你实际的目标路径hold_action:  action: none

---

💡 常见问题与验证结果 (基于 2025.12.2)

• 路径错误：如果你点击按钮后没有反应，或者提示 404，通常是因为 navigation_path 填错了。请确保路径是以 / 开头的相对路径。

• 关于自定义卡片 (Custom Button Card)：如果你安装了第三方 HACS 插件 custom:button-card，操作逻辑是一样的，只需在 YAML 中添加 tap_action: navigate 字段即可。

• 移动端 App：此设置在 Home Assistant 手机 App 中同样有效，点击后会直接在 App 内跳转页面。

  
  

现在，点击右上角的 “完成” 退出编辑模式，尝试点击你的新按钮，页面应该会立即平滑切换到你设定的目标仪表盘。