内容包含

Fumadocs MDX 提供 <include> 标签来复用其他文件的内容，支持 Markdown 和 MDX 格式。

基本用法

MDX 语法：

<include>./another.mdx</include>

Markdown 语法：

::include[./another.mdx]

Markdown（.md）文件不支持 JSX 语法。要使用 <include />，需要配置 remark-directive。

Markdown 所需配置

source.config.ts

import { defineConfig } from 'fumadocs-mdx/config';
import remarkDirective from 'remark-directive';

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [remarkDirective],
  },
});

代码块包含

非 Markdown/MDX 文件会显示为代码块：

<include>./script.ts</include>
<include lang="md" meta='title="lib.md"'>
  page.md
</include>

区域提取

使用锚点包含特定代码段：

<include>./code.ts#a</include>

源文件中使用区域标记：

export function fn() {
  //#region a
  console.log('one');
  //#endregion
}

工作目录解析

cwd 属性从项目根目录解析路径：

<include cwd lang="tsx" meta='title="lib.ts"'>
  ./script.ts
</include>

内容提取方式

基于 Section 的提取

MDX：

<section id="test">这部分会被包含</section>
<include>a.mdx#test</include>

Markdown：

:::section{#test}
这部分会被包含
:::
::include[a.md#test]

基于标题的提取

通过引用标题的 slug 来包含该标题下的所有内容：

<include>a.mdx#included-section</include>

这会提取 "Included Section" 标题下的内容，直到下一个标题出现。

内容包含

On this page