Folio 主題設計系統
方向
建立一個像最佳開發者部落格與作品集（leerob.com、overreacted.io、brittanychiang.com、antfu.me）的個人網站：一個人、一個聲音，寫作優先。網站應感覺像一本整理良好的筆記本，安靜且快速，沒有任何與文字競爭的元素。用具體的數字和程式碼展示這個人建構和學到的東西。不使用庫存人物照片、沒有行銷宣傳語，也不加入裝飾性效果。
基礎
- 僅使用
./theme/views/提供的標記和類別，以及主題的article、blog、code、text、blog版面配置和main視圖。 - 使用系統無襯線、襯線和等寬字體，以及現有的
--pico-*變數。 - 僅為連結和第一個按鈕使用暖中性色（
#2B2924、#6B665E、#E4E0D9、#FBFAF8）和綠色（明亮模式#1F7A4D，暗黑模式#4FBF87）；程式碼區塊始終保持暗色。 - 支援明亮和暗黑模式；不要在可主題化的背景上放置固定的明亮顏色。
- 使用
0.5rem圓角和細邊框取代陰影。
結構
- 首頁（
page）：包含一個hero，其中有大頭貼圖片、職稱副標題、一句話介紹與兩個按鈕；一個blog元素，使用list版面配置，標題為「近期文章」；兩欄的專案cards；以及一個用於聯絡的cta。 - 寫作頁（
page）：一段關於你寫作主題的簡短說明，以及一個blog清單，列出所有以該頁為父頁的文章。 - 文章（
blog）位於「寫作」之下，以最新者優先排序。每篇文章以article元素開頭（標題、兩句導語與一張封面圖片），接著是text、二級heading與code元素。 - 關於、專案、使用與現在頁面（
page）以一級heading開頭。「關於」包含一個垂直式的經歷時間軸；「使用」依類別列出工具；「現在」則說明你這個月在做什麼，並附上最後更新日期。 - 在首頁填入
folio::profile設定：姓名、職稱、公司、地點、一張正方形照片、一句話簡介、電子郵件地址與個人檔案連結。
元件
- 文章導語：兩句話，說明問題以及讀者可以獲得什麼。清單卡片利用它作為介紹。
- 標題：簡短、具體的二級標題（例如「批次回填」）；三級標題僅能置於其下。至少使用兩個標題，以便顯示文章大綱。
- 程式碼：每個程式碼片段一個
code元素，需設定語言，最多約 15 行，真實且可執行。 - 提示框：在文字元素中使用 GitHub 警示（
[!NOTE]、[!TIP]、[!WARNING]），每篇文章最多一到兩個。 - 專案：每個專案一張卡片，以專案名稱為標題，以倉庫或展示頁為連結，用一句話說明其功能並附上數字（星數、安裝數、使用者數），並在獨立一行以行內程式碼技術標籤呈現，例如
`PHP` `Laravel`。 - 經歷：時間軸項目，使用「2023 — 至今」標籤、「職位, 公司」標題、一句話的影響說明並附上數字，以及技術標籤。
- 數據展示：一個
cards元素，使用figures版面配置，最多呈現三個關鍵數字。
無障礙
- 保留跳過連結、語意化標題、有標籤的模式切換按鈕以及可見的
:focus-visible外框。 - 在兩種色彩配置中維持 WCAG 2.2 AA 對比度，包括程式碼語法標記。
- 為封面圖片撰寫有意義的替代文字，並為名稱連結指出其目標，永遠不要使用「按這裡」。
內容
以第一人稱書寫，並用「你」來稱呼讀者。要具體：說出版本、數字與失誤。文章開頭直接點出問題，不要先講背景，結尾則說明你接下來會怎麼做。保持標題樸實且具描述性（例如「在 4 億列的資料表上實現零停機遷移」）。避免 buzzword、不要說「很簡單」、「只要」或填充性質的開場白。