
快速入门
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
请参阅 自定义指南。
常见问题
您可能遇到的一些常见问题。
了解更多
刚来这里?别担心,我们欢迎您的问题。
More Posts
Newsletter
Join the community
Subscribe to our newsletter for the latest news and updates