mirror of
https://gitlab.com/KenanZhu/AutoLibraryManuals.git
synced 2026-11-05 05:35:51 +08:00
101 lines
2.6 KiB
Plaintext
101 lines
2.6 KiB
Plaintext
---
|
|
title: "Reusable snippets"
|
|
description: "Write once, reuse everywhere. Use snippets to keep content in sync across pages"
|
|
icon: "recycle"
|
|
---
|
|
|
|
Any content you find yourself repeating across pages is a good candidate for a snippet. Create the file once in the `snippets/` directory, import it wherever you need it, and updates propagate everywhere automatically.
|
|
|
|
<Note>
|
|
Files inside `snippets/` are not rendered as standalone pages. They only appear where you import them.
|
|
</Note>
|
|
|
|
## Content snippets
|
|
|
|
The simplest pattern: write MDX content in a snippet file and import it as a component.
|
|
|
|
```mdx snippets/prerequisites.mdx
|
|
Before you begin, make sure you have:
|
|
- Node.js 18 or higher
|
|
- An API key from your [dashboard](https://dashboard.example.com)
|
|
```
|
|
|
|
Import it into any page using a root-relative path:
|
|
|
|
```mdx your-page.mdx
|
|
---
|
|
title: Install the SDK
|
|
---
|
|
|
|
import Prerequisites from '/snippets/prerequisites.mdx';
|
|
|
|
<Prerequisites />
|
|
|
|
## Installation
|
|
...
|
|
```
|
|
|
|
You can also use relative imports, which enables CMD+click navigation to the snippet in your editor:
|
|
|
|
```mdx
|
|
import Prerequisites from '../snippets/prerequisites.mdx';
|
|
```
|
|
|
|
## Variable snippets
|
|
|
|
Export named constants from a snippet file to reuse values like product names, version numbers, or URLs.
|
|
|
|
```mdx snippets/vars.mdx
|
|
export const sdkVersion = '3.2.0';
|
|
export const baseUrl = 'https://api.example.com/v1';
|
|
```
|
|
|
|
Import and use them inline:
|
|
|
|
```mdx your-page.mdx
|
|
import { sdkVersion, baseUrl } from '/snippets/vars.mdx';
|
|
|
|
The current SDK version is **{sdkVersion}**.
|
|
|
|
All requests go to `{baseUrl}`.
|
|
```
|
|
|
|
## Component snippets
|
|
|
|
For snippets that need to vary based on where they're used, export an arrow function component that accepts props.
|
|
|
|
```mdx snippets/endpoint-note.mdx
|
|
export const EndpointNote = ({ method, path }) => (
|
|
<Note>
|
|
This guide covers the <code>{method} {path}</code> endpoint.
|
|
See the <a href="/api-reference/introduction">API reference</a> for full details.
|
|
</Note>
|
|
);
|
|
```
|
|
|
|
* Use arrow function syntax (`const Foo = () => ...`).
|
|
* The `function` keyword is not supported in snippet files.
|
|
* MDX syntax doesn't compile inside arrow function bodies. Use plain HTML tags there, or use a default export instead.
|
|
|
|
Pass props when you render it:
|
|
|
|
```mdx your-page.mdx
|
|
import { EndpointNote } from '/snippets/endpoint-note.mdx';
|
|
|
|
<EndpointNote method="POST" path="/v1/users" />
|
|
```
|
|
|
|
## Snippets importing snippets
|
|
|
|
Snippets can import other snippets, which is useful for composing larger shared sections from smaller pieces.
|
|
|
|
```mdx snippets/auth-intro.mdx
|
|
import AuthNote from '/snippets/auth-note.mdx';
|
|
|
|
## Authentication
|
|
|
|
All endpoints require a bearer token.
|
|
|
|
<AuthNote />
|
|
```
|