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

Quando includi la proprietà frontmatter layout in un file .md, tutti i tuoi valori YAML frontmatter sono disponibili per il file layout.

1. Crea un nuovo file in src/layouts/MarkdownPostLayout.astro

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

3. Aggiungi la seguente proprietà frontmatter in post-1.md

   src/pages/posts/post-1.md

   ---
   layout: ../../layouts/MarkdownPostLayout.astro
   title: 'Il mio primo articolo del blog'
   pubDate: 2022-07-01
   description: '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"]
   ---

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

5. Aggiungi la stessa proprietà layout ai tuoi altri due articoli del blog post-2.md e post-3.md. Verifica nel tuo browser che il tuo layout sia applicato anche a questi articoli.

Consiglio

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

Sfida: 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:

src/pages/posts/post-1.md

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.

src/layouts/MarkdownPostLayout.astro

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

src/layouts/MarkdownPostLayout.astro

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

Evita la duplicazione

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

Riesci a capire cosa dovrebbe andare negli spazi vuoti in modo che i seguenti due componenti insieme producano codice Astro funzionante?

1. src/pages/posts/learning-astro.md

   ---
   layout: ../../__________/MyMarkdownLayout.astro
   title: "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.

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

   1. src/pages/posts/learning-astro.md

      ---
      layout: ../../layouts/MyMarkdownLayout.astro
      title: "Imparare su Markdown in Astro"
      author: Studente Astro
      pubDate: 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.

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

Checklist

• Posso aggiungere una proprietà layout a un articolo del blog Markdown nel suo frontmatter YAML.
• Posso creare un layout separato per gli articoli Markdown.
• Posso usare valori dal frontmatter di un articolo del blog in un componente layout.

Risorse

• Layout Markdown in Astro (EN)

• Props Layout Markdown

• Introduzione a YAML external