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

# 可复用片段

> 可复用的自定义片段，保持内容一致

软件开发的核心原则之一是 DRY（Don't Repeat Yourself，不要重复自己）。
这一原则同样适用于文档。如果你发现自己在多个位置重复相同内容，
建议创建自定义片段（snippet）以保持内容同步。

## 创建自定义片段

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

<Note>
  `snippets` 目录下的任何页面都会被视为片段（snippet），不会渲染为独立页面。
  如果你需要创建独立页面，请在其他文件中引入该片段，并将其作为组件调用。
</Note>

### 默认导出

1. 在片段文件中添加希望在多个位置复用的内容。你也可以在片段中定义变量，
   以便在引入时通过 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` 目录内，否则无法被正确导入。
</Warning>

2. 在目标文件中引入该片段。

```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. 在片段文件中导出变量：

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

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

2. 在目标文件中引入该片段并使用变量：

```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. 在片段文件中以箭头函数的形式导出一个接收 props 的组件。

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

<Warning>
  MDX 不会在箭头函数的函数体内编译。尽量使用 HTML 语法；
  若确需在内容中使用 MDX，请改用默认导出。
</Warning>

2. 在目标文件中引入该片段并传入 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'} />
```