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元素；一個使用list佈局、標題為「近期文章」的blog元素；兩欄的專案cards；以及一個用於聯絡的cta元素。 - 文章頁（
page）：一段關於你寫作內容的簡短說明，以及一個以此頁為父頁面的所有文章的blog列表。 - 文章（
blog）位於文章頁之下，按最新到最舊排序。每篇文章以一個article元素（標題、兩句引言和封面圖片）開頭，後面接著text、二級heading和code元素。 - 關於我、專案、使用和現在頁面（
page）以一級heading開頭。關於我包含一個vertical工作經歷時間軸；使用頁按類別列出工具；現在頁說明你這個月的動態，並附上最後更新日期。 - 在首頁上填寫
folio::profile配置：姓名、職稱、公司、地點、方形照片、一句話自我介紹、電子郵件地址和個人檔案連結。
元件
- 文章引言：兩句話，說明問題以及讀者能獲得什麼。列表卡片使用它作為介紹。
- 標題：簡短、具體的二級標題（例如「批次回填」）；三級標題僅位於二級標題之下。至少使用兩個二級標題，以便顯示文章大綱。
- 程式碼：每個片段一個
code元素，並設定語言，最多約 15 行，真實且可執行。 - 提示框：在
text元素中使用 GitHub 提示（[!NOTE]、[!TIP]、[!WARNING]），每篇文章最多一或兩個。 - 專案：每個專案一個卡片，以專案名稱作為標題，連結到儲存庫或展示網站，用一句話搭配數字（星數、安裝量、使用者）說明它的功能，並在獨立的一行中以 inline code 膠囊顯示技術棧，例如
`PHP` `Laravel`。 - 經歷：時間軸項目，標籤格式為「2023 — 現在」，標題格式為「職位, 公司」，一句話描述影響並包含數字，以及以 code 膠囊顯示的技術棧。
- 數字重點：一個使用
figures佈局的cards元素，最多顯示三個關鍵數字。
無障礙性
- 保留跳過連結、語義標題、有標籤的模式切換開關以及可見的
:focus-visible外框。 - 在兩種色彩方案（包括程式碼 token）中保持 WCAG 2.2 AA 對比度。
- 為封面圖片編寫有意義的替代文字，並在連結目標後方加上名稱連結，切勿使用「點擊這裡」。
內容
以第一人稱書寫，並以「你」稱呼讀者。具體明確：寫出版本、數字和錯誤。以問題開頭，而非背景，並在結尾說明你接下來會怎麼做。保持標題樸實且描述性強（例如「在 4 億行資料表上實現零停機遷移」）。避免用語流行詞、「簡單來說」、「只需」以及填充性開場白。