
快速入門
Fumadocs 入門指南
介紹
Fumadocs (Foo-ma docs) 是一個基於 Next.js 的文件框架,設計為快速、靈活, 並無縫整合到 Next.js App Router 中。
Fumadocs 由不同部分組成:
Fumadocs Core
處理大部分邏輯,包括文件搜尋、內容來源適配器和 Markdown 擴充功能。
Fumadocs UI
Fumadocs 的預設主題為文件網站提供了美觀的外觀和互動式元件。
Content Source
你內容的來源,可以是 CMS 或本地資料層,如 Content Collections 和 Fumadocs MDX,即官方內容來源。
Fumadocs CLI
一個命令列工具,用於安裝 UI 元件和自動化操作,對於自訂佈局非常有用。
想了解更多?
閱讀我們深入的 什麼是 Fumadocs 介紹。
術語
Markdown/MDX: Markdown 是一種用於建立格式化文字的標記語言。Fumadocs 預設支援 Markdown 和 MDX(Markdown 的超集)。
雖然不是必需的,但對 Next.js App Router 的基本了解對於進一步的自訂會很有幫助。
自動安裝
需要 Node.js 18 或更高版本,請注意 Node.js 23.1 可能在 Next.js 正式環境建置中存在問題。
npm create fumadocs-app
pnpm create fumadocs-app
yarn create fumadocs-app
bun create fumadocs-app
它會詢問你要使用的框架和內容來源,隨後將初始化一個新的 fumadocs 應用程式。現在你可以開始動手了!
從現有程式碼庫開始?
你可以按照 手動安裝 指南開始。
盡情使用!
在 docs 資料夾中建立你的第一個 MDX 檔案。
---
title: Hello World
---
## Yo what's up
在開發模式下執行應用程式並查看 http://localhost:3000/docs。
npm run dev
探索
在專案中,你可以看到:
lib/source.ts
:內容來源適配器的程式碼,loader()
提供了與內容來源互動的介面,並為你的頁面分配 URL。app/layout.config.tsx
:佈局的共享選項,可選但建議保留。
路由 | 描述 |
---|---|
app/(home) | 你的首頁和其他頁面的路由群組。 |
app/docs | 文件佈局和頁面。 |
app/api/search/route.ts | 搜尋的路由處理器。 |
撰寫內容
對於撰寫文件,請務必閱讀:
內容來源
內容來源處理你的所有內容,例如編譯 Markdown 檔案和驗證前言。
閱讀 介紹 了解它如何處理你的內容。
專案中已包含 source.config.ts
設定檔,你可以自訂不同的選項,如前言架構。
Fumadocs 不僅限於 Markdown。對於其他來源(如 Sanity),你可以建置 自訂內容來源。
自訂 UI
請參閱 自訂指南。
常見問題
你可能遇到的一些常見問題。
了解更多
剛來這裡?別擔心,我們歡迎你的問題。
如果你發現任何令人困惑的地方,請在 Github Discussion 上給我們回饋!
更多文章
電子報
加入我們的社群
訂閱電子報,即時獲得最新消息和更新