内容集合

Content Collections 是一个将您的内容转换为类型安全的数据集合的库。

设置

按照他们的官方指南为您的 React 框架设置 Content Collections。

确保已配置 MDX：

npm i @content-collections/mdx

要与 Fumadocs 集成，请将以下内容添加到您的 content-collections.ts 中。

content-collections.ts

import { defineCollection, defineConfig } from '@content-collections/core';
import {
  frontmatterSchema,
  metaSchema,
  transformMDX,
} from '@fumadocs/content-collections/configuration';

const docs = defineCollection({
  name: 'docs',
  directory: 'content/docs',
  include: '**/*.mdx',
  schema: frontmatterSchema,
  transform: transformMDX,
});

const metas = defineCollection({
  name: 'meta',
  directory: 'content/docs',
  include: '**/meta.json',
  parser: 'json',
  schema: metaSchema,
});

export default defineConfig({
  collections: [docs, metas],
});

然后将其传递给 loader()。

lib/source.ts

import { allDocs, allMetas } from 'content-collections';
import { loader } from 'fumadocs-core/source';
import { createMDXSource } from '@fumadocs/content-collections';

export const source = loader({
  baseUrl: '/docs',
  source: createMDXSource(allDocs, allMetas),
});

完成！您可以从 Source API 访问页面和生成的页面树。

import { getPage } from '@/lib/source';

const page = getPage(slugs);

// MDX 输出
page?.data.body;

// 目录
page?.data.toc;

// 结构化数据，用于 Search API
page?.data.structuredData;

MDX 选项

您可以在 transformMDX 函数中自定义 MDX 选项。

import { defineCollection } from '@content-collections/core';
import { transformMDX } from '@fumadocs/content-collections/configuration';

const docs = defineCollection({
  transform: (document, context) =>
    transformMDX(document, context, {
      // 此处选项
    }),
});

导入组件

要使用来自其他包（如 Fumadocs UI）的组件，请将它们传递给您的 <MDXContent /> 组件。

import { MDXContent } from '@content-collections/mdx/react';
import { getMDXComponents } from '@/mdx-components';

return <MDXContent code={page.data.body} components={getMDXComponents()} />;

您也可以在 MDX 文件中导入它们，但不推荐这样做。

深入探讨：为什么？

Content Collections 使用 mdx-bundler 来打包 MDX 文件。

为了支持从 node_modules 导入包，Fumadocs 为 MDX Bundler 的 cwd 选项添加了默认值。它工作良好，但我们仍然不推荐在 MDX 文件中导入组件。

原因：

它要求 esbuild 来打包这些组件，而这本应由框架的打包器完成（例如 Vite 或 Turbopack）
您可以重构组件的导入路径，而无需更改您的 MDX 文件。
使用 Remote Sources 时，在 MDX 文件中添加导入没有意义。

设置

MDX 选项

导入组件

On this page