兄弟們，前兩天我們搞定了帳號中心 (Day 15) 和自動更新機制 (Day 16)，解決了「維護」的問題。但對於任何軟體來說，最大的摩擦力永遠來自於「操作」。
一、 為什麼你的 SaaS 需要一個專屬的「知識庫」？
當 GutenPress AI 的核心引擎都上線後，我們馬上撞上營運的現實面：操作型客訴。
WordPress 的 FSE (全站編輯器) 雖然神，但對習慣傳統頁面編輯器的使用者來說，還是有學習曲線。如果沒有官方教學，開發團隊很快就會被「字體怎麼改？」、「金鑰去哪輸入？」這種低價值問題給淹沒。
靠 Email 或即時客服成本太高，也無法滿足現代人「隨選隨查 (On-Demand)」的習慣。所以 Day 17 我們把研發火力全開，專注打造一個 /docs 知識庫中心。
一個設計優良的 Knowledge Base，對 SaaS 來說有雙重價值：
- 防禦面 (Customer Success)：預先解答常見問題，攔下 80% 以上的操作型工單，死守營運成本。
- 攻擊面 (Marketing & SEO)：公開的教學文件就是最棒的內容行銷素材，用來捕捉 Google 上的長尾關鍵字，吸入高轉換率的精準流量。
二、 技術實踐：輕量化、無依賴的 Next.js Markdown 渲染系統
蓋 Docs Hub 的技術選項很多，不少團隊會用 GitBook 或 Notion，但這會讓網域分散 (像是 docs.gutenpress.cc)，還會犧牲品牌視覺。另一個選項是上龐大的 next-mdx-remote 套件。
但為了極致效能和無縫體驗，我們決定：原生打造。
1. 資料結構與靜態生成 (SSG)
我們把所有分類和文章內容抽離成純 TypeScript 資料結構 (src/lib/docs-data.ts)，完全不用架肥大的 Headless CMS。
export const docArticles: DocArticle[] = [
{
slug: "quick-start-guide",
title: "GutenPress AI 快速入門指南",
categoryId: "getting-started",
excerpt: "只需三個步驟，即可將 AI 生成的佈景主題安裝到您的 WordPress 網站上。",
content: "## 歡迎使用 GutenPress AI！\n..."
}
];
搭配 Next.js 的 generateStaticParams，所有文件頁面在 npm run build 時就被預先編譯成純靜態 HTML。這讓 TTFB (Time to First Byte) 穩穩壓在 50 毫秒內，載入速度快到像鬼，Google 的 Core Web Vitals 絕對給過。
2. 特製的 Markdown 解析器
為了不加多餘的依賴包，我們直接用 Regex 尻了一個輕量級轉換器。它能精準解析標題、程式碼區塊跟清單，還自動把它們包進 Tailwind CSS 的自訂樣式裡：
function parseMarkdown(text: string) {
let html = text
.replace(/^## (.*$)/gim, '<h2 className="text-3xl font-bold mt-12 mb-6 text-zinc-100">$1</h2>')
.replace(/^\> \*\*(.*?)\*\*(.*$)/gim, '<blockquote className="bg-red-500/10 border-l-4 border-red-500 p-4">$1$2</blockquote>');
// ...
return html;
}
這樣一來，所有文件的排版都能跟 GutenPress AI 原生的 Dark Mode 無縫接軌，閱讀體驗絲滑無比。
三、 內容佈局策略：從使用者旅程出發
在 /docs 首頁，我們捨棄了傳統的「條列式目錄」，改用直覺的卡片式導覽架構，將內容精煉為三大核心：
- 🚀 開始使用 (Getting Started)：搞定 Onboarding 痛點，像主題上傳、外掛設定。
- 🎨 客製化教學 (Customization)：針對 FSE 編輯器的進階玩法，全域色彩替換、樣板編輯。
- 🔑 授權與帳號 (License & Billing)：配合 Day 15 的自助管理中心，教大家怎麼自己解綁網域。
靠著視覺化圖示和明確分類，就算是技術麻瓜也能一眼找到答案，大幅降低初期的挫折感。
結論：用 Docs 建立你的 SaaS 護城河
很多人覺得寫文件是最無聊的屎缺，但其實文件是產品跟使用者對話最直接的橋樑。Day 17 砸時間搞這套 Knowledge Base，不只是為了解決眼前的客服壓力，更是為了長線的商業價值。
每一篇優質的教學文，都是撒在網路上的探測器，默默從 Google 幫我們吸入精準的潛在客戶。把教育訓練自動化，把操作指南變成 SEO 流量池。當你的產品具備了自我解釋的能力，你的 SaaS 才真正擁有了無限擴展的規模化潛力。兄弟們，繼續幹！
0 Comments