Aller au contenu
Astro Astro

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/

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

  1. Créez un nouveau fichier : src/components/Navigation.astro.

  2. 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

  1. Revenez à index.astro et importez votre nouveau composant à l’intérieur du code fence :

    src/pages/index.astro
    ---
    import Navigation from '../components/Navigation.astro';
    ---

  2. 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 />

  3. 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

Importez 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

  1. Vous pouvez faire cela lorsque vous avez des éléments répétés sur plusieurs pages :

  2. Les composants Astro sont :

  3. Les composants Astro créeront automatiquement une nouvelle page sur votre site lorsque vous…

Liste de contrôle

Ressources