明心展覽

問題

2026 年，哈佛 CAMLab 與慈濟基金會合辦一檔佛教文化藝術沉浸式展覽，5 月 10 日在花蓮開展，8 月 1 日起在高雄增設第二個展場，兩地展期重疊。展覽需要一個對外官網：八大主題、各展場的觀展須知、影音專區和常見問題。設計稿在 Figma 上，而且改了好幾個月；票券優惠期間、導覽場次和展場資訊在展覽開幕後仍持續調整。

我做了什麼

一個 11 頁的靜態網站：首頁、兩個展場的觀展須知頁、八個主題頁，每一頁都依各自的 Figma frame 手工還原。全站只用 HTML、CSS 和原生 JavaScript，沒有框架、沒有 package.json，也沒有建置步驟。Figma 的色彩與字級 token 集中在唯一一支 stylesheet。GitLab pipeline 負責複製檔案並部署到 Cloudflare Pages。

運作方式

• 頁面本身不寫外框。 每個 HTML 檔只有 <head> 與 <main>。一支 218 行的 components.js 依網址路徑判斷頁面類型，在執行時注入導覽列、主題下拉選單、手機版泡泡選單、麵包屑、頁尾和浮動按鈕。調整導覽列下拉選單、手機版選單或麵包屑，只要改一個陣列，不必動 11 個檔案。
• 首頁影片走 HLS 串流。 透過 hls.js 播放 Cloudflare Stream 的 manifest，解析完成後直接切到最高畫質；Safari 則使用原生 HLS。
• 沒有打包工具也能破快取。 CI 替資源網址加上版本參數，再由 _headers 送出 no-cache，文案一改，訪客馬上看到。

關鍵決策

• 不要建置步驟。 這個網站大多是跟著 Figma 走的文案。純檔案讓每次修改都是一個小 diff，也沒有相依套件要升級。
• 外框在執行時注入，而不是用樣板。 沒有建置工具，一支依網址路徑判斷的腳本是讓導覽只維護一份最簡單的做法。它是從原本複製貼上到每一頁的 markup 抽出來的。
• 展期中先記錄陷阱，不急著重構。 主題頁的手機版版面靠 64 條比對 inline style 字串的 CSS 規則撐著；展覽日期散在四個地方，還用了三種不同的破折號。展覽進行中動這些，風險比寫下來更高。所以我用 CLAUDE.md 逐條記錄我發現的這類陷阱，並設一個 Stop hook，在它有變動時自動 commit。

成果

2026 年春天上線至今仍在維護。網站由我開發；展覽本身屬於哈佛 CAMLab 與慈濟基金會。整個網站用 Claude Code 開發，首頁與主題頁走 spec → plan → implement 的流程，之後是隨 Figma 稿與展場資訊變動而來的小幅文案與版面調整。