Fumadocs

包含

重用其他文件中的内容。

使用

🌐 Usage

内容

🌐 Content

要显示来自另一个 Markdown/MDX 文件的内容,请在 <include> 标签中指定相对于该文件本身的路径。

🌐 To display content from another Markdown/MDX file, specify its path relative to the file itself in the <include> tag.

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

用于 Markdown

Markdown(.md)文件不支持 JSX 语法。要使用 <include />,你需要配置 remark-directive

🌐 Markdown (.md) files do not support JSX syntax. To use <include />, you need to configure remark-directive.

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

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

你可能还需要 rehype-raw 来处理 HTML 注释和内容。

🌐 You may also need rehype-raw for HTML comments & content.

CodeBlock

对于其他类型的文件,它将变成一个代码块:

🌐 For other types of files, it will become a codeblock:

<include>./script.ts</include>

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

你只能包含内容的某个区域:

🌐 You can include only a region of content:

code.ts
export function fn() {
  //#region a
  console.log('one');
  //#endregion
}
<include>./code.ts#a</include>

cwd

从当前工作目录而不是当前文件解析相对路径:

🌐 Resolve relative paths from cwd instead of the current file:

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

提取

🌐 Extraction

在引用内容文件时,你只能包括文档的某一部分。

🌐 When referencing content files, you can only include a certain part of the document.

部分

🌐 Section

<section /> 标签封装:

🌐 Encapsulate by a <section /> tag:


## Hello World

<section id="test">This is included</section>

This is not included.

在 Markdown 中:

🌐 In Markdown:


## Hello World

:::section{#test}
This is included
:::

This is not included.

标题

🌐 Heading

包含某个标题下的内容。

🌐 Include contents under a certain heading.


## Included Section

I'm here!

## Not Included

Some random text.

在 Markdown 中:

🌐 In Markdown:


## Included Section

I'm here!

## Not Included

Some random text.

Last updated on

On this page