🏮 #71 成語填空大挑戰 v1.3.1：Neon Heritage 霓虹古韻 UI + 國樂背景 + 櫻花特效 + Firebase 全球排行榜
#71「成語填空大挑戰 (TypeTC) v1.3.1」是 [#22 成語填空遊戲](/blog/idiom-22-fill-blank-game) 的進階版。Vite + Vanilla JS + Tailwind + **Neon Heritage（Red/Gold Theme）+ Glassmorphism「霓虹古韻」視覺** + 隨機**國樂背景音樂** + **櫻花落下特效** + Firebase Firestore 全球排行榜 + 2026-03-06 API Key 零洩漏規範。
#71 跟 #22 是進階版
阿凱成語工具家族：
| 維度 | #22 成語填空遊戲 | #71 成語填空大挑戰（本篇） |
|---|---|---|
| 部署 | XOOPS 校網 VM | GitHub Pages cagoooo/typeTC |
| 程式碼 | 純單檔 HTML | Vite + Vanilla JS + Tailwind |
| 視覺 | Tailwind 一般 | Neon Heritage 霓虹古韻（Red/Gold + Glassmorphism） |
| 音效 | 無 | 隨機國樂背景音樂 |
| 特效 | 無 | 櫻花落下 + 大氣氛圍 |
| 排行榜 | 無 | Firebase Firestore 全球排行榜 |
| PWA | 無 | PWA 支援 + 離線啟動 |
| 安全 | - | 2026-03-06 API Key 零洩漏規範 |
#71 真實怎麼做？
真實標題：「成語填空大挑戰 (TypeTC)」
完整功能（v1.3.1）：
功能 A：互動學習
- 隨機成語挖空強化記憶
- 跟 #22 同款核心機制
功能 B：全域排行榜
- 與全球玩家競爭
- 即時更新榮譽榜
- 用 Firebase Firestore（Anonymous Auth，不需註冊）
功能 C：霓虹古韻視覺（神細節）
- Neon Heritage (Red/Gold Theme)
- Glassmorphism 毛玻璃
- 「融合現代與東方美學」
- RWD 響應式
功能 D：大氣氛圍（v1.3.1）
- 隨機國樂背景音樂
- 櫻花落下特效
- 「體驗如原生 App」
功能 E：PWA 支援
- 離線啟動
- 加入手機主畫面
功能 F：安全防護（重要！）
- 2026-03-06 API Key 零洩漏規範
- 佔位符機制：
index.html用__PLACEHOLDER__不含真實 API Key - 祕鑰注入：GitHub Secrets +
.github/inject.py部署階段注入
真實技術棧
- 核心：Vite + Vanilla JS + Tailwind CSS（沒用 React）
- 視覺設計：Neon Heritage (Red/Gold Theme) + Glassmorphism
- 後端：Firebase Firestore（Anonymous Auth）
- 部署：GitHub Actions + GitHub Pages
- repo：
cagoooo/typeTC
為什麼選「霓虹古韻」這個視覺定位？
Neon Heritage = 「霓虹現代 + 東方傳承」：
- ✅ 紅金配色 → 傳統廟宇 / 春節
- ✅ Glassmorphism 半透明 → 現代化
- ✅ 國樂背景 → 古典氛圍
- ✅ 櫻花落下 → 東方美學
對「成語」這 use case 完美 — 成語本身就是傳統文化的現代化呈現，視覺呼應主題。
跟 #70 中打 Pro 是姊妹工具
兩個工具 repo 都用 type* 命名：
- #70
typeCC= Zhuyin Challenge Classic（中打挑戰） - #71
typeTC= Type Chengyu（成語）
阿凱「寫一次基礎模組 → 換主題複製做不同工具」的策略再 +1 案例。
API Key 零洩漏規範（值得學的工程紀律）
從 README 看到阿凱 2026-03-06 訂的內部規範：
- 佔位符機制：
index.html中不含真實 API Key，用__PLACEHOLDER__格式 - 祕鑰注入：透過 GitHub Secrets 結合
.github/inject.py於部署階段注入真實值
→ 不會把 API Key commit 到 repo 內，即使工具是 public repo 也安全。
跟我之前寫過的 #7 點石成金 Gemini API Key 安全 同款思路。
教學情境
國語高年級成語單元：
- 上完課堂成語教學 → 用 #71 鞏固
- 學生看「Neon Heritage 視覺」覺得「成語也可以這麼酷」
- 比看課本好玩 100 倍
早自習語文素養：
- 全班同時挑戰 #71
- 國樂背景 → 教室氛圍寧靜不吵
- 看誰登榮譽榜
期末班級成語王挑戰：
- 全球排行榜 PK
- 班內最高分頒「班級成語王」
家長親子：
- 中秋 / 春節傳統節日陪小孩玩
- 邊玩邊講成語典故
- 櫻花特效 + 國樂很有節日氛圍
配對工具推薦
- #22 成語填空遊戲 — 早期 XOOPS VM 版
- #70 中文注音打字 Pro — 姊妹中打版
- #79 漢語新解 — AI 諷刺式新解
適用對象
- 國小高年級 / 國中國文老師
- 語文競賽選手培訓
- 想做「東方美學 web app」的開發者
- 想學「API Key 零洩漏規範 + inject.py 注入」的工程師
想試試？
打開 → 配上隨機國樂背景音樂 → 看櫻花落下 → 挑戰全球榮譽榜 — 這比 Kahoot 有質感 10 倍。