快速入门

快速开始

使用 Fumadocs MDX 开始：

Next.js

使用 Fumadocs MDX 与 Next.js。

React Router

使用 Fumadocs MDX 与 React Router 7 或更高版本。

Tanstack Start

使用 Fumadocs MDX 与 Tanstack Start/Router。

介绍

Fumadocs MDX 是一个工具，用于将内容转换为类型安全的数据，类似于 Content Collections。

它不是一个完整的 CMS，而是一个内容编译器 + 验证器，您可以使用它来处理博客文章和其他内容。

定义集合

Collection 指的是包含某种类型文件的集合。您可以在配置文件（source.config.ts）中定义集合。

Fumadocs MDX 将集合转换为类型安全的数据，可在您的应用中访问。可用集合：

将 Markdown 和 MDX 文件编译为 React Server Component，并带有有用的属性，如目录。

source.config.ts

import { defineCollections } from 'fumadocs-mdx/config';

export const test = defineCollections({
  type: 'doc',
  dir: 'content/docs',
});

将 YAML/JSON 文件转换为数据数组。

source.config.ts

import { defineCollections } from 'fumadocs-mdx/config';

export const test = defineCollections({
  type: 'meta',
  dir: 'content/docs',
});

meta 和 doc 集合的组合，这是 Fumadocs 所需的。

source.config.ts

import { defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  dir: 'content/docs',
  docs: {
    // options for `doc` collection
  },
  meta: {
    // options for `meta` collection
  },
});

例如，一个 doc 集合将转换 .md 和 .mdx 文件：

ui.md

hello.md

index.mdx

meta.json

访问集合

集合将被编译为 JavaScript 文件，您的应用可以访问，输出格式根据您使用的框架而异。

开始与您的框架一起了解更多。

常见问题

内置属性

这些属性默认从 MDX 文件导出。

属性	描述
`frontmatter`	Frontmatter
`toc`	目录
`structuredData`	结构化数据，有助于实现搜索
`extractedReferences`	用于分析 `hrefs` 引用

自定义 Frontmatter

使用 schema 选项传递验证 schema 来验证 frontmatter 并定义其输出属性。

自定义 MDX 编译器

Fumadocs MDX 使用 MDX Compiler 将 MDX 文件编译为 JavaScript 文件。默认预设开箱即用包含一组插件和配置。

您可以在全局配置或集合配置中自定义它。

Next.js

React Router

Tanstack Start

On this page