當古老節氣遇上雲端腳本：一場回歸簡約的數位工藝實踐

 

引言：從內容管理的焦慮中解放

在數位創作的領域，最耗損靈魂的往往不是美學的追求，而是維護後台的瑣碎。每當需要更新一個日期、替換一張圖片，創作者總得在臃腫的網站後台與複雜的資料庫間掙扎。這種技術門檻，常讓美好的創意淹沒在繁瑣的行政勞動中。

然而，真正的「數位工藝」追求的是一種優雅的簡約。想像一下，將我們最熟悉的 Google 試算表轉化為網站的靈魂，讓更新內容變得像填寫表格一樣直覺。這不只是技術方案的選擇，更是一種將創作者從資料庫束縛中解放的生命哲學。今天，我們將以「24 節氣」為題，探索如何透過雲端工具，親手雕琢出一個充滿溫度的數位曆法。

成果展示 :

https://the-solar-terms.netlify.app/ or https://willhsieh28.github.io/the-solar-terms/

核心觀點一：試算表即後台，實現「瞬間同步」的魔法

在這個專案中，Google Sheets 不再只是資料處理工具，而是扮演了「無頭 CMS」（Headless CMS）的角色。透過分頁（如 2025、2026 等）的系統化管理，使用者能輕鬆掌控不同年度的文化資訊。

表格中的每一列都承載著文化的重量，包含節氣名稱、西元日期、民國年份、農曆日期、節氣描述，以及細膩的視覺圖片。這種「內容即數據」的模式，讓資訊的更迭變得輕盈：

Google 試算表就是你的網站後台，只需要打開 Google Sheets 修改。回到網頁刷新，內容瞬間同步更新！值得注意的是，這種同步並非在前端顯示「更新中」的生硬狀態。當資料更動時，網站已在背景完成銜接。這種「隱形魔法」讓讀者在刷新頁面時，感受不到技術的運作，只見內容的自然流轉。

核心觀點二：AI 協作的新範式——Gemini Pro + Canvas 的深度運用

在開發流程中，我們引入了 Gemini Pro 與 Canvas 工具，這並非單純的自動化生成，而是一場「AI 提案、人類微調」的共創實驗。這種模式更能確保每一行代碼都具備創作者的溫度。

修正網頁顯示細節實作中有一條至關重要的原則：切勿要求 AI 直接重寫整個 index.html。 全盤重寫往往會導致功能邏輯的遺失或冗餘。更優雅的做法是，針對細節（例如節氣標題的字體、間距或動畫時間）向 AI 詢問修改建議，接著手動在 Canvas 環境中進行精確校正。這種「數位木作」般的精細打磨，能確保網站既具備技術穩定性，又符合創作者的審美直覺。

核心觀點三：數位工藝美學——垂直書寫與動態紅印章

技術不應只是功能的堆砌，更應是文化的載體。為了讓 24 節氣在螢幕上重現東方墨香，網站設計注入了多項美學要素：

• 垂直書寫的韻律：節氣名稱採用傳統直排顯示，並搭配優雅的進場動畫，營造出時光流轉的儀式感。

• 動態生成紅印章：在節氣名稱下方，系統會自動生成一個紅色圓形印章。這抹金石之美並非靜態圖片，而是透過代碼即時演繹。

• 跨越時空的曆法：同時呈現西元與民國年份，滿足不同語境下的文化需求。

• 光影隨心的介面：提供「太陽/月亮」圖示進行手動切換，預設則體貼地連動瀏覽器的淺色或深色模式。

這些細節將古老的曆法轉化為現代人觸手可及的數位工藝，讓技術在傳承文化的過程中展現韌性。

核心觀點四：專業級的零成本開發工具鏈

透過當代的數位工具鏈，我們可以在零預算的基礎上，構建出具備 RWD 響應式適配的專業網站。以下是此模式與傳統開發的效率差異對比：

維度	傳統開發方式	數位工藝推薦方式
內容管理	需部署 CMS 系統與資料庫	Google Sheets (直覺且免費)
本地預覽	雙擊檔案常受 file:// 協議限制	VS Code Live Server (Ritwick Dey 開發)
圖片託管	租用付費雲端儲存空間	GitHub (透過 raw 網址存取，最好 2MB 內。提供夠用的免費額度)
雲端部署	購買主機與繁瑣網域設定	Netlify (一鍵發布，提供免費網域)

專業提示： 若要確保網站載入順暢，圖片應存放在 GitHub 倉庫並透過 raw.githubusercontent.com 取得路徑，且單張圖片大小建議控制在 2MB 以內，以達到最佳效能。

結語：從消費者轉向創造者

當 Google Sheets 的嚴謹遇上 AI 的靈動，我們看見了數位創作的新可能。這場實踐證明，一個簡單的試算表若能被賦予工藝精神，同樣能撐起一個充滿文化底蘊的數位空間。

這不禁讓我們思考：在資訊氾濫的當下，如果一個試算表就能承載起如此精緻的生活碎片，下一個被你數位化、並注入個人美感的日常片段會是什麼？你是否也準備好拿起這些數位工具，從內容的消費者，正式轉身為數位世界的創造者？

附錄A：核心設計提示詞 (Prompt)

24 節氣曆法網站開發指令：

1. 後台邏輯： 以 Google 試算表作為網站無頭 CMS。當試算表內容更新後，重新整理網頁需能瞬間同步最新資訊。

2. 資料結構要求：

  * 分頁名稱為年份（如 2025、2026）。

  * 欄位結構：節氣、西元日期、農曆（必須以繁體中文表示）、介紹、圖片網址。

3. 核心功能清單：

  * 年份選擇： 同時顯示西元與民國年份。依選取年份自動讀取對應名稱的試算表分頁。

  * 導覽機制： 具備 24 節氣快速切換按鈕。

  * 視覺表現： 節氣名稱採垂直書寫，具備進場動畫；下方需以代碼動態生成「紅色圓形印章」。

  * 顯示內容： 呈現繁體中文農曆日期、西元日期、文字介紹與配圖。

  * 深淺模式： 提供「太陽/月亮」切換圖示，預設與瀏覽器深淺色設定連動。

4. 技術部署： 生成單一 index.html 檔案（含 HTML, CSS, JavaScript），並確保具備完善的 RWD 響應式適配。

附錄B：設計方法

1. 先將 Google 試算表內的資料表內容準備好。圖片使用 GitHub 託管：如果圖片是靜態的，放在 GitHub 倉庫並使用 raw.githubusercontent.com，圖片大小最好不要超過2M。GitHub 使用方法詢問 gemini 快捷。

2. 開啟 gemini pro + Canvas 工具，用提示詞進行網站設計。會產生 index.html 與 程式碼.gs。

3. 因為 Canvas 工具比較適合設計網站功能，修正網頁顯示細節另用其他方法修正，故將程式碼另存成 index.html。

4. 修正網頁顯示細節可另開一個 gemini pro，上傳 index.html 。問法是”如何修改圖片上的"節氣"文字大小、字體等。回到剛剛 gemini pro + Canvas 自己找到程式碼中的位置修改，預覽會直接呈現效果。問法最好不要讓 gemini 直接修改 index.html 來達到你要的效果，效果不彰。[ 也可以用 Antigravity (用Gemini 3.1 Pro (High)) 直接修改 index.html 來修正網頁顯示細節，效果也不錯。 ]

5. 另外，如果要將GAS的網頁應用程式，讓 gemini pro 改成單一index.html。除了上傳google sheet 外，最好在上傳裡面的 程式碼.gs 與 index.html，否則有時候 gemini 會發生內容讀取不全的情況。

6. 使用 VS Code 的 Live Server 套件可以為網頁開發建立一個本機伺服器（Local Server），解決直接雙擊 HTML 檔案時產生的 file:// 協議限制，並提供存檔即時預覽的功能。

7. 將 "程式碼.gs" 放到 Google 試算表內，並部署成 GAS 的網頁應用程式。

8. 最後，將 index.html 部署至 netlify or github page。