> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# 可复用片段

> 创建可复用片段，在各页面间保持一致性。

软件开发的核心原则之一是 DRY（Don't Repeat Yourself，避免重复），这同样适用于文档。如果你发现在多个位置重复相同的内容，可以为该内容创建一个自定义片段。片段包含的内容可以导入到其他文件中复用，你可以控制片段在页面上的具体展示位置。如果之后需要更新内容，只需编辑片段本身，而不必修改所有使用该片段的文件。

片段不会渲染成独立页面，必须导入到其他文件中使用。

<div id="create-snippets">
  ## 创建片段
</div>

在片段文件夹中创建一个文件，写入你想要复用的内容。片段可以包含 Mintlify 支持的所有内容类型，也可以导入其他片段。

<div id="import-snippets-into-pages">
  ## 将代码片段导入到页面中
</div>

要使用代码片段，请通过绝对路径或相对路径将它们导入到页面中。

* **绝对导入**：从项目根目录导入时，以 `/snippets/` 开头。
* **相对导入**：使用 `./` 或 `../` 从当前文件所在位置相对导入代码片段。

<Tip>
  相对导入支持 IDE 导航。在编辑器中按住 <kbd>CMD</kbd> 并单击代码片段名称即可直接跳转到该代码片段的定义。
</Tip>

<div id="import-text">
  ### 导入文本
</div>

1. 在代码片段文件中添加需要复用的内容。

```mdx snippets/my-snippet.mdx theme={null}
  Hello world! This is my content I want to reuse across pages.
```

2. 使用绝对路径或相对路径，将该片段导入目标文件中。

<CodeGroup>
  ```mdx Absolute import theme={null}
  ---
  title: "An example page"
  description: "This is an example page that imports a snippet."
  ---

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

  The snippet content displays beneath this sentence.

  <MySnippet/>
  ```

  ```mdx Relative import theme={null}
  ---
  title: "An example page"
  description: "This is an example page that imports a snippet."
  ---

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

  The snippet content displays beneath this sentence.

  <MySnippet/>
  ```
</CodeGroup>

<div id="import-variables">
  ### 导入变量
</div>

在页面中引用代码片段（snippet）中的变量。

1. 从代码片段（snippet）文件中导出变量。

```mdx snippets/custom-variables.mdx theme={null}
  export const myName = "Ronan";

  export const myObject = { fruit: "strawberries" };
```

2. 从目标文件中导入该代码片段并使用该变量。

```mdx destination-file.mdx theme={null}
  ---
  title: "示例页面"
  description: "这是一个导入带有变量的代码片段的示例页面。"
  ---

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

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

<div id="import-snippets-with-variables">
  ### 使用变量导入代码片段
</div>

在导入代码片段时，可使用变量向其传递数据。

1. 在代码片段中添加变量，并在导入时通过属性传入值。在此示例中，变量是 `{word}`。

```mdx snippets/my-snippet.mdx theme={null}
  我今天的关键词是 {word}。
```

2. 使用该变量将代码片段导入目标文件。传入的属性会替换代码片段定义中的变量。

```mdx destination-file.mdx theme={null}
  ---
  title: "示例页面"
  description: "这是一个导入带有变量的代码片段的示例页面。"
  ---

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

  <MySnippet word="bananas" />

```

<div id="import-react-components">
  ### 导入 React 组件
</div>

1. 创建一个包含 JSX 组件的代码片段。有关更多信息，请参见 [React 组件](/zh/customize/react-components)。

```js snippets/my-jsx-snippet.jsx theme={null}
  export const MyJSXSnippet = () => {
    return (
      <div>
        <h1>你好,世界!</h1>
      </div>
    );
  };
```

<Note>
  创建 JSX 代码片段时，请使用箭头函数语法（`=>`），而不要使用函数声明。在代码片段中不支持使用 `function` 关键字。
</Note>

2. 导入该代码片段。

```mdx destination-file.mdx theme={null}
  ---
  title: "示例页面"
  description: "这是一个导入包含 React 组件的代码片段的示例页面。"
  ---

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

  <MyJSXSnippet />
```