Salta ai contenuti

Riferimenti frontmatter

Puoi personalizzare pagine Markdown e MDX in Starlight definendo i valori nel frontmatter. Per esempio, una pagina potrebbe definire title e description :

---
title: A proposito del progetto
description: Scopri di più sul progetto a cui sto lavorando.
---

Benvenuto alla pagina "a proposito del progetto"!

Campi del frontmatter

title (obbligatorio)

type: string

Devi fornire un titolo ad ogni pagina. Questo sarà usato in testa alla pagina, nelle finestre del browser e nei metadati della pagina.

description

type: string

La descrizione è utilizzata nei metadati e sarà utilizzata dai motori di ricerca e nelle anteprime nei social.

editUrl

type: string | boolean

Sovrascrive la configurazione globale editLink. Metti a false per disabilitare “Modifica la pagina” per quella pagina specifica oppure fornisci un link alternativo.

type: HeadConfig[]

Puoi aggiungere tag aggiuntivi nell’<head> della pagina utilizzando la chiave head nel frontmatter. Questo significa che puoi aggiungere stili personalizzati, metadati o altri tag in una pagina. Il funzionamento è simile all’opzione globale head.

---
title: Chi siamo
head:
  # Utilizza un <title> personalizzato
  - tag: title
    content: Titolo personalizzato
---

tableOfContents

type: false | { minHeadingLevel?: number; maxHeadingLevel?: number; }

Sovrascrive la configurazione globale tableOfContents. Cambia i livelli di titoli inclusi o, se messo a false, nasconde la tabella dei contenuti della pagina.

---
title: Pagina con solo H2 nella tabella dei contenuti della pagina
tableOfContents:
  minHeadingLevel: 2
  maxHeadingLevel: 2
---
---
title: Pagina senza tabella dei contenuti della pagina
tableOfContents: false
---

template

type: 'doc' | 'splash'
default: 'doc'

Definisce il layout per la pagina. Le pagine utilizzano 'doc' come predefinita. Se valorizzato a 'splash' viene utilizzato un layout senza barre laterali ottimale per la pagina iniziale.

hero

type: HeroConfig

Aggiunge un componente hero all’inizio della pagina. Funziona bene con template: splash.

Per esempio, questa configurazione illustra comuni opzioni, incluso il caricamento di un’immagine.

---
title: La mia pagina principale
template: splash
hero:
  title: 'Il mio progetto: Stellar Stuff Sooner'
  tagline: Porta le tue cose sulla Luna e torna indietro in un battito d'occhio.
  image:
    alt: Un logo brillante e luminoso
    file: ../../assets/logo.png
  actions:
    - text: Dimmi di più
      link: /getting-started/
      icon: right-arrow
      variant: primary
    - text: Vedi su GitHub
      link: https://github.com/astronaut/my-project
      icon: external
---

HeroConfig

interface HeroConfig {
  title?: string;
  tagline?: string;
  image?: {
    alt?: string;
    // Percorso relativo ad un’immagine dentro il tuo progetto.
    file?: string;
    // HTML non elaborato da utilizzare al posto dell'immagine.
    // Potrebbe essere un tag personalizzato `<img>` o `<svg>` in linea.
    html?: string;
  };
  actions?: Array<{
    text: string;
    link: string;
    variant: 'primary' | 'secondary' | 'minimal';
    icon: string;
  }>;
}

type: { content: string }

Visualizza un banner di annuncio nella parte superiore di questa pagina.

Il valore content può includere HTML per collegamenti o altri contenuti. Ad esempio, questa pagina visualizza un banner che include un collegamento a example.com.

---
title: Pagina con un banner
banner:
  content: |
    Abbiamo appena lanciato qualcosa di interessante!
    <a href="https://example.com">Dai un'occhiata</a>
---

lastUpdated

type: Date | boolean

Sostituisce l’opzione globale lastUpdated. Se viene specificata una data, deve essere un timestamp YAML valido e sovrascriverà la data archiviata nella cronologia Git per questa pagina.

---
title: Pagina con una data di ultimo aggiornamento personalizzata
lastUpdated: 2022-08-09
---

prev

type: boolean | string | { link?: string; label?: string }

Sostituisce l’opzione globale paginazione. Se viene specificata una stringa, il testo del collegamento generato verrà sostituito e se viene specificato un oggetto, sia il collegamento che il testo verranno sovrascritti.

---
# Nascondi il collegamento alla pagina precedente
prev: false
---
---
# Sostituisci il testo del collegamento della pagina precedente
prev: Continua il tutorial
---
---
# Sostituisci sia il collegamento che il testo della pagina precedente
prev:
  link: /pagina-non-correlata/
  label: Dai un'occhiata a quest'altra pagina
---

next

type: boolean | string | { link?: string; label?: string }

Uguale a prev ma per il collegamento alla pagina successiva.

---
# Nascondi il collegamento alla pagina successiva
next: false
---

pagefind

type: boolean
default: true

Imposta se questa pagina deve essere inclusa nell’indice di ricerca Pagefind. Imposta su false per escludere una pagina dai risultati di ricerca:

---
# Nascondi questa pagina dai risultati di ricerca
pagefind: false
---

type: SidebarConfig

Controlla il modo in cui questa pagina viene visualizzata nella barra laterale, quando si utilizza un gruppo di collegamenti generato automaticamente.

SidebarConfig

interface SidebarConfig {
  label?: string;
  order?: number;
  hidden?: boolean;
  badge?: string | BadgeConfig;
  attrs?: Record<string, string | number | boolean | undefined>;
}

label

type: string
default: the page title

Imposta l’etichetta per questa pagina nella barra laterale quando viene visualizzata in un gruppo di collegamenti generato automaticamente.

---
title: Informazioni su questo progetto
sidebar:
  label: Informazioni
---

order

type: number

Controlla l’ordine di questa pagina quando ordini un gruppo di collegamenti generato automaticamente. I numeri più bassi vengono visualizzati più in alto nel gruppo di collegamenti.

---
title: Pagina da visualizzare per prima
sidebar:
  order: 1
---

hidden

type: boolean default: false

Impedisce che questa pagina venga inclusa in un gruppo della barra laterale generato automaticamente.

---
title: Pagina da nascondere dalla barra laterale generata automaticamente
sidebar:
  hidden: vero
---

badge

type: string | BadgeConfig

Aggiungi un badge alla pagina nella barra laterale quando viene visualizzata in un gruppo di collegamenti generato automaticamente. Quando si utilizza una stringa, il badge verrà visualizzato con un colore in risalto predefinito. Facoltativamente, passa un oggetto BadgeConfig con i campi text e variant per personalizzare il badge.

---
title: Pagina con un badge
sidebar:
  # Utilizza la variante predefinita corrispondente al colore principale del tuo sito
  badge: nuovo
---
---
title: Pagina con un badge
sidebar:
  badge:
    text: Sperimentale
    variant: caution
---

attrs

type: Record<string, string | number | boolean | undefined>

Attributi HTML da aggiungere al collegamento della pagina nella barra laterale quando viene visualizzato in un gruppo di collegamenti generato automaticamente.

---
title: Pagina che si aprirà in una nuova scheda
sidebar:
  # Apre la pagina in una nuova scheda
  attrs:
    target: _blank
---