Aller au contenu

Créer un composant de navigation réutilisable

Maintenant que vous avez le même HTML sur plusieurs pages de votre site Astro, il est temps de remplacer ce contenu dupliqué par un composant Astro réutilisable !

Préparez-vous à…

Créer un nouveau dossier pour les composants
Créer un composant Astro pour afficher vos liens de navigation
Remplacer le HTML existant par un nouveau composant de navigation réutilisable

Créer un nouveau dossier `src/components/`

Pour rassembler 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 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>
```
S’il n’y a rien dans le frontmatter de votre fichier .astro, vous n’avez pas à écrire les délimitateurs de code. Vous pouvez toujours les ajouter quand vous en aurez besoin.

Importer et utiliser Navigation.astro

Retournez dans le fichier index.astro et importez votre nouveau composant à l’intérieur des délimitateurs de code :
src/pages/index.astro
```
---
import Navigation from '../components/Navigation.astro';
import "../styles/global.css";

const pageTitle = "Page d'accueil";
---
```
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 />.

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

d’ajouter une instruction d’importation en haut du script du composant, à l’intérieur des délimitateurs de code.
de remplacer le code existant par le composant de navigation.

Tester vos connaissances

Vous pouvez faire cela lorsque vous avez des éléments répétés sur plusieurs pages :
1. redémarrer le serveur de développement
2. refactoriser pour utiliser un composant réutilisable
3. créer une nouvelle page
Les composants Astro sont :
1. réutilisables
2. des fragments de HTML
3. les deux !
Les composants Astro créeront automatiquement une nouvelle page sur votre site lorsque vous…
1. incluez <html></html>
2. refactorisez
3. placez le fichier .astro dans src/pages/

Liste de contrôle

Je peux refactoriser le contenu en composants réutilisables.
Je peux ajouter un nouveau composant à une page .astro.

Ressources

Aperçu des composants Astro
Refactorisation (Anglais) external

Contribuer Communauté Parrainer

Créer un composant de navigation réutilisable

Créer un nouveau dossier src/components/