快速入门
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 组件和自动化操作的命令行工具,对于自定义布局很有用。
Want to learn more?
Read our in-depth What is Fumadocs introduction.
术语
Markdown/MDX: Markdown 是一种用于创建格式化文本的标记语言。 Fumadocs 开箱即用地支持 Markdown 和 MDX(Markdown 的超集)。
尽管不是必需的,但 Next.js App Router 的一些基本知识对于进一步的自定义很有用。
自动安装
需要最低版本的 Node.js 18,请注意,Node.js 23.1 可能会在 Next.js 生产构建中出现问题。
npm create fumadocs-apppnpm create fumadocs-appyarn create fumadocs-appbun create fumadocs-app它会询问您要使用的框架和内容源,应该初始化一个新的 fumadocs 应用程序。现在你可以开始黑客攻击了!
From Existing Codebase?
您可以按照【手动安装](/docs/manual-installation)指南】开始操作。
享受!
在 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
Fumadocs has some additional features for authoring content too.
Navigation
Learn how to customise navigation links/sidebar items.
内容来源
内容源处理您的所有内容,例如编译 Markdown 文件和验证 frontmatter。
阅读 简介 以了解它如何处理您的内容。
已包含 source.config.ts 配置文件,您可以自定义不同的选项,例如 frontmatter 架构。
Fumadocs 不是 Markdown 独有的。对于 Sanity 等其他来源,您可以构建自定义内容源。
自定义 UI
参见【定制指南](/docs/customisation)。
常见问题解答
您可能会遇到的一些常见问题。
视频教程
了解更多
新来这儿吗?别担心,我们欢迎您提出问题。
如果您发现任何困惑,请在 Github 讨论 上提供反馈!
AI Magic 3D文档