Salta ai contenuti

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

Prova tu stesso - Personalizza il tuo layout di articoli del blog

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

Metti alla prova le tue conoscenze

Sezione intitolata 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

Sezione intitolata Checklist

Risorse

Sezione intitolata Risorse
Contribuisci Comunità Sponsor