Logo拾光
    快速入门
    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
    主题
    新闻产品

    主题

    为 Fumadocs UI 添加主题

    avatar for Mkdirs模板
    Mkdirs模板
    2025/01/15
    国际化
    公司产品

    国际化

    在您的文档中支持多种语言

    avatar for MkSaaS模板
    MkSaaS模板
    2025/03/15

    邮件列表

    加入我们的社区

    订阅邮件列表,及时获取最新消息和更新