Crea e passa dati a un layout di blog personalizzato
Ora che hai un layout per le tue pagine, è il momento di aggiungere un layout per gli articoli del blog!
Preparati a…
- Crea un nuovo layout di articoli del blog per i tuoi file Markdown
- Passa valori frontmatter YAML come props al componente layout
Aggiungi un layout ai tuoi articoli del blog
Sezione intitolata Aggiungi un layout ai tuoi articoli del blogQuando includi la proprietà frontmatter layout
in un file .md
, tutti i tuoi valori YAML frontmatter sono disponibili per il file layout.
-
Crea un nuovo file in
src/layouts/MarkdownPostLayout.astro
-
Copia il seguente codice in
MarkdownPostLayout.astro
src/layouts/MarkdownPostLayout.astro ---const { frontmatter } = Astro.props;---<meta charset="utf-8" /><h1>{frontmatter.title}</h1><p>Scritto da {frontmatter.author}</p><slot /> -
Aggiungi la seguente proprietà frontmatter in
post-1.md
src/pages/posts/post-1.md ---layout: ../../layouts/MarkdownPostLayout.astrotitle: 'Il mio primo articolo del blog'pubDate: 2022-07-01description: 'Questo è il primo articolo del mio nuovo blog Astro.'author: 'Studente Astro'image:url: 'https://docs.astro.build/assets/rose.webp'alt: 'Il logo di Astro su uno sfondo scuro con un bagliore rosa.'tags: ["astro", "blogging", "imparare in pubblico"]--- -
Controlla di nuovo l’anteprima del tuo browser su
http://localhost:4321/posts/post-1
e nota cosa ha aggiunto il layout alla tua pagina. -
Aggiungi la stessa proprietà layout ai tuoi altri due articoli del blog
post-2.md
epost-3.md
. Verifica nel tuo browser che il tuo layout sia applicato anche a questi articoli.
Quando usi i layout, ora hai la possibilità di includere elementi, come un titolo di pagina, nel contenuto Markdown o nel layout. Ricorda di ispezionare visivamente l’anteprima della tua pagina e apportare le modifiche necessarie per evitare elementi duplicati.
Prova tu stesso - Personalizza il tuo layout di articoli del blog
Sezione intitolata Prova tu stesso - Personalizza il tuo layout di articoli del blogSfida: Identifica gli elementi comuni a ogni articolo del blog e usa MarkdownPostLayout.astro
per renderizzarli, invece di scriverli nel tuo Markdown in post-1.md
e in ogni futuro articolo del blog.
Ecco un esempio di refactoring del tuo codice per includere pubDate
nel componente layout invece di scriverlo nel body del tuo Markdown:
Pubblicato il: 2022-07-01
Benvenuto nel mio _nuovo blog_ sull'apprendimento di Astro! Qui, condividerò il mio percorso di apprendimento mentre costruisco un nuovo sito web.
---const { frontmatter } = Astro.props;---<meta charset="utf-8" /><h1>{frontmatter.title}</h1><p>Pubblicato il: {frontmatter.pubDate.toString().slice(0,10)}</p><p>Scritto da {frontmatter.author}</p><slot />
Esegui il refactoring di quanto ritieni utile per te e aggiungi quanto vuoi al tuo layout, ricordando che tutto ciò che aggiungi al tuo layout è una cosa in meno che scriverai in ogni singolo articolo del blog!
Ecco un esempio di layout refactorizzato che lascia solo il contenuto individuale dell’articolo del blog renderizzato dallo slot. Sentiti libero di usarlo, o crea il tuo!
---const { frontmatter } = Astro.props;---<meta charset="utf-8" /><h1>{frontmatter.title}</h1><p>{frontmatter.pubDate.toString().slice(0,10)}</p><p><em>{frontmatter.description}</em></p><p>Scritto da: {frontmatter.author}</p><img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} /><slot />
Qualsiasi cosa renderizzata dal tuo layout non ha bisogno di essere digitata nel tuo articolo del blog! Se noti qualche duplicazione quando controlli l’anteprima del tuo browser, allora assicurati di rimuovere il contenuto dal tuo file Markdown.
Metti alla prova le tue conoscenze
Sezione intitolata Metti alla prova le tue conoscenzeRiesci a capire cosa dovrebbe andare negli spazi vuoti in modo che i seguenti due componenti insieme producano codice Astro funzionante?
-
src/pages/posts/learning-astro.md ---layout: ../../__________/MyMarkdownLayout.astrotitle: "Imparare su Markdown in Astro"author: Studente Astro____: 2022-08-08---Oggi ho imparato così tanto! Astro mi permette di scrivere in Markdown, ma anche di usare variabili dal frontmatter. Posso persino accedere a quei valori in un componente layout Astro. -
src/layouts/MyMarkdownLayout.astro ---import ____________ from '../components/Footer.astro'const { ___________ } = Astro.props---<h1>{frontmatter.title}</h1><p>Scritto da: {frontmatter.______} il {frontmatter.pubDate}</p>< _______ /><Footer />Mostra gli spazi vuoti riempiti!
-
src/pages/posts/learning-astro.md ---layout: ../../layouts/MyMarkdownLayout.astrotitle: "Imparare su Markdown in Astro"author: Studente AstropubDate: 2022-08-08---Oggi ho imparato così tanto! Astro mi permette di scrivere in Markdown, ma anche di usare variabili dal frontmatter. Posso persino accedere a quei valori in un componente layout Astro. -
src/layouts/MyMarkdownLayout.astro ---import Footer from '../components/Footer.astro'const { frontmatter } = Astro.props---<h1>{frontmatter.title}</h1><p>Scritto da: {frontmatter.author} il {frontmatter.pubDate}</p><slot /><Footer />
-