跳转到主要内容
软件开发的核心原则之一是 DRY（不要重复自己），这一点同样适用于文档。如果你发现自己在多个位置重复相同的内容，应创建自定义片段，以保持内容一致。

​
创建自定义片段

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

​
默认导出

  1. 在你的代码片段文件中添加你想要复用的对象。
snippets/my-snippet.mdx
你好,世界!这是我想在多个页面中重复使用的内容。
  1. 将该代码片段导入到目标文件中。
destination-file.mdx
---
title: 我的标题
description: 我的说明
---

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

## 标题

Lorem impsum dolor sit amet.

<MySnippet/>

​
使用变量导出

  1. 你也可以选择添加变量，在导入该代码片段时通过 props 传入值。在此示例中，我们的变量是 word。
snippets/my-snippet.mdx
我今天的关键词是 {word}。
  1. 使用该变量将代码片段导入目标文件。该属性会根据你的指定自动填充。
destination-file.mdx
---
title: 我的标题
description: 我的说明
---

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

## 标题

Lorem ipsum dolor sit amet.

<MySnippet word="bananas" />

​
可复用变量

  1. 从你的代码片段（snippet）文件中导出一个变量：
snippets/path/to/custom-variables.mdx
export const myName = "我的名字";

export const myObject = { fruit: "草莓" };
  1. 从目标文件中导入该代码片段并使用该变量：
destination-file.mdx
---
title: 我的标题
description: 我的说明
---

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

你好,我的名字是 {myName},我喜欢 {myObject.fruit}。

​
JSX 代码片段

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

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

<MyJSXSnippet />