儀表板：用 Sections 做一個家人真的會用的介面（含完整 YAML）

charles

這篇的內容（4 段）

1. 步驟 4：貼上第一頁
2. 步驟 8：第二頁之後怎麼分
3. 步驟 9：給家人與長輩的版本
4. 步驟 10：手機上驗收

你花三個月做的儀表板，家人用三次就放棄，然後繼續走過去按牆上的開關。這篇從空白的分頁開始，一步一步做出一個「家人會用」的版本，而且每一步都能自己檢查做對了沒。



先確立一件事：第一頁只放三到五個東西

實際問過家人之後，答案通常是：

• 開關客廳燈
  
• 開冷氣、調溫度
  
• 看門有沒有鎖
  
• 沒了
  

所以第一頁就應該只有這幾樣。你覺得酷的那些數據不屬於第一頁。

步驟 1：建立一個新的儀表板（不要直接改預設的那個）

預設那個「總覽」是自動產生的，改了就再也回不去。留著它當你自己的除錯用頁面。

• 設定 → 儀表板 → 右下角「新增儀表板」
  
• 選「新的儀表板（從頭開始）」
  
• 標題填「家用」，圖示填 `mdi:home`
  

你會看到：側邊欄多一個「家用」項目，點進去是一個空白頁面，右上角有一支鉛筆。

步驟 2：把版面類型設成 Sections

• 點右上角鉛筆進入編輯模式
  
• 點分頁標籤旁邊的鉛筆（編輯這個分頁）
  
• 版面類型選 Sections（區塊）
  

Sections 比舊的 Masonry 好在哪：卡片排成整齊的格子、可以拖拉改變每張卡的寬度、手機上自動變成單欄、每一區可以有自己的標題。它現在是新建分頁的預設值。

已經有一個 Masonry 分頁想換過來：直接改版面類型就好，這就是官方的正確做法。 HA 2024.11 起內建轉換器，沒被放進任何區塊的卡片會集中落在一個叫「已匯入的卡片」的區塊，你再拖出去分類即可。網路上「Sections 沒有自動轉換、要手動重建」的說法已經過期，照那樣做等於避開唯一簡單的路。

你會看到：畫面出現一個虛線框的空區塊，中間有「新增卡片」的加號。

步驟 3：先把要用到的東西定義好

第一頁會有一顆「離家」按鈕和一張「門窗沒關」的警告卡。這兩個東西不會自己存在，要先建 —— 很多教學直接給你一段引用 `script.離家模式` 的 YAML，照抄的結果是一顆按了沒反應的按鈕。

把這段貼進 configuration.yaml 的最外層：

1. script:
2.   leave_home:
3.     alias: 離家模式
4.     icon: mdi:home-export-outline
5.     mode: single
6.     sequence:
7.       - action: light.turn_off
8.         target:
9.           entity_id: all
10.       - action: climate.turn_off
11.         target:
12.           entity_id: all
13.       - action: media_player.turn_off
14.         target:
15.           entity_id: all
16.       - action: persistent_notification.create
17.         data:
18.           title: 離家模式
19.           message: >
20.             燈、空調、播放器都關了。
21.             {% if is_state('binary_sensor.any_door_window_open', 'on') %}
22.             ⚠ 還有門窗沒關：
23.             {{ state_attr('binary_sensor.any_door_window_open',
24.                           'open_list') }}
25.             {% else %}
26.             門窗都關好了。
27.             {% endif %}
29. template:
30.   - binary_sensor:
31.       - name: Any Door Window Open
32.         unique_id: any_door_window_open
33.         device_class: problem
34.         state: >
35.           {{ expand('binary_sensor.front_door',
36.                     'binary_sensor.balcony_door',
37.                     'binary_sensor.living_room_window')
38.              | selectattr('state', 'eq', 'on') | list | count > 0 }}
39.         attributes:
40.           open_list: >
41.             {{ expand('binary_sensor.front_door',
42.                       'binary_sensor.balcony_door',
43.                       'binary_sensor.living_room_window')
44.                | selectattr('state', 'eq', 'on')
45.                | map(attribute='name') | list | join('、') }}

複製代碼

以下還有約 81% 的內容
登入後即可閱讀完整教學

登入繼續閱讀使用 Google 登入