> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ticoag.fun/llms.txt
> Use this file to discover all available pages before exploring further.

# 可复用片段（Snippets）

> 通过自定义 snippet 复用内容，并保持多处内容一致

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

## 创建自定义 snippet

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

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

### 默认导出（default export）

1. 在 snippet 文件中编写你希望在多个地方复用的内容。你也可以加入变量，在 import 时通过 props 传入值。

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

<Warning>
  要复用的内容必须位于 `snippets` 目录内，否则 import 无法正常工作。
</Warning>

2. 在目标文件中 import 该 snippet。

```mdx destination-file.mdx theme={null}
---
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. 在 snippet 文件中导出变量：

```mdx snippets/path/to/custom-variables.mdx theme={null}
export const myName = 'my name';

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

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

```mdx destination-file.mdx theme={null}
---
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. 在 snippet 文件中以箭头函数的形式导出组件，并通过 props 接收参数：

```mdx snippets/custom-component.mdx theme={null}
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... snippet content ...</p>
  </div>
);
```

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

2. 在目标文件中 import，并传入 props：

```mdx destination-file.mdx theme={null}
---
title: My title
description: My Description
---

import { MyComponent } from '/snippets/custom-component.mdx';

Lorem ipsum dolor sit amet.

<MyComponent title={'Custom title'} />
```