Ogni pagina è un file MDX che combina contenuti Markdown con componenti React, permettendoti di creare documentazione ricca e interattiva.

Metadati della pagina

Ogni pagina inizia con il frontmatter, i metadati YAML racchiusi tra --- all’inizio del file. Questi metadati determinano l’aspetto e il comportamento della pagina. Usa i metadati per controllare:
  • Titoli e descrizioni della pagina
  • Titoli, icone e tag della barra laterale
title
string
required
Il titolo della pagina che appare nella navigazione e nelle schede del browser.
description
string
Una breve descrizione dei contenuti della pagina. Appare sotto il titolo e migliora la SEO.
sidebarTitle
string
Un titolo breve visualizzato nella navigazione della barra laterale.
icon
string
L’icona da visualizzare.Opzioni:
  • Nome dell’icona Font Awesome
  • Nome dell’icona Lucide
  • Codice SVG compatibile con JSX racchiuso tra parentesi graffe
  • URL di un’icona ospitata esternamente
  • Percorso di un file icona nel tuo progetto
Per icone SVG personalizzate:
  1. Converti il tuo SVG con il convertitore SVGR.
  2. Incolla il tuo codice SVG nel campo di input SVG.
  3. Copia l’elemento completo <svg>...</svg> dal campo di output JSX.
  4. Racchiudi il codice SVG compatibile con JSX tra parentesi graffe: icon={<svg ...> ... </svg>}.
  5. Regola height e width secondo necessità.
iconType
string
Lo stile dell’icona Font Awesome. Utilizzato solo con le icone Font Awesome.Opzioni: regular, solid, light, thin, sharp-solid, duotone, brands.
tag
string
Un tag che appare accanto al titolo della pagina nella barra laterale.
Example YAML frontmatter
---
title: "Informazioni sul frontmatter"
description: "Il frontmatter è il set di metadati che controlla aspetto e comportamento della pagina"
sidebarTitle: "Frontmatter"
icon: "book"
tag: "NEW"
---

Modalità pagina

Controlla la visualizzazione della tua pagina con l’impostazione mode.

Predefinito

Se non è definita alcuna modalità, viene usato un layout standard con navigazione nella barra laterale e indice dei contenuti.
---
title: "Titolo pagina predefinito"
---

Ampia

La modalità ampia nasconde l’indice dei contenuti. È utile per le pagine senza intestazioni o se preferisci sfruttare lo spazio orizzontale aggiuntivo. La modalità ampia è disponibile per tutti i temi.
---
title: "Wide page title"
mode: "wide"
---

Personalizzato

La modalità personalizzata offre un layout minimalista che rimuove tutti gli elementi tranne la barra di navigazione superiore. È una tela bianca per creare landing page o qualsiasi altro layout personalizzato in cui vuoi ridurre al minimo gli elementi di navigazione. La modalità personalizzata è disponibile per tutti i temi.
---
title: "Titolo pagina personalizzato"
mode: "custom"
---

Frame

La modalità Frame offre un layout simile alla modalità personalizzata, ma mantiene la navigazione nella barra laterale. Questa modalità di pagina consente di utilizzare HTML e componenti personalizzati, preservando l’esperienza di navigazione predefinita. La modalità Frame è disponibile solo con i temi Aspen e Almond.
---
title: "Frame page title"
mode: "frame"
---

Centrato

La modalità centrata rimuove la barra laterale e l’indice, mettendo il contenuto al centro. È utile per i changelog o altre pagine in cui vuoi mettere in risalto il contenuto. La modalità centrata è disponibile per i temi Mint e Linden.
---
title: "Titolo pagina centrata"
mode: "center"
---

Pagine API

Crea API playground interattivi aggiungendo una specifica API al frontmatter, tramite api o openapi.
---
openapi: "GET /endpoint"
---
Scopri di più sulla creazione della documentazione API. Aggiungi link a siti esterni direttamente dalla navigazione usando il metadato url.
---
title: "Pacchetto npm"
url: "https://www.npmjs.com/package/mint"
---

Ottimizzazione per i motori di ricerca

La maggior parte dei meta tag SEO viene generata automaticamente. Puoi impostare manualmente i meta tag SEO per migliorare la SEO del tuo sito, la condivisione sui social e la compatibilità con i browser.
I meta tag con i due punti devono essere racchiusi tra virgolette.
---
"twitter:image": "/images/social-preview.jpg"
---
Consulta SEO per l’elenco completo delle opzioni dei metadati SEO.

Parole chiave per la ricerca interna

Migliora la reperibilità di una pagina specifica nella ricerca integrata aggiungendo keywords nei metadati. Queste parole chiave non verranno visualizzate nel contenuto della pagina né tra i risultati di ricerca, ma gli utenti che le cercheranno vedranno la pagina tra i risultati.
---
keywords: ['configuration', 'setup', 'getting started']
---