Créez votre première mise en page
Préparez-vous à…
- Rassemblez les éléments communs dans un composant de mise en page
- Utilisez un élément Astro
<slot />
pour placer le contenu de la page dans une mise en page - Transmettez des valeurs spécifiques à la page en tant que props à sa mise en page
Vous avez toujours certains composants Astro qui sont rendus de manière répétée sur chaque page. Il est temps de restructurer à nouveau pour créer une mise en page partagée !
Créez votre première mise en page
Titre de la section Créez votre première mise en page-
Créez un nouveau fichier à l’emplacement
src/layouts/BaseLayout.astro
. (Vous devrez d’abord créer un nouveau dossierlayouts
.) -
Copiez l’intégralité du contenu de
index.astro
dans votre nouveau fichier,BaseLayout.astro
.
Utilisez votre mise en page sur une page
Titre de la section Utilisez votre mise en page sur une page-
Remplacez le code dans
src/pages/index.astro
par ce qui suit : -
Vérifiez à nouveau l’aperçu du navigateur pour remarquer ce qui a (ou, spoiler : n’a pas !) changé.
-
Ajoutez un élément
<slot />
àsrc/layouts/BaseLayout.astro
juste au-dessus du composant de pied de page, puis vérifiez l’aperçu du navigateur de votre page d’accueil et remarquez ce qui a vraiment changé cette fois-ci !
Le <slot />
vous permet d’injecter (ou “insérer”) du contenu enfant écrit entre les balises d’ouverture et de fermeture <Component></Component>
dans n’importe quel fichier Component.astro
.
Transmettez des valeurs spécifiques à la page en tant que props
Titre de la section Transmettez des valeurs spécifiques à la page en tant que props-
Passez le titre de la page à votre composant de mise en page depuis
index.astro
en utilisant un attribut de composant : -
Modifiez le script de votre composant de mise en page
BaseLayout.astro
pour recevoir un titre de page viaAstro.props
au lieu de le définir comme une constante. -
Vérifiez l’aperçu de votre navigateur pour vérifier que le titre de votre page n’a pas changé. Il a la même valeur, mais il est désormais rendu dynamiquement. Et maintenant, chaque page individuelle peut spécifier son propre titre à la mise en page.
Essayez par vous-même - Utilisez votre mise en page partout
Titre de la section Essayez par vous-même - Utilisez votre mise en page partoutRéfactorisez vos autres pages (blog.astro
et about.astro
) pour qu’elles utilisent votre nouveau composant <BaseLayout>
pour afficher les éléments communs de la page. (Remarque : l’utilisation de BaseLayout pour restituer votre page about.astro
signifie que vous perdrez la balise <style>
ajoutée à la balise <head>
de cette page. Si vous souhaitez conserver le style personnalisé pour <h1>
, déplacez la balise de style vers le corps du composant de page.)
N’oubliez pas de :
-
Transmettre un titre de page en tant que props via un attribut de composant.
-
Laissez la mise en page être responsable du rendu HTML de tous les éléments communs.
-
Déplacez toutes les balises
<style>
existantes dans la page<head>
avec les styles que vous souhaitez conserver dans le modèle HTML de la page. -
Supprimez de chaque page individuelle tout ce qui est désormais géré par la mise en page, y compris :
- Éléments HTML
- Composants et leurs imports
- Règles CSS dans une balise
<style>
(par exemple,<h1>
dans votre page À propos) - Balises
<script>
Testez vos connaissances
Titre de la section Testez vos connaissances-
Un composant Astro (fichier
.astro
) peut fonctionner comme : -
Pour afficher un titre de page sur la page, vous pouvez :
-
Les informations peuvent être transmises d’un composant à un autre en :