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.
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>
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. Pour continuer à appliquer un style aux éléments uniquement au niveau de la page à l’aide des styles à portée limitée d’Astro, déplacez la balise <style>
vers le corps du composant de page. Cela vous permet d’appliquer un style aux éléments créés dans ce composant de page (par exemple, votre liste de compétences).
Étant donné que votre <h1>
est désormais créé par votre composant de mise en page, vous pouvez ajouter l’attribut is:global
à votre balise de style pour affecter chaque élément de cette page, y compris ceux créés par d’autres composants : <style is:global define:vars={{ skillColor, fontWeight, textCase }}>
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 :