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
Sezione intitolata 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.src/pages/blog.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></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:src/pages/blog.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
insrc/pages/posts/
e aggiungendo un po’ di contenuto Markdown. Assicurati di includere almeno le proprietà frontmatter usate qui sotto.---layout: ../../layouts/MarkdownPostLayout.astrotitle: Il mio quarto articolo del blogauthor: Studente Astrodescription: "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-08tags: ["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
Sezione intitolata Sfida: Crea un componente BlogPostProva 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
eurl
comeAstro.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
src/pages/blog.astro ---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
src/components/BlogPost.astro ---const { title, url } = Astro.props---<li><a href={url}>{title}</a></li>src/pages/blog.astro ---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
Sezione intitolata Metti alla prova le tue conoscenzeSe 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.
-
Un link all’URL del tuo primo articolo del blog.
-
Un componente per ogni articolo, che visualizza la data dell’ultimo aggiornamento.