Créez un composant de navigation réutilisable
Maintenant que vous avez écrit le même HTML sur plusieurs pages de votre site Astro, remplaçons ce contenu dupliqué par un composant Astro réutilisable !
Préparez-vous à…
- Créez un nouveau dossier pour les composants
- Créez un composant Astro pour afficher vos liens de navigation
- Remplacez le HTML existant par un nouveau composant de navigation réutilisable
Créez un nouveau dossier src/components/
Titre de la section Créez un nouveau dossier src/components/Pour contenir les fichiers .astro qui généreront du HTML, mais qui ne deviendront pas de nouvelles pages sur votre site web, vous aurez besoin d’un nouveau dossier dans votre projet : src/components/.
Créez un composant de navigation
Titre de la section Créez un composant de navigation-
Créez un nouveau fichier :
src/components/Navigation.astro. -
Copiez vos liens pour naviguer entre les pages depuis le haut de n’importe quelle page et collez-les dans votre nouveau fichier,
Navigation.astro:src/components/Navigation.astro ------<a href="/">Accueil</a><a href="/a-propos/">À propos</a><a href="/blog/">Blog</a>
Importez et utilisez Navigation.astro
Titre de la section Importez et utilisez Navigation.astro-
Revenez à
index.astroet importez votre nouveau composant à l’intérieur du code fence :src/pages/index.astro ---import Navigation from '../components/Navigation.astro';--- -
Ensuite, remplacez les éléments de lien HTML de navigation existants par le nouveau composant de navigation que vous venez d’importer :
src/pages/index.astro <a href="/">Accueil</a><a href="/a-propos/">À propos</a><a href="/blog/">Blog</a><Navigation /> -
Vérifiez l’aperçu dans votre navigateur et remarquez qu’il devrait être exactement le même… et c’est ce que vous voulez !
Votre site contient le même HTML qu’auparavant. Mais maintenant, ces trois lignes de code sont fournies par votre composant <Navigation />.
Essayez par vous-même - Ajoutez la navigation au reste de votre site
Titre de la section Essayez par vous-même - Ajoutez la navigation au reste de votre siteImportez et utilisez le composant <Navigation /> dans les deux autres pages de votre site (about.astro et blog.astro) en utilisant la même méthode.
N’oubliez pas de
- Ajouter une instruction d’importation en haut du script du composant, à l’intérieur du code fence.
- Remplacer le code existant par le composant de navigation.
Testez vos connaissances
Titre de la section Testez vos connaissances-
Vous pouvez faire cela lorsque vous avez des éléments répétés sur plusieurs pages :
-
Les composants Astro sont :
-
Les composants Astro créeront automatiquement une nouvelle page sur votre site lorsque vous…