Formion LogoFormion
快速入門
2025/03/28

快速入門

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 文件。

content/docs/index.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

Fumadocs 還有一些額外的內容創作功能。

Navigation

瞭解如何自定義導航鏈接/側邊欄項目。

內容源

內容源處理您的所有內容,例如編譯 Markdown 文件和驗證前言。

閱讀 介紹 瞭解它如何處理您的內容。

項目中已包含 source.config.ts 配置文件,您可以自定義不同的選項,如前言模式。

Fumadocs 不僅限於 Markdown。對於其他源(如 Sanity),您可以構建 自定義內容源。

自定義 UI

請參閱 自定義指南。

常見問題

您可能遇到的一些常見問題。

瞭解更多

剛來這裡?別擔心,我們歡迎您的問題。

全部文章

作者

avatar for MkSaaS模板
MkSaaS模板

分類

  • 公司
  • 新聞
簡介術語自動安裝盡情使用!探索編寫內容內容源自定義 UI常見問題瞭解更多

更多文章

對比
公司新聞

對比

Fumadocs 與其他現有框架有何不同?

avatar for Fox
Fox
2025/03/22
國際化
公司產品

國際化

在您的文檔中支持多種語言

avatar for MkSaaS模板
MkSaaS模板
2025/03/15
主題
新聞產品

主題

為 Fumadocs UI 添加主題

avatar for Mkdirs模板
Mkdirs模板
2025/01/15

郵件列表

加入我們的社區

訂閱郵件列表,及時獲取最新消息和更新

Formion LogoFormion

讓組織運作結構化的引擎 —— Form the System. Formula the Status.

© 2026 Formion. All Rights Reserved.