這個部落格長什麼樣子：版面設計筆記

這個站的版面來自兩個參考來源：一個是內容優先、留白充足的閱讀型部落格，另一個是配色溫暖、圓角明顯的可愛風格主題。把兩者合起來，就是你現在看到的樣子。

版面的三個決定

做版面的時候，其實只做了三個比較關鍵的決定。

一、雙欄，側邊欄放右邊

主要內容在左邊，側邊欄在右邊。閱讀時視線從左上開始，把最重要的東西放在視線第一個落點，側邊欄則負責補充導覽。在寬度小於 1024px 時側邊欄會自動移到下方。

二、卡片而不是清單

文章列表用卡片呈現，每張卡片有封面、分類、標題、摘要和閱讀時間。沒有設定特色圖片的文章會自動配一個表情符號當封面，所以列表不會出現空洞。

三、置頂文章獨立成一個大區塊

第一頁最上方會單獨放一篇精選文章，用比較大的版面呈現。它會優先抓「置頂」的文章，沒有置頂的話就抓最新的一篇。

配色

主色是溫暖的橘，搭配米白底色。所有顏色都寫成 CSS 變數，要換色只要改幾行：

:root {
  --accent:      #FFB347;
  --accent-soft: #FFD191;
  --accent-deep: #E8912B;
  --bg:          #FBF8F4;
}

深色模式是獨立的一組變數，會記住你的選擇，也會跟隨系統設定。點右上角的月亮就能切換。

還可以調整的地方

• 側邊欄的頭像、暱稱、自我介紹 → 外觀 → 自訂 → 側邊欄個人資訊
• 選單 → 外觀 → 選單
• 首頁的大標與副標同樣在自訂器裡

這篇是示範文章，看完可以直接刪掉。