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

​
创建自定义片段

前提条件：必须在 snippets 目录中创建片段文件，导入才会生效。 snippets 目录中的任何页面都会被视为片段，不会渲染为独立页面。若要基于该片段创建独立页面，请将片段导入到另一个文件中，并以组件的形式调用。

​
默认导出

  1. 在你想要复用的片段文件中添加内容。你也可以添加变量，在导入该片段时通过 props 进行填充。 在此示例中，我们的变量是 word。
snippets/my-snippet.mdx
Hello world! This is my content I want to reuse across pages.
  1. 将该片段导入到目标文件中。
destination-file.mdx
---
title: My title
description: My Description
---

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

## 标题

Lorem impsum dolor sit amet.

<MySnippet/>

​
使用变量进行导出

  1. 你可以选择性地添加变量，在导入片段时通过 props 传入。在此示例中，变量名为 word。
snippets/my-snippet.mdx
My keyword of the day is {word}.
  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}.

​
JSX 片段

  1. 从片段文件中导出一个 JSX 组件。（参见 React 组件 了解更多信息）：
snippets/my-jsx-snippet.jsx
export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  )
}
重要：创建 JSX 片段时，请使用箭头函数语法（=>），而不要使用函数声明。在该上下文中不支持 function 关键字。
  1. 在目标文件中导入该片段并使用该组件：
destination-file.mdx
---
title: My title
description: My Description
---

import { MyJSXSnippet } from '/snippets/my-jsx-snippet.jsx';

<MyJSXSnippet />