Sections 版面完整教學：欄寬、頁首頁尾、區塊主題，以及從 Masonry 轉過來的正確做法

charles

這篇的內容（9 段）

1. 兩種版面的實際差別
2. 步驟 1：建一個 Sections 分頁
3. 步驟 2：加卡片和區塊
4. 步驟 3：調卡片寬度
5. 步驟 5：區塊背景色
6. 步驟 7：頁首和頁尾
7. 步驟 9：決定區塊怎麼切
8. 關於「密集排列」
9. 收尾檢查

Home Assistant 的儀表板分頁有好幾種版面，現在的預設是 Sections（區塊）。用了很久的人多半還停在舊的 Masonry（磚牆）。

這篇講 Sections 怎麼排、有哪些你可能不知道的功能，以及怎麼把舊分頁轉過來 —— 最後這件事有內建工具，不用手動重建。



兩種版面的實際差別

Masonry：卡片像磚牆一樣自動堆疊，你不能決定哪張放哪裡。螢幕寬度一變，卡片就重新排列，常常排到你不想要的位置。要控制版面只能拿 vertical-stack / horizontal-stack 硬湊。

Sections：你把卡片放進一個個區塊，區塊內的順序你說了算。螢幕變窄的時候區塊往下疊，但區塊內部的順序不變。而且每張卡片可以自己決定佔幾欄。

一句話：Sections 讓你真的能控制版面。 這也是為什麼它變成預設。

步驟 1：建一個 Sections 分頁

• 儀表板右上角的筆 → 編輯模式
  
• 最上面分頁列的 + → 新增分頁
  
• 版面類型選 Sections（區塊）
  
• 最多幾個區塊並排：桌機大螢幕選 3 或 4，只用手機的話選 1
  
• 密集排列：先不要開（下面會講它的代價）
  
• 儲存
  

你會看到什麼：一個空白分頁，中間有一個空區塊和一顆「新增卡片」按鈕，旁邊有一顆「建立區塊」。

找不到「版面類型」這個欄位，代表你的 HA 太舊了。Sections 需要 2024.2 以上，內建的轉換器需要 2024.11 以上。

步驟 2：加卡片和區塊

• 點區塊裡的新增卡片，選一張 Tile 卡片、指定一顆燈，儲存
  
• 點建立區塊，會自動在新區塊最上面放一張標題卡片
  
• 標題卡片點下去可以改文字和圖示；不想要標題就直接刪掉它，之後想加再加回來
  

你會看到什麼：兩個區塊並排（螢幕夠寬的話），第二個區塊上方有一行標題。

舊教學會教你在 YAML 裡給區塊寫 `title:` —— 那個鍵還能用，但官方已經標成棄用，正式的做法是放一張標題卡片。差別在於標題卡片可以加圖示、加可點的動作、加徽章。



步驟 3：調卡片寬度

這是 Sections 最實用的功能。

• 編輯模式下，滑鼠移到卡片上 → 右下角出現一個拖曳把手
  
• 往左右拖就改變它佔幾欄，往上下拖改高度
  

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

登入繼續閱讀使用 Google 登入