Powei Lee

FAQ 功能測試範例

2025年11月18日 ｜3 分鐘閱讀 ｜ Drafted by Claude Code ｜ 草稿 ｜測試｜FAQ｜SEO

關於這篇測試文章

這是一篇專門用來展示 FAQ（常見問題）功能的測試文章。透過這個範例，你可以看到：

  • 互動式問答：點擊問題展開/收合答案
  • 品牌設計整合：使用設計代幣的顏色與排版
  • HTML 格式化：答案支援粗體、程式碼、連結等標籤
  • 深色模式支援：自動適應 Flow/Drain 主題
  • SEO 優化：自動生成 FAQPage JSON-LD

設計特點

1. 原生 HTML 實作

FAQ 使用 <details> 和 <summary> 標籤，這是 HTML5 原生支援的互動元素，不需要額外的 JavaScript。這帶來幾個好處：

  • 效能優異：無需載入額外腳本
  • 可訪問性：螢幕閱讀器完全支援
  • 語意化：符合 HTML 標準，SEO 友善

2. 動畫與互動

當你點擊問題時：

  • 圖示會旋轉 180 度（CSS transition）
  • 邊框顏色變為品牌色
  • 答案平滑展開

3. 響應式設計

FAQ 在不同螢幕尺寸都有良好體驗：

  • 桌面版：標準間距與字體大小
  • 行動版：自動調整 padding 與 font-size

技術實作

FAQ 功能包含三個主要部分：

Schema 定義 (Content Collections)

faq: z.array(z.object({
  question: z.string(),
  answer: z.string(),
})).optional()

FAQ 元件 (Astro Component)

使用 Astro 元件渲染 HTML，內建 CSS scoped styles。

JSON-LD 生成

自動生成 FAQPage 結構化資料：

{
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "問題",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "答案"
      }
    }
  ]
}

使用情境

FAQ 特別適合以下類型的文章：

  1. 教學文章：解答讀者常見疑問
  2. 產品介紹：說明功能與使用方式
  3. 技術文檔：troubleshooting 與 Q&A
  4. 心得分享：回答讀者可能的問題

測試檢查清單

如果你正在檢視這篇測試文章，請確認：

  • FAQ 區塊顯示在文章內容之後
  • 點擊問題可以展開/收合答案
  • 滑鼠懸停時邊框顏色改變
  • 答案中的 HTML 標籤正確渲染（粗體、程式碼、連結）
  • 深色模式切換時樣式正確
  • 行動裝置上排版良好

總結

FAQ 功能為部落格帶來更好的使用者體驗與 SEO 表現。透過結構化的問答，讀者可以快速找到所需資訊，同時提升 Google 搜尋的能見度。

向下捲動查看完整的 FAQ 區塊展示！ 👇

常見問題

FAQ 功能如何運作？
FAQ 使用 HTML <details> 和 <summary> 標籤實作互動式摺疊。點擊問題即可展開/收合答案，無需 JavaScript，完全使用原生 HTML 實現。

FAQ 對 SEO 有什麼幫助？
系統會自動生成 FAQPage JSON-LD 結構化資料，讓 Google 能在搜尋結果中顯示 FAQ Rich Results，提升點擊率與搜尋排名。

答案可以使用什麼格式？
答案支援 HTML 標籤，包含：
粗體文字（<strong>）
程式碼（<code>）
超連結（<a>）
換行（<br>）等。

如何快速生成 FAQ？
使用 Claude Code 指令 /blog-add-faq，AI 會分析文章內容，自動提出 3-5 個適合的問題與答案。支援 4 種文章類型模板：技術工具、心得分享、教學指南、專案紀錄。

FAQ 會影響現有文章嗎？
不會。FAQ 是選用功能，只在 frontmatter 包含 faq 欄位時才會顯示。既有文章無需修改，完全向後兼容。

FAQ 樣式支援深色模式嗎？
是的！FAQ 元件完全整合品牌設計系統，使用 CSS 變數（Design Tokens），自動適應 Flow（淺色）和 Drain（深色）主題，確保視覺一致性。