PART ONE
專案總覽｜功能與應用場景
此專案為 Home Assistant Lovelace 提供一個響應式的導覽列卡片，靈感來自 Google Material Design，旨在簡化並美化儀表板之間的導航體驗。它能自動適應手機、平板和桌面等多種裝置，提供一致且現代化的操作介面。
🔑 核心功能
- 響應式設計
- 統一儀表板導覽
- 支援佈景主題
- 高度可自訂動作與樣式
- 與現代 Home Assistant 介面完全相容
- 安裝方式簡單
📋 功能詳細說明
| 功能名稱 | 說明 |
|---|---|
| 建立全站統一的響應式導覽列 | 在多個儀表板頂部或底部放置 Navbar Card，設定相同的導覽連結。無論在手機、平板或電腦上都能看到一致的導覽列，快速切換頁面。 |
| 為特定房間儀表板客製化快捷操作 | 在客廳儀表板中加入 Navbar Card，將按鈕設定為控制燈光場景、電視開關及窗簾開合等快捷操作。 |
PART TWO
深入解析｜執行環境與部署步驟
⚙️ 執行環境需求
- 需要 Home Assistant 最新穩定版本。
- 儀表板必須啟用 Lovelace 模式。
- 建議使用最新版本的 Chrome、Firefox 或 Safari 瀏覽器。
🔧 部署安裝步驟
| 步驟 | 說明 |
|---|---|
| Step 1 | 下載 navbar-card.js 檔案至您的電腦。 |
| Step 2 | 將檔案上傳到 /config/www/community/lovelace-navbar-card/ 目錄下。 |
| Step 3 | 前往設定 > 儀表板。 |
| Step 4 | 點擊右上角三點選單選擇資源。 |
| Step 5 | 新增資源 URL 為 /local/community/lovelace-navbar-card/navbar-card.js，類型為 JavaScript 模組。 |
| Step 6 | 清除瀏覽器快取並重新整理頁面。 |
| Step 7 | 在 Lovelace 儀表板中新增卡片選擇自訂 Navbar Card。 |
PART THREE
總結與展望｜AI Agent 部署 Prompt
🤖 AI Agent 部署 Prompt
以下是用於部署此專案的 AI Agent Prompt，可直接複製使用：
請幫我安裝並部署 HA_card_lovelace-navbar-card。 ## 專案資訊 - 倉庫位址：https://github.com/WOOWTECH/HA_card_lovelace-navbar-card - 類型：Home Assistant 主題/卡片 - 功能說明：Lovelace 響應式導覽列卡片，Material Design 風格。 ## 環境需求 - Home Assistant 最新穩定版本。 - Lovelace UI 模式。 - 現代網頁瀏覽器。 ## 安裝步驟 1. 下載 navbar-card.js。 2. 上傳到 /config/www/community/lovelace-navbar-card/。 3. 在儀表板資源中新增。 4. 清除快取並重新整理。 5. 在 Lovelace 中新增卡片使用。
← 返回開源專案列表