四頁小站的架法
一份設定檔長出整個網站。喜好歸喜好，工程歸工程。
這份文件講 mila-site 的架法。設計取捨（為什麼是水彩、為什麼有極光）在部落格那篇；這裡只談工程。
01架構總覽
Astro 靜態站，跑在 Cloudflare Pages 免費子網域，託管成本 0、網域成本 0。選 Astro 的理由很單純：預設零 JS、content collections 讓文章就是資料夾裡的 Markdown 檔、build 出來全是靜態檔案，沒有伺服器要顧。四頁的站，不需要更重的東西。
02一份設定檔長出整站樣式
整個站沒有任何一個顏色、字體寫死在元件裡。單一事實來源是一份 brand.json：色票、字體、深淺兩套模式、通路連結全在裡面。build 前一支腳本把它吐成 CSS variables 和 metadata，元件只認變數。
✦ 好處在改版時兌現 換色票、換字體、換 tagline，改一個 JSON 檔重 build 就完成。
這份骨架之後會泛化成模板：新品牌站等於一份新的 brand.json 加一個 content 目錄。
03深淺模式的工程做法
雙模式不是套個濾鏡。每個色票都有 light、dark 兩組值，連封面圖都是成對的兩張畫，瀏覽器只載當前模式那張。
狀態有三種：使用者手動選（data-theme 落在 html 上，存 localStorage）、跟隨系統（prefers-color-scheme）、以及 render 前的一段 inline script 先套主題，避免開頁閃白。
⚠ 最容易漏的地方 CSS 這邊每個主題規則都要寫兩個 selector，才能同時蓋住「手動選深色」與「跟隨系統」兩條路；只寫一個，切換按鈕和系統設定就會互相打架。
04i18n：四頁的站不值得上框架
中英雙語，/ 繁中、/en/ 英文。沒用任何 i18n 框架：兩語文案集中在一個字典檔，路由手刻，文章 frontmatter 標 lang 就能單語出刊。評估過框架，結論是四頁的站，框架的抽象比問題本身大。
那什麼時候才值得上？我的判斷線是三條，踩到任何一條就重新評估：
- 語言變三種以上。兩語是 if/else，三語開始是矩陣，字典檔會先撐不住。
- 路由多到手刻出錯。頁面一多，hreflang、sitemap、語言 fallback 這些機械事就該交給框架，人手維護遲早漏。
- 翻譯不再是一個人的事。要接翻譯流程、要 fallback 到預設語言、要追蹤哪篇還沒翻，那是框架的主場。
在那之前，每加一層抽象都是在替不存在的問題付利息。
05動效工程：讓極光跨頁活著
動效的目標只有一個：整站有極光的流動感。工程上三件事：
- 換頁用 View Transitions 柔接；背景極光層掛
transition:persist，換頁時元素原封不動延續，動畫不重啟。這個不加，每次換頁極光就閃斷一次。 - 捲動漸入用 IntersectionObserver，而且加了保險絲：2.5 秒內沒觸發就強制全部顯示。動效失效可以接受，內容隱形不可以。
prefers-reduced-motion一開，全部靜止。
✎ 動效的紀律 動態要慢要輕，一次只做一種隱喻（極光）。第一版背景疊彩色霧，參數上有動、視覺上等於零，砍掉重做才變成現在的光影。
06圖的管線
封面極光是生圖模型產的，風格靠錨點不靠運氣：每次生圖都附上自己的水彩畫當參考圖，配同一組風格詞，產出才會是同一家族。出門前一律用 PIL 重存，metadata 全清。生圖走訂閱額度、零 API 費，這條管線值得單獨寫一篇。