Frammenti

I frammenti sono blocchi di contenuto riutilizzabili archiviati in una directory /snippets. Importali in qualsiasi pagina MDX per evitare di duplicare i contenuti.

Creazione dei frammenti

Crea una directory /snippets nella radice della documentazione:

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

Scrivi il contenuto dei frammenti come in qualsiasi file MDX, ma senza frontmatter:

Before you begin, make sure you have:

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

Utilizzo dei frammenti

Importa e utilizza i frammenti nelle tue pagine:

---
title: Getting Started
---

## Prerequisites

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

<Prerequisites />

## Installation

Continue with your page content...

Componenti dei frammenti

I frammenti possono contenere componenti Jamdesk:

<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>

Utilizzalo in più pagine:

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

## Need Help?

<SupportCTA />

Frammenti interattivi

Per i frammenti che richiedono hook React (useState, useEffect, ecc.), usa file .tsx con la direttiva '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>
  );
}

Importa in MDX:

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

<Counter />

Frammenti parametrizzati

Passa le props per rendere dinamici i frammenti:

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

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

</Warning>
);

Utilizzali con le props:

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

<ApiKeyWarning service="Stripe" />

Organizzazione dei frammenti

Per i progetti più grandi, organizza i frammenti in sottodirectory:

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

Importali utilizzando il percorso completo:

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

Casi d'uso comuni

Frammento o componente inline

Usa i frammenti per i contenuti che compaiono in più pagine. Usa i componenti inline per componenti presentazionali utilizzati una sola volta all'interno di una singola pagina.

Qual è il prossimo passo?