Skip to main content
软件开发的核心原则之一是 DRY（Don’t Repeat Yourself，不要重复自己）。 这一原则同样适用于文档。如果你发现自己在多个位置重复相同内容， 建议创建自定义片段（snippet）以保持内容同步。

​
创建自定义片段

前置条件：你必须在 snippets 目录下创建片段文件。
snippets 目录下的任何页面都会被视为片段（snippet），不会渲染为独立页面。 如果你需要创建独立页面，请在其他文件中引入该片段，并将其作为组件调用。

​
默认导出

  1. 在片段文件中添加希望在多个位置复用的内容。你也可以在片段中定义变量， 以便在引入时通过 props 传入。
snippets/my-snippet.mdx
Hello world! This is my content I want to reuse across pages. My keyword of the
day is {word}.
需要复用的内容必须位于 snippets 目录内，否则无法被正确导入。
  1. 在目标文件中引入该片段。
destination-file.mdx
---
title: My title
description: My Description
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## Header

Lorem impsum dolor sit amet.

<MySnippet word="bananas" />

​
可复用变量

  1. 在片段文件中导出变量：
snippets/path/to/custom-variables.mdx
export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };
  1. 在目标文件中引入该片段并使用变量：
destination-file.mdx
---
title: My title
description: My Description
---

import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';

Hello, my name is {myName} and I like {myObject.fruit}.

​
可复用组件

  1. 在片段文件中以箭头函数的形式导出一个接收 props 的组件。
snippets/custom-component.mdx
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... snippet content ...</p>
  </div>
);
MDX 不会在箭头函数的函数体内编译。尽量使用 HTML 语法； 若确需在内容中使用 MDX，请改用默认导出。
  1. 在目标文件中引入该片段并传入 props：
destination-file.mdx
---
title: My title
description: My Description
---

import { MyComponent } from '/snippets/custom-component.mdx';

Lorem ipsum dolor sit amet.

<MyComponent title={'Custom title'} />