Snippets

Snippets sind wiederverwendbare Inhaltsblöcke, die in einem Verzeichnis /snippets gespeichert werden. Importieren Sie sie in jede MDX-Seite, um doppelte Inhalte zu vermeiden.

Snippets erstellen

Erstellen Sie ein Verzeichnis /snippets im Stammverzeichnis Ihrer Dokumentation:

my-docs/
├── docs.json
├── introduction.mdx
└── snippets/
    ├── prerequisites.mdx
    ├── installation.mdx
    └── support-cta.mdx

Verfassen Sie Snippet-Inhalte wie in jeder MDX-Datei, jedoch ohne Frontmatter:

Before you begin, make sure you have:

- Node.js 20 or higher
- A GitHub account
- A text editor (VS Code recommended)

Snippets verwenden

Importieren und verwenden Sie Snippets in Ihren Seiten:

---
title: Getting Started
---

## Prerequisites

import Prerequisites from '/snippets/prerequisites.mdx';

<Prerequisites />

## Installation

Continue with your page content...

Snippet-Komponenten

Snippets können Jamdesk-Komponenten enthalten:

<Columns cols={2}>
  <Card title="Documentation" icon="book" href="/docs">

    Browse our guides

</Card>
  <Card title="Contact Support" icon="headset" href="/support">

    Get help from our team

</Card>
</Columns>

Verwenden Sie das Snippet auf mehreren Seiten:

import SupportCTA from '/snippets/support-cta.mdx';

## Need Help?

<SupportCTA />

Interaktive Snippets

Verwenden Sie für Snippets, die React-Hooks (useState, useEffect usw.) benötigen, Dateien mit der Endung .tsx und der Direktive 'use client':

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

Import in MDX:

import { Counter } from '/snippets/counter';

<Counter />

Parametrisierte Snippets

Übergeben Sie Props, um Snippets dynamisch zu gestalten:

export const ApiKeyWarning = ({ service }) => (
  <Warning>

    Never commit your {service} API key to version control. Use environment variables instead.

</Warning>
);

Verwendung mit Props:

import { ApiKeyWarning } from '/snippets/api-key-warning.mdx';

<ApiKeyWarning service="Stripe" />

Snippets organisieren

Organisieren Sie Snippets bei größeren Projekten in Unterverzeichnissen:

snippets/
├── components/
│   ├── cta-cards.mdx
│   └── feature-table.mdx
├── warnings/
│   ├── api-key.mdx
│   └── deprecation.mdx
└── shared/
    ├── prerequisites.mdx
    └── support-links.mdx

Importieren Sie sie mit dem vollständigen Pfad:

import CtaCards from '/snippets/components/cta-cards.mdx';
import ApiKeyWarning from '/snippets/warnings/api-key.mdx';

Häufige Anwendungsfälle

Snippet im Vergleich zu Inline-Komponente

Verwenden Sie Snippets für Inhalte, die auf mehreren Seiten erscheinen. Verwenden Sie Inline-Komponenten für einmalige Präsentationskomponenten innerhalb einer einzelnen Seite.

Wie geht es weiter?