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 componente Navigation

  1. Crea un nuovo file: src/components/Navigation.astro.

  2. Copia i tuoi link per navigare tra le pagine dalla parte superiore di qualsiasi pagina e incollali nel tuo nuovo file, Navigation.astro:

    ---
---
<a href="/">Home</a>
<a href="/about/">Su di me</a>
<a href="/blog/">Blog</a>

    :::tipSe 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

  1. 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";
---

  2. Poi sotto, sostituisci gli elementi HTML di link di navigazione esistenti con il nuovo componente di navigazione che hai appena importato:

    <a href="/">Home</a>
<a href="/about/">Su di me</a>
<a href="/blog/">Blog</a>
<Navigation />

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

:::noteQuando ristrutturi il tuo codice ma non cambi l'aspetto della tua pagina nel browser, stai effettuando un refactoring. Effettuerai il refactoring diverse volte in questa unità man mano che sostituisci parti dell'HTML della tua pagina con componenti.

Questo ti permette di iniziare rapidamente con qualsiasi codice funzionante, spesso duplicato in tutto il tuo progetto. Poi, puoi migliorare gradualmente il design del tuo codice esistente senza cambiare l'aspetto esteriore del tuo sito.:::

Metti alla prova le tue conoscenze

  1. Puoi fare questo quando hai elementi ripetuti su più pagine:

  2. I componenti Astro sono:

  3. I componenti Astro creeranno automaticamente una nuova pagina sul tuo sito quando...

Checklist

Risorse

Contribuisci Comunità Sponsor