03-buildlisted

# 階段三：建站 ## 動手之前先唸一次 avoid `spec/site.yaml` 的 `avoid` 是使用者明講「絕對不要」的東西，抄的是他的原話。 **排版之前唸一次，交出去之前再唸一次。** 這一項很容易被忽略，因為它講的是「不要做什麼」，不會主動跳出來提醒你。 實測的例子：「不要像購物網站那樣一格一格標價錢放購物車」—— 那句話直接否決掉用卡片格排服務項目的做法，要改用條列。 ## 先確認族，再談版面 `docs/families.md` 有七族：克制、訊號、圖鑑、霓虹街機、終端、粗獷、復古介面。 **族是性格，概念是骨架，兩件事分開。** 同一個概念可以做成不同族： 「工單」可以是克制的工程圖，也可以是粗獷的黑黃警示牌。 `templates/` 裡的骨架目前只覆蓋兩族（克制與訊號）。 **其餘五族沒有現成骨架，要照那一份的「關鍵手法」自己寫**， 每一族都附了色彩配方、動畫的性格、三到五個 CSS 層級的手法與參考站。 **族不對就整個重來，不要在錯的族裡調參數。** 一個做電音的人配上克制族，字距與留白調到死都不會對。 ## 概念夠強的時候，不要挑版面，用概念生一個 `templates/` 那五種是**沒有概念時的安全牌**。訪談問出了概念， 就照 `docs/concept.md` 的三個問題生一個新的： 1. **容器**：每個區塊被裝在什麼裡面（一片面板、一張圖紙、一格片格、一列欄位） 2. **重複單元**：內容清單怎麼排（一台設備、一個件號、一格底片、一次會談） 3. **分節**：區塊之間怎麼編號（U 數、圖號、底片編號、第幾次） `examples/` 裡那四個都是這樣生出來的，**沒有一個屬於那五種版面**： | 範例 | 容器 | 重複單元 | 分節 | |---|---|---|---| | 講師 | 一張圖紙加右下角標題欄 | 件號 M-01 | 圖號 DWG-01…05 | | 後端 | 一片 U 面板加一顆綠燈 | 一台設備 | U01…U05 | | 攝影 | 一格片格加邊碼 | 一格底片 230-014 | FRAME 036A…060 | | 諮商 | 一列「標籤｜內容」欄位 | 一次會談 | 單號 0001…0005 | **這條路的成本沒有比較高**，四份都是純 CSS，加起來不到兩百行版面樣式。 真正的成本在訪談有沒有問出概念。 生出來的東西要跟五種版面一樣通過 `tools/check.mjs`， 而且 `docs/craft.md` 那三條（破除置中、中文行高、標題不要負字距）一樣要遵守。 ## 沒有概念的時候才挑版面 `templates/` 裡有六種版面，**結構不一樣，不只是換顏色**。 開 `templates/preview.html` 可以一次看到，每一種都寫了適合誰。 | 版面 | 檔案 | 給誰 | |---|---|---| | 堆疊 | `stack.html` | 內容量中等到大。判斷不出來就用這個 | | 左右分屏 | `split.html` | 內容量中等、想要一點設計感。區塊超過六個就改用堆疊 | | 編號索引 | `editorial.html` | **內容少的人用這個最划算**，它靠結構撐場面不靠字數 | | 滿版出血 | `bleed.html` | **手上有好圖的人**。沒有圖不要選 | | 工控面板 | `console.html` | 製造業、自動化、工業軟體。**這是概念驅動的示範，不是通用版面** |