Aller au contenu

Pages

Les pages sont des fichiers qui se trouvent dans le sous-répertoire src/pages/ de votre projet Astro. Ils sont responsables de la gestion du routage, du chargement des données et de la mise en page globale de chaque page de votre site Web.

Fichiers de page pris en charge

Titre de la section Fichiers de page pris en charge

Astro prend en charge les types de fichiers suivants dans le répertoire src/pages/ :

Routage basé sur les fichiers

Titre de la section Routage basé sur les fichiers

Astro utilise une stratégie de routage appelée routage basé sur les fichiers. Chaque fichier de votre répertoire src/pages/ devient un point d’accès sur votre site en fonction de son chemin d’accès.

Un seul fichier peut également générer plusieurs pages en utilisant le routage dynamique. Cela vous permet de créer des pages même si votre contenu se trouve en dehors du répertoire spécial /pages/, par exemple dans une collection de contenu ou un CMS.

En savoir plus sur Le routage dans Astro.

Lien entre les pages

Titre de la section Lien entre les pages

Écrivez des éléments HTML standard <a> dans vos pages Astro pour créer des liens vers d’autres pages de votre site. Utilisez un chemin d’URL relatif à la racine de votre domaine comme lien, et non un fichier de chemin relatif.

Par exemple, pour créer un lien https://example.com/authors/sonali/ depuis n’importe quelle autre page de example.com :

src/pages/index.astro
En savoir plus <a href="/authors/sonali/">à propos de Sonali</a>.

Pages Astro

Titre de la section Pages Astro

Les pages Astro utilisent l’extension de fichier .astro et prennent en charge les mêmes fonctionnalités que les composants Astro.

src/pages/index.astro
---
---
<html lang="fr">
  <head>
    <title>Ma page d'accueil</title>
  </head>
  <body>
    <h1>Bienvenue sur mon site web !</h1>
  </body>
</html>

Une page doit produire un document HTML complet. S’il n’est pas explicitement inclus, Astro ajoutera la déclaration <!DOCTYPE html> et le contenu <head> nécessaires à tout composant .astro situé dans src/pages/ par défaut. Vous pouvez renoncer à ce comportement pour chaque composant en le marquant comme une page partial.

Pour éviter de répéter les mêmes éléments HTML sur chaque page, vous pouvez déplacer les éléments communs <head> et <body> dans vos propres composants de mise en page. Vous pouvez utiliser autant, ou aussi peu de composants de mise en page que vous le souhaitez.

src/pages/index.astro
---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>Le contenu de ma page, enveloppé dans une mise en page !</p>
</MySiteLayout>
En savoir plus sur les composants de mise en page dans Astro.

Pages Markdown/MDX

Titre de la section Pages Markdown/MDX

Astro traite également tous les fichiers Markdown (.md) contenus dans src/pages/ comme des pages de votre site Web final. Si vous avez installé l’intégration MDX, les fichiers MDX (.mdx) sont traités de la même manière. Ces fichiers sont généralement utilisés pour les pages contenant beaucoup de texte, comme les articles de blog et la documentation.

Les collections de contenu de pages Markdown ou MDX dans src/content/ peuvent être utilisées pour générer des pages dynamiquement.

Les mises en page sont particulièrement utiles pour les fichiers Markdown. Les fichiers Markdown peuvent utiliser la propriété frontmatter spéciale layout pour spécifier un composant de mise en page qui enveloppera leur contenu Markdown dans un document page complet <html>...</html>.

src/pages/page.md
---
layout: '../layouts/MySiteLayout.astro'
title: 'Ma page Markdown'
---
# Titre


Voici ma page, écrite en **Markdown**.
En savoir plus sur le Markdown dans Astro.

Pages HTML

Titre de la section Pages HTML

Les fichiers portant l’extension .html peuvent être placés dans le répertoire src/pages/ et utilisés directement comme pages sur votre site. Notez que certaines fonctionnalités clés d’Astro ne sont pas prises en charge dans les Composants HTML.

Page d’erreur 404 personnalisée

Titre de la section Page d’erreur 404 personnalisée

Pour une page d’erreur 404 personnalisée, vous pouvez créer un fichier 404.astro ou 404.md dans src/pages.

Il sera construit en une page 404.html. La plupart des services de déploiement le trouveront et l’utiliseront.

Page d’erreur 500 personnalisée

Titre de la section Page d’erreur 500 personnalisée

Pour afficher une page d’erreur 500 personnalisée pour les pages qui sont rendues à la demande, créez le fichier src/pages/500.astro. Cette page personnalisée n’est pas disponible pour les pages pré-rendues et ne peut pas être pré-rendue.

Si une erreur survient lors du rendu de cette page, la page d’erreur 500 par défaut de votre hébergeur sera affichée à votre visiteur.

Ajouté à la version : astro@4.10.3

Pendant le développement, si vous avez un 500.astro, l’erreur lancée à l’exécution est enregistrée dans votre terminal, au lieu d’être affichée dans la fenêtre d’erreur.

error

Titre de la section error

Ajouté à la version : astro@4.11.0 Nouveau

src/pages/500.astro est une page spéciale à laquelle on passe automatiquement une propriété error pour toute erreur survenant lors du rendu. Cela vous permet d’utiliser les détails d’une erreur (par exemple, d’une page, d’un middleware, etc.) pour afficher des informations à votre visiteur.

Le type de données du prop d’erreur peut être quelconque, ce qui peut affecter la façon dont vous tapez ou utilisez la valeur dans votre code :

src/pages/500.astro
---
interface Props {
    error: unknown
}


const { error } = Astro.props
---


<div>{error instanceof Error ? error.message : 'Erreur inconnue'}</div>

Pour éviter la fuite d’informations sensibles lors de l’affichage du contenu de la propriété error, envisagez d’évaluer d’abord l’erreur, et de renvoyer le contenu approprié en fonction de l’erreur provoquée. Par exemple, vous devriez éviter d’afficher la pile de l’erreur, car elle contient des informations sur la façon dont votre code est structuré sur le serveur.

Page Partielle

Titre de la section Page Partielle

Ajouté à la version : astro@3.4.0

Les partiels sont des composants de page situés dans src/pages/ qui ne sont pas destinés à être affichés comme des pages complètes.

Comme les composants situés en dehors de ce dossier, ces fichiers n’incluent pas automatiquement la déclaration <!DOCTYPE html>, ni aucun contenu <head> tel que les styles et les scripts.

Cependant, parce qu’ils sont situés dans le répertoire spécial src/pages/, le HTML généré est disponible à une URL correspondant à son chemin de fichier. Cela permet à une bibliothèque de rendu (par exemple htmx, Stimulus, jQuery) d’y accéder sur le client et de charger des sections de HTML dynamiquement sur une page sans rafraîchissement du navigateur ni navigation dans la page.

Les partiels, lorsqu’ils sont associés à une bibliothèque de rendu, constituent une alternative aux îles Astro et aux balises <script> pour la création de contenu dynamique dans Astro.

Les fichiers de page qui peuvent exporter une valeur (par exemple .astro , .mdx) peuvent être marqués comme partiels.

Configurez un fichier dans le répertoire src/pages/ pour être un partiel en ajoutant l’export suivant :

src/pages/partial.astro
---
export const partial = true;
---
<li>Je suis un partiel!</li>

L’export const partial doit être identifiable statiquement. Il peut avoir la valeur de :

  • Le booléen true.
  • Une variable d’environnement utilisant import.meta.env comme import.meta.env.USE_PARTIALS.

Utilisation avec une bibliothèque

Titre de la section Utilisation avec une bibliothèque

Les partiels sont utilisés pour mettre à jour dynamiquement une section d’une page en utilisant une bibliothèque telle que htmx.

L’exemple suivant montre un attribut hx-post défini sur l’URL d’une page partielle. Le contenu de la page partielle sera utilisé pour mettre à jour l’élément HTML ciblé sur cette page.

src/pages/index.astro
<html>
  <head>
    <title>Ma page</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
</html>
<section>
  <div id="parent-div">Target here</div>
  <button hx-post="/partials/clicked/"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="innerHTML"
  >
      Cliquez!
  </button>
</section>

Le fichier partiel .astro doit exister dans le chemin d’accès correspondant et inclure une exportation définissant la page comme un fichier partiel :

src/pages/partials/clicked.astro
---
export const partial = true;
---
<div>J'ai été cliqué!</div>

Voir la documentation htmx pour plus de détails sur l’utilisation de htmx.