Landing Page Builder
概述
一整套設計系統 + 元件庫，用於以純 HTML/CSS/JS 建立美觀且互動性強的登陸頁面 — 無需框架、無需建置步驟。內含可重用的 CSS 設計標記、JS 互動模式及 HTML 元件模板。
核心原則： 複製設計系統檔案，從元件模板組合區段，自訂標記。一切零依賴（選用：Google Fonts CDN）。
使用時機
- 建立產品登陸頁面、行銷網站或作品展示
- 建立包含互動元素的說明文件網站
- 部署到 GitHub Pages、Netlify 或任何靜態主機
- 需要深色/淺色主題切換、捲動動畫、工具提示
- 想要精緻設計，但不需要 React/Vue/建置工具
何時不該使用：
- 需要狀態管理的複雜網頁應用（請使用框架）
- 伺服器渲染的頁面（此為純靜態）
- 內部管理儀表板（殺雞用牛刀）
快速參考
| 元件 | 檔案 | 關鍵類別 |
|---|---|---|
| 設計標記 | design-system/design-system.css | :root 變數，--accent-*，--gradient-* |
| 導覽列 | components-reference.html | .navbar，.nav-links，.lang-toggle |
| 主視覺區 | components-reference.html | .hero，.hero-title，.gradient-text，.hero-stats |
| 功能卡片 | components-reference.html | .feature-grid，.feature-card，.reveal |
| 程式碼區塊 | components-reference.html | .code-block，.code-header，.code-copy |
| 工具提示 | components-reference.html | .tooltip-trigger，[data-tooltip] |
| 分頁 | components-reference.html | .tab-list，.tab-btn，.tab-panel |
| 主題切換 | design-system.css + app-template.js | [data-theme]，.icon-btn[data-toggle="theme"] |
| 語言按鈕 | design-system.css | .lang-toggle，.lang-btn[data-lang] |
| 捲動顯示 | app-template.js | .reveal → .visible 透過 IntersectionObserver |
| 多語言（i18n） | app-template.js | [data-i18n] + 翻譯字典 |
設計系統
design-system.css 提供了兩種主題的完整標記集。請根據您的品牌調整這些標記；如需更多細節，請參閱該檔案。
請參閱 design-system/design-system.css 以了解維護中的深色/淺色標記；請根據要求的品牌調整它們，而非在此維護第二份標記列表。
檔案
| 檔案 | 用途 |
|---|---|
design-system/design-system.css | 完整 CSS：標記、導覽列、主視覺區、卡片、程式碼區塊、工具提示、分頁、頁尾、響應式設計 |
design-system/app-template.js | JS：捲動顯示、導覽列滾動、程式碼複製、分頁、主題切換、行動選單、多語言（i18n） |
design-system/components-reference.html | 每個元件附有可複製貼上的 HTML 片段 |
templates/landing-template.html | 完整的入門模板 — 包含所有區段的線框 |
工具提示模式
工具提示在桌面（懸停）和行動/觸控（點擊切換）上皆可運作。需要 app-template.js 以支援觸控。
<!-- 向上開啟（預設） -->
<span class="tooltip-trigger" data-tooltip="這裡提供有用的說明">
懸停我
</span>
<!-- 向下開啟（適用於靠近頁面頂部的觸發元素） -->
<span class="tooltip-trigger tooltip-bottom" data-tooltip="說明">
懸停我
</span>
<!-- 用於較長文字的寬版變體（在行動裝置上會自動換行） -->
<span class="tooltip-trigger tooltip-wide" data-tooltip="更長的多行說明...">
懸停我
</span>
桌面： CSS :hover 顯示工具提示。行動/平板： JS 加入點擊切換，點擊外部可關閉。鍵盤： Tab 聚焦，Enter/Space 切換，Escape 關閉。
觸控和鍵盤路徑透過在觸發元素上切換 .tooltip-active 類別來運作。手寫的工具提示 CSS 必須同時設定
.tooltip-trigger:hover::after 和 .tooltip-trigger.tooltip-active::after 的樣式，否則點擊不會有任何效果 —
請在自行撰寫前閱讀 design-system/design-system.css 的第 10 節（工具提示）。
層疊排序： 工具提示透過在 .feature-card:hover、.code-block:hover 和
.callout:hover 上設定 z-index:10 來脫離其容器。請保留這些規則，並透過在子元素（如
.feature-card::before 所做的）上設定 border-radius 來裁剪圓角 — 在容器上設定 overflow:hidden 會裁剪工具提示，且沒有任何 z-index 能拯救它。
建置工作流程
- 複製
design-system.css、app-template.js和templates/landing-template.html（重新命名為index.html）到您的專案中 — 三個檔案放在同一目錄，因為模板使用裸檔案名稱連結它們 - 從
components-reference.html加入區段（功能、程式碼區塊、分頁、提示框、頁尾）到線框中 - 自訂
:root中的標記（顏色、字型、漸層） - 在 HTML 中加入內容，如果需要多語言，則設定
data-i18n鍵值 - 在本機測試 — 在瀏覽器中開啟
index.html，並逐一檢查下方常見錯誤表中的每一行；當每一行都檢查通過時，即完成 - 交付 驗證過的檔案。僅在要求時才部署，並使用雙方同意的主機和儲存庫工作流程。
部署到 GitHub Pages
當要求發布時，檢查現有的儲存庫和 Pages 設定，準備審核過的檔案，並遵循其部署工作流程。僅在獲得授權時才建立公開儲存庫或變更可見性。暫存已命名的輸出檔案，保留不相關的工作。在回報公開 URL 前，驗證已部署的修訂版本和即時內容；單單 HTTP 200 狀態碼並非視覺上的證明。
常見錯誤
| 錯誤 | 修正方式 |
|---|---|
| 缺少 meta viewport | 加入 <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
在 <html> 上遺漏 [data-theme] | 設定 <html data-theme="dark"> 作為預設主題 |
| 顯示元素不可見 | 確保 app-template.js 已載入，且 .reveal 有對應的 .visible 邏輯 |
| 顯示元素位於隱藏的分頁面板內 | 切換分頁時會自動重新觸發顯示；或從分頁內容中移除 .reveal |
| 工具提示在頂部被截斷 | 對於靠近視窗頂部的觸發元素，使用 .tooltip-bottom 變體 |
| 載入時主題閃爍 | 在 <head> 中加入行內 <script>，在渲染前從 localStorage.getItem('lp-theme') 讀取值並設定到 data-theme — templates/landing-template.html 中已有此程式碼 |
| 無 JavaScript 時內容不可見 | 在 <html> 上設定 class="no-js"，並加入 .no-js .reveal { opacity:1 } 作為後備方案 |
| 程式碼複製功能失效 | 檢查 .code-copy 按鈕是否存在，以及 JS 是否已載入 |
| 未樣式化內容閃爍 | 將字型 <link> 放在 <head> 中，且位於樣式表之前 |
| 缺少焦點樣式 | 所有互動元素都已內建 :focus-visible 外框 |
無障礙性
設計系統包含：
- 所有互動元素上的
:focus-visible外框（鍵盤導航） prefers-reduced-motion媒體查詢（停用動畫）.no-js後備方案（無 JavaScript 時內容仍可見）- 純圖示按鈕上的 ARIA 標籤
- 語意化的 HTML 結構（正確的標題層級）
- 主題對比標記；在自訂後、宣稱符合 WCAG 之前，請驗證對比度