Salta ai contenuti

Crea un footer per i social media

Preparati a…

  • Crea un componente Footer
  • Crea e passa props a un componente Social Media

Ora che hai usato i componenti Astro su una pagina, è il momento di usare un componente all’interno di un altro componente!

Sezione intitolata Crea un Componente Footer

  1. Crea un nuovo file nella posizione src/components/Footer.astro.

  2. Copia il seguente codice nel tuo nuovo file, Footer.astro.

    src/components/Footer.astro
    ---
    const platform = "github";
    const username = "withastro";
    ---
    

    <footer>
      <p>Scopri di più sui miei progetti su <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
    </footer>

Importa e usa Footer.astro

Sezione intitolata Importa e usa Footer.astro

  1. Aggiungi la seguente dichiarazione di importazione al frontmatter in ciascuna delle tue tre pagine Astro (index.astro, about.astro e blog.astro):

    import Footer from '../components/Footer.astro';

  2. Aggiungi un nuovo componente <Footer /> nel tuo template Astro su ogni pagina, appena prima del tag di chiusura </body> per visualizzare il tuo footer nella parte inferiore della pagina.

        <Footer />
      </body>
    </html>

  3. Nell’anteprima del tuo browser, verifica di poter vedere il tuo nuovo testo del footer su ogni pagina.

Prova tu stesso - Personalizza il tuo footer

Sezione intitolata Prova tu stesso - Personalizza il tuo footer

Personalizza il tuo footer per visualizzare più social network (es. Instagram, Twitter, LinkedIn) e includi il tuo username per collegarti direttamente al tuo profilo.

Verifica del Codice

Sezione intitolata Verifica del Codice

Se hai seguito ogni passaggio del tutorial, il tuo file index.astro dovrebbe apparire così:

src/pages/index.astro
---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';


const pageTitle = 'Pagina iniziale';
---


<html lang="it">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Navigation />
    <h1>{pageTitle}</h1>
    <Footer />
  </body>
</html>

Crea un componente Social Media

Sezione intitolata Crea un componente Social Media

Dato che potresti avere più account online a cui puoi collegarti, puoi creare un singolo componente riutilizzabile e visualizzarlo più volte. Ogni volta, gli passerai diverse proprietà (props) da utilizzare: la piattaforma online e il tuo username lì.

  1. Crea un nuovo file nella posizione src/components/Social.astro.

  2. Copia il seguente codice nel tuo nuovo file, Social.astro.

    src/components/Social.astro
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
Sezione intitolata Importa e usa Social.astro nel tuo Footer

  1. Cambia il codice in src/components/Footer.astro per importare, poi usare questo nuovo componente tre volte, passando diversi attributi del componente come props ogni volta:

    src/components/Footer.astro
    ---
    const platform = "github";
    const username = "withastro";
    import Social from './Social.astro';
    ---
    

    <footer>
      <p>Scopri di più sui miei progetti su <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>

  2. Controlla l’anteprima del tuo browser e dovresti vedere il tuo nuovo footer visualizzare link a queste tre piattaforme su ogni pagina.

Stila il tuo Componente Social Media

Sezione intitolata Stila il tuo Componente Social Media

  1. Personalizza l’aspetto dei tuoi link aggiungendo un tag <style> a src/components/Social.astro.

    src/components/Social.astro
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
    

    <style>
      a {
        padding: 0.5rem 1rem;
        color: white;
        background-color: #4c1d95;
        text-decoration: none;
      }
    </style>

  2. Aggiungi un tag <style> a src/components/Footer.astro per migliorare il layout dei suoi contenuti.

    src/components/Footer.astro
    ---
    import Social from './Social.astro';
    ---
    <style>
      footer {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
      }
    </style>
    

    <footer>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>

  3. Controlla di nuovo l’anteprima del tuo browser e conferma che ogni pagina mostra un footer aggiornato.

Metti alla prova te stesso

Sezione intitolata Metti alla prova te stesso

  1. Quale riga di codice devi scrivere nel frontmatter di un componente Astro per ricevere valori di title, author e date come props?

  2. Come passi valori come props a un componente Astro?

Checklist

Sezione intitolata Checklist

Risorse

Sezione intitolata Risorse
Contribuisci Comunità Sponsor