软件开发的核心原则之一是DRY（不要重复自己）。这一原则同样适用于文档编写。如果您发现自己在多个地方重复相同的内容, 应该考虑创建一个自定义代码片段来保持内容的同步。

​
创建自定义片段

前提条件: 您必须在 snippets 目录中创建片段文件。

snippets 目录中的任何页面都将被视为片段, 不会被渲染成独立的页面。如果您想从片段创建独立页面, 请将片段导入到另一个文件中并将其作为组件调用。

​
默认导出

  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'} />