Aller au contenu
understanding astro

Frontmatter Reference

Vous pouvez personnaliser des pages Markdown et MDX individuelles dans Starlight en définissant des valeurs dans leur frontmatter. Par exemple, une page normale peut définir les champs title et description :

---
title: A propos de ce projet
description: En savoir plus sur le projet sur lequel je travaille.
---

Bienvenue sur la page "à propos" !

Champs du frontmatter

title (obligatoire)

type: string

Vous devez fournir un titre pour chaque page. Il sera affiché en haut de la page, dans les onglets du navigateur et dans les métadonnées de la page.

description

type: string

La description de la page est utilisée pour les métadonnées de la page et sera reprise par les moteurs de recherche et dans les aperçus des médias sociaux.

editUrl

type: string | boolean

Remplace la configuration globale editLink. Mettez false pour désactiver le lien “Modifier cette page” pour une page spécifique ou pour fournir une URL alternative où le contenu de cette page est éditable.

type: HeadConfig[]

Vous pouvez ajouter des balises supplémentaires au champ <head> de votre page en utilisant le champ head frontmatter. Cela signifie que vous pouvez ajouter des styles personnalisés, des métadonnées ou d’autres balises à une seule page. Similaire à l’option globale head.

---
title: A propos de nous
head:
  # Utiliser une balise <title> personnalisée
  - tag: title
    content: Titre personnalisé à propos de nous
---

tableOfContents

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

Remplace la configuration globale tableOfContents. Personnalisez les niveaux d’en-tête à inclure ou mettez false pour cacher la table des matières sur cette page.

---
title: Pagee avec seulement des H2s dans la table des matières
tableOfContents:
  minHeadingLevel: 2
  maxHeadingLevel: 2
---
---
title: Page sans table des matières
tableOfContents: false
---

template

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

Définit le modèle de mise en page pour cette page. Les pages utilisent la mise en page 'doc'’ par défaut. La valeur 'splash'' permet d’utiliser une mise en page plus large, sans barres latérales, conçue pour les pages d’atterrissage.

hero

type: HeroConfig

Ajoute un composant héros en haut de la page. Fonctionne bien avec template : splash.

Par exemple, cette configuration montre quelques options communes, y compris le chargement d’une image depuis votre dépôt.

---
title: Ma page d'accueil
template: splash
hero:
  title: 'Mon projet : Stellar Stuffer Sooner'
  tagline: Emmenez vos affaires sur la lune et revenez-y en un clin d'œil.
  image:
    alt: Un logo aux couleurs vives et scintillantes
    file: ../../assets/logo.png
  actions:
    - text: En savoir plus
      link: /getting-started/
      icon: right-arrow
      variant: primary
    - text: Voir sur GitHub
      link: https://github.com/astronaut/my-project
      icon: external
---

HeroConfig

interface HeroConfig {
  title?: string;
  tagline?: string;
  image?: {
    alt?: string;
    // Chemin relatif vers une image dans votre dépôt.
    file?: string;
    // HTML brut à utiliser dans l'emplacement de l'image.
    // Il peut s'agir d'une balise `<img>` personnalisée ou d'une balise `<svg>` en ligne.
    html?: string;
  };
  actions?: Array<{
    text: string;
    link: string;
    variant: 'primary' | 'secondary' | 'minimal';
    icon: string;
  }>;
}

lastUpdated

type: Date | boolean

Remplace la configuration globale lastUpdated. Si une date est spécifiée, elle doit être un horodatage YAML valide et remplacera la date stockée dans l’historique Git pour cette page.

---
title: Page avec une date de dernière mise à jour personnalisée
lastUpdated: 2022-08-09
---

prev

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

Remplace la configuration globale pagination. Si un string est spécifié, le texte du lien généré sera remplacé et si un objet est spécifié, le lien et le texte seront remplacés.

---
# Masquer le lien de la page précédente
prev: false
---
---
# Remplacer le texte du lien de la page
prev: Poursuivre the tutorial
---
---
# Remplacer le lien et le texte de la page
prev:
  link: /unrelated-page/
  label: Consultez cette autre page
---

next

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

La même chose que prev mais pour le lien de la page suivante.

---
# Masquer le lien de la page suivante
next: false
---

type: { label?: string; order?: number }

Contrôler l’affichage de cette page dans la barre latérale, lors de l’utilisation d’un groupe de liens généré automatiquement.

label

type: string
default: the page title

Définir l’étiquette de cette page dans la barre latérale lorsqu’elle est affichée dans un groupe de liens généré automatiquement.

---
title: About this project
sidebar:
  label: About
---

order

type: number

Contrôler l’ordre de cette page lors du tri d’un groupe de liens généré automatiquement. Les numéros inférieurs sont affichés plus haut dans le groupe de liens.

---
title: Page à afficher en premier
sidebar:
  order: 1
---