Crea un archivio di articoli del blog

Ora che hai alcuni articoli del blog a cui collegarti, è il momento di configurare la pagina Blog per creare automaticamente un elenco di essi!

Preparati a…

Accedi ai dati da tutti i tuoi articoli contemporaneamente usando import.meta.glob()
Visualizza un elenco di articoli generato dinamicamente sulla tua pagina Blog
Esegui il refactoring per usare un componente <BlogPost /> per ogni voce di elenco

Visualizza dinamicamente un elenco di articoli

Aggiungi il seguente codice a blog.astro per restituire informazioni su tutti i tuoi file Markdown. import.meta.glob() restituirà un array di oggetti, uno per ogni articolo del blog.

---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
const pageTitle = "Il mio Blog di apprendimento di Astro";
---
<BaseLayout pageTitle={pageTitle}>
  <p>Questo è dove pubblicherò sul mio percorso di apprendimento di Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Articolo 1</a></li>
    <li><a href="/posts/post-2/">Articolo 2</a></li>
    <li><a href="/posts/post-3/">Articolo 3</a></li>
  </ul>
</BaseLayout>

Per generare l’intero elenco di articoli dinamicamente, usando i titoli e gli URL degli articoli, sostituisci i tuoi singoli tag <li> con il seguente codice Astro:

---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
const pageTitle = "Il mio Blog di apprendimento di Astro";
---
<BaseLayout pageTitle={pageTitle}>
  <p>Questo è dove pubblicherò sul mio percorso di apprendimento di Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Articolo 1</a></li>
    <li><a href="/posts/post-2/">Articolo 2</a></li>
    <li><a href="/posts/post-3/">Articolo 3</a></li>

    {allPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  </ul>
</BaseLayout>

Il tuo intero elenco di articoli del blog viene ora generato dinamicamente usando il supporto TypeScript integrato di Astro, mappando sull’array restituito da import.meta.glob().

Aggiungi un nuovo articolo del blog creando un nuovo file post-4.md in src/pages/posts/ e aggiungendo un po’ di contenuto Markdown. Assicurati di includere almeno le proprietà frontmatter usate qui sotto.

---
layout: ../../layouts/MarkdownPostLayout.astro
title: Il mio quarto articolo del blog
author: Studente Astro
description: "Questo articolo apparirà da solo!"
image:
    url: "https://docs.astro.build/default-og-image.png"
    alt: "La parola astro su un'illustrazione di pianeti e stelle."
pubDate: 2022-08-08
tags: ["astro", "successi"]
---
Questo articolo dovrebbe apparire con gli altri miei articoli del blog, perché `import.meta.glob()` sta restituendo un elenco di tutti i miei articoli per creare il mio elenco.

Visita di nuovo la tua pagina blog nell’anteprima del tuo browser su http://localhost:4321/blog e cerca un elenco aggiornato con quattro elementi, incluso il tuo nuovo articolo del blog!

Sfida: Crea un componente BlogPost

Prova da solo ad apportare tutte le modifiche necessarie al tuo progetto Astro in modo da poter invece usare il seguente codice per generare il tuo elenco di articoli del blog:

<ul>
  {allPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  {allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
</ul>

Espandi per vedere i passaggi

Crea un nuovo componente in src/components/.
Mostra il nome del file
```
BlogPost.astro
```
Scrivi la riga di codice nel tuo componente in modo che sia in grado di ricevere un title e url come Astro.props.
Mostra il codice
src/components/BlogPost.astro
```
---
const { title, url } = Astro.props;
---
```
Aggiungi il templating usato per creare ogni elemento nel tuo elenco di articoli del blog.
Mostra il codice
src/components/BlogPost.astro
```
<li><a href={url}>{title}</a></li>
```

Importa il nuovo componente nella tua pagina Blog.

Mostra il codice

---
import BaseLayout from '../layouts/BaseLayout.astro';
import BlogPost from '../components/BlogPost.astro';
const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true }));
const pageTitle = "Il mio Blog di apprendimento di Astro";
---

Controlla te stesso: vedi il codice del componente finito.

Mostra il codice

---
const { title, url } = Astro.props
---
<li><a href={url}>{title}</a></li>

---
import BaseLayout from '../layouts/BaseLayout.astro';
import BlogPost from '../components/BlogPost.astro';
const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true }));
const pageTitle = "Il mio Blog di apprendimento di Astro"
---
<BaseLayout pageTitle={pageTitle}>
  <p>Questo è dove pubblicherò sul mio percorso di apprendimento di Astro.</p>
  <ul>
    {allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
  </ul>
</BaseLayout>

Metti alla prova le tue conoscenze

Se il tuo componente Astro contiene la seguente riga di codice:

---
const myPosts = Object.values(import.meta.glob('./posts/*.md', { eager:  true }));
---

Scegli la sintassi che potresti scrivere per rappresentare:

Il titolo del tuo terzo articolo del blog.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>Primo Articolo!!</a>
Un link all’URL del tuo primo articolo del blog.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>Primo Articolo!!</a>
Un componente per ogni articolo, che visualizza la data dell’ultimo aggiornamento.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>Primo Articolo!!</a>

Checklist

Posso interrogare i dati dai miei file locali.
Posso visualizzare un elenco di tutti i miei articoli del blog.

Risorse

Importazione di pattern glob in Astro (EN)

Contribuisci Comunità Sponsor