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/

Sezione intitolata 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

Sezione intitolata 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:

    src/components/Navigation.astro
    ---
    ---
    <a href="/">Home</a>
    <a href="/about/">Su di me</a>
    <a href="/blog/">Blog</a>

Importa e usa Navigation.astro

Sezione intitolata Importa e usa Navigation.astro

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

    src/pages/index.astro
    ---
    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:

    src/pages/index.astro
    <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

Sezione intitolata 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

Sezione intitolata 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

Sezione intitolata Checklist

Risorse

Sezione intitolata Risorse
Contribuisci Comunità Sponsor