跳至內容
Fumadocs

引入

重複使用其他檔案的內容。

使用方式

無論使用 unified 或 Sätteri,Fumadocs MDX 都會預設啟用 Remark 引入。

內容

若要顯示另一個 Markdown/MDX 檔案的內容,請在 <include> 標籤中指定該檔案相對於目前檔案的路徑。

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

請勿將不受信任的路徑傳給 <include>,因為它可以嵌入您電腦上的任何檔案,例如 .env。

Markdown 的用法

Markdown (.md) 檔案不支援 JSX 語法,請改用指令 (directive) 語法。 Sätteri 預設會解析指令;若使用 unified,請加入 remark-directive 這個 remark 外掛:

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

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

若要處理 HTML 註解與內容,您可能還需要 rehype-raw。

CodeBlock

其他類型的檔案則會轉換為程式碼區塊:

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

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

您也可以只引入內容中的特定區段:

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

cwd

以 cwd 為基準解析相對路徑,而非以目前檔案為基準:

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

擷取

引用內容檔案時,您可以只引入文件中的特定部分。

Section

以 <section /> 標籤包覆:

## Hello World

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

This is not included.

在 Markdown 中:

## Hello World

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

This is not included.

標題

引入特定標題下的內容。

## Included Section

I'm here!

## Not Included

Some random text.

在 Markdown 中:

## Included Section

I'm here!

## Not Included

Some random text.

How is this guide?

最後更新於