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!
Crea un Componente Footer
Sezione intitolata Crea un Componente Footer-
Crea un nuovo file nella posizione
src/components/Footer.astro
. -
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-
Aggiungi la seguente dichiarazione di importazione al frontmatter in ciascuna delle tue tre pagine Astro (
index.astro
,about.astro
eblog.astro
):import Footer from '../components/Footer.astro'; -
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> -
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 footerPersonalizza 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 CodiceSe hai seguito ogni passaggio del tutorial, il tuo file index.astro
dovrebbe apparire così:
---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 MediaDato 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ì.
-
Crea un nuovo file nella posizione
src/components/Social.astro
. -
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>
Importa e usa Social.astro
nel tuo Footer
Sezione intitolata Importa e usa Social.astro nel tuo Footer-
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> -
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-
Personalizza l’aspetto dei tuoi link aggiungendo un tag
<style>
asrc/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> -
Aggiungi un tag
<style>
asrc/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> -
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-
Quale riga di codice devi scrivere nel frontmatter di un componente Astro per ricevere valori di
title
,author
edate
come props? -
Come passi valori come props a un componente Astro?