Salta ai contenuti

Crea un componente di Navigazione riutilizzabile

Ora che hai lo stesso HTML scritto in più pagine del tuo sito Astro, è il momento di sostituire quel contenuto duplicato con un componente Astro riutilizzabile!

Preparati a…

Crea una nuova cartella per i componenti
Costruisci un componente Astro per visualizzare i tuoi link di navigazione
Sostituisci l’HTML esistente con un nuovo componente di navigazione riutilizzabile

Crea una nuova cartella `src/components/`

Per contenere i file .astro che genereranno HTML ma che non diventeranno nuove pagine sul tuo sito web, avrai bisogno di una nuova cartella nel tuo progetto: src/components/.

Crea un nuovo file: src/components/Navigation.astro.
Copia i tuoi link per navigare tra le pagine dalla parte superiore di qualsiasi pagina e incollali nel tuo nuovo file, Navigation.astro:
src/components/Navigation.astro
```
---
---
<a href="/">Home</a>
<a href="/about/">Su di me</a>
<a href="/blog/">Blog</a>
```
Se non c’è nulla nel frontmatter del tuo file .astro, non devi scrivere i recinti di codice. Puoi sempre riaggiungerli quando ne hai bisogno.

Importa e usa Navigation.astro

Torna a index.astro e importa il tuo nuovo componente all’interno del recinto di codice:

---
import Navigation from '../components/Navigation.astro';
import "../styles/global.css";

const pageTitle = "Pagina iniziale";
---

Poi sotto, sostituisci gli elementi HTML di link di navigazione esistenti con il nuovo componente di navigazione che hai appena importato:
src/pages/index.astro
```
<a href="/">Home</a>
<a href="/about/">Su di me</a>
<a href="/blog/">Blog</a>
<Navigation />
```
Controlla l’anteprima nel tuo browser e nota che dovrebbe apparire esattamente uguale… ed è quello che vuoi!

Il tuo sito contiene lo stesso HTML di prima. Ma ora, quelle tre righe di codice sono fornite dal tuo componente <Navigation />.

Prova tu stesso - Aggiungi la navigazione al resto del tuo sito

Importa e usa il componente <Navigation /> nelle altre due pagine del tuo sito (about.astro e blog.astro) usando lo stesso metodo.

Non dimenticare di

Aggiungere una dichiarazione di importazione nella parte superiore dello script del componente, all’interno del recinto di codice.
Sostituire il codice esistente con il componente di navigazione.

Metti alla prova le tue conoscenze

Puoi fare questo quando hai elementi ripetuti su più pagine:
1. riavviare il server di sviluppo
2. eseguire il refactoring per usare un componente riutilizzabile
3. creare una nuova pagina
I componenti Astro sono:
1. riutilizzabili
2. frammenti di HTML
3. entrambi i precedenti!
I componenti Astro creeranno automaticamente una nuova pagina sul tuo sito quando…
1. includi <html></html>
2. esegui il refactoring
3. metti il file .astro all’interno di src/pages/

Checklist

Posso eseguire il refactoring del contenuto in componenti riutilizzabili.
Posso aggiungere un nuovo componente a una pagina .astro.

Risorse

Panoramica sui Componenti Astro
Refactoring external

Contribuisci Comunità Sponsor