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!

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

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.

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>

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.

  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.

  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?

Contribuisci Comunità Sponsor