Composants Layout
Les Layouts (ou “mise-en-pages” en français) sont des composants Astro utilisés pour fournir une structure d’interface utilisateur réutilisable, comme un modèle de page.
Par convention, nous utilisons le terme “mise en page” pour les composants Astro qui fournissent des éléments d’interface utilisateur commune à toutes les pages, tels que les en-têtes, les barres de navigation et les pieds de page. Un composant de mise en page typique d’Astro fournit aux pages Astro, Markdown ou MDX les éléments suivants :
- une page shell (
balises <html>
,<head>
et<body>
) - un
<slot />
pour spécifier où le contenu de chaque page doit être injecté.
Mais, un composant de mise en page n’a rien de spécial ! Ils peuvent accepter des propriétés et importer et utiliser d’autres composants comme n’importe quel autre composant Astro. Ils peuvent inclure des composants de frameworks d’interface utilisateur et des scripts côté client. Ils ne sont même pas obligés de fournir une page shell complète, et peuvent plutôt être utilisés comme des modèles d’interface utilisateur partielle.
Cependant, si un composant de mise en page contient une enveloppe de page, son élément <html>
doit être le parent de tous les autres éléments du composant. Tous les éléments <style>
ou <script>
doivent être entourés par les balises <html>
.
Les composants de mise en pages sont généralement placés dans un dossier src/layouts
dans votre projet pour l’organisation, mais ce n’est pas une obligation ; vous pouvez choisir de les placer n’importe où dans votre projet. Vous pouvez même placer des composants de mise en page à côté de vos pages en préfixant les noms de mise en page par _
.
Exemple de composant de mise en page
Titre de la section Exemple de composant de mise en page---import BaseHead from '../components/BaseHead.astro';import Footer from '../components/Footer.astro';const { title } = Astro.props;---<html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <BaseHead title={title}/> </head> <body> <nav> <a href="#">Accueil</a> <a href="#">Articles</a> <a href="#">Contact</a> </nav> <h1>{title}</h1> <article> <slot /> <!-- Votre contenu est injecté ici --> </article> <Footer /> </body> <style> h1 { font-size: 2rem; } </style></html>