可复用片段（Snippets）

软件开发的核心原则之一是 DRY（Don’t Repeat Yourself，不要重复自己）。这个原则同样适用于文档。如果你发现同一段内容在多个地方反复出现，建议创建一个自定义 snippet 来复用，从而保持内容一致。

创建自定义 snippet

前置条件：snippet 文件必须创建在 snippets 目录下。

snippets 目录中的任何页面都会被当作 snippet 处理，不会渲染为独立页面。如果你希望从 snippet 生成一个独立页面，请将 snippet import 到其他文件中，并作为组件调用。

默认导出（default export）

在 snippet 文件中编写你希望在多个地方复用的内容。你也可以加入变量，在 import 时通过 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 目录内，否则 import 无法正常工作。

在目标文件中 import 该 snippet。

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" />

可复用变量

在 snippet 文件中导出变量：

snippets/path/to/custom-variables.mdx

export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };

在目标文件中 import，并使用该变量：

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}.

可复用组件

在 snippet 文件中以箭头函数的形式导出组件，并通过 props 接收参数：

snippets/custom-component.mdx

export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... snippet content ...</p>
  </div>
);

MDX 不会在箭头函数的函数体内编译。能用 HTML 时尽量用 HTML；如果必须使用 MDX，请改用 default export。

在目标文件中 import，并传入 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'} />

工作流

Mintlify 写法

可复用片段（Snippets）

创建自定义 snippet

默认导出（default export）

可复用变量

可复用组件

​创建自定义 snippet

​默认导出（default export）

​可复用变量

​可复用组件

创建自定义 snippet

默认导出（default export）

可复用变量

可复用组件