Salta ai contenuti

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
  1. 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>
  2. 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().

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

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:

src/pages/blog.astro
<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
  1. Crea un nuovo componente in src/components/.

    Mostra il nome del file
    BlogPost.astro
  2. 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;
    ---
  3. 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>
  4. 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";
    ---
  5. 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>

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:

  1. Il titolo del tuo terzo articolo del blog.

  2. Un link all’URL del tuo primo articolo del blog.

  3. Un componente per ogni articolo, che visualizza la data dell’ultimo aggiornamento.

Contribuisci Comunità Sponsor