Eines der Grundprinzipien der Softwareentwicklung ist DRY („Don’t Repeat Yourself“), und das gilt auch für Dokumentation. Wenn Sie feststellen, dass Sie denselben Inhalt an mehreren Stellen wiederholen, sollten Sie ein benutzerdefiniertes Snippet erstellen, um Ihre Inhalte konsistent zu halten.

​
Erstellen eines benutzerdefinierten Snippets

Voraussetzung: Legen Sie Ihre Snippet-Datei im Verzeichnis snippets an, damit der Import funktioniert. Jede Seite im Verzeichnis snippets wird als Snippet behandelt und nicht als eigenständige Seite gerendert. Wenn Sie aus dem Snippet eine eigenständige Seite erstellen möchten, importieren Sie es in eine andere Datei und binden Sie es als Komponente ein.

​
Standardexport

  1. Fügen Sie Inhalte zu Ihrer Snippet-Datei hinzu, die Sie wiederverwenden möchten. Optional können Sie Variablen hinzufügen, die beim Import des Snippets über Props befüllt werden können. In diesem Beispiel heißt unsere Variable word.
snippets/my-snippet.mdx
Hello world! This is my content I want to reuse across pages.
  1. Importieren Sie das Snippet in Ihre Zieldatei.
destination-file.mdx
---
title: My title
description: My Description
---

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

## Überschrift

Lorem impsum dolor sit amet.

<MySnippet/>

​
Exportieren mit Variablen

  1. Optional können Sie Variablen hinzufügen, die beim Import des Snippets über Props befüllt werden können. In diesem Beispiel heißt unsere Variable word.
snippets/my-snippet.mdx
My keyword of the day is {word}.
  1. Importieren Sie das Snippet mit der Variable in Ihre Zieldatei. Die Property wird gemäß Ihrer Angabe befüllt.
destination-file.mdx
---
title: My title
description: My Description
---

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

## Header

Lorem ipsum dolor sit amet.

<MySnippet word="bananas" />

​
Wiederverwendbare Variablen

  1. Exportiere eine Variable aus deiner Snippet-Datei:
snippets/path/to/custom-variables.mdx
export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };
  1. Importiere das Snippet in deiner Zieldatei und verwende die Variable:
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}.

​
JSX-Snippets

  1. Exportieren Sie eine JSX-Komponente aus Ihrer Snippet-Datei. (Weitere Informationen finden Sie unter React-Komponenten):
snippets/my-jsx-snippet.jsx
export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  )
}
Wichtig: Verwenden Sie beim Erstellen von JSX-Snippets die Pfeilfunktionssyntax (=>) statt Funktionsdeklarationen. Das Schlüsselwort function wird in diesem Kontext nicht unterstützt.
  1. Importieren Sie das Snippet in Ihrer Zieldatei und verwenden Sie die Komponente:
destination-file.mdx
---
title: My title
description: My Description
---

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

<MyJSXSnippet />