Aller au contenu
Astro Astro

Créez une archive de billets de blog

Maintenant que vous avez quelques billets de blog à lier, configurons la page Blog pour créer automatiquement une liste d’entre eux !

Préparez-vous à…

  • Accédez aux données de tous vos billets en une fois en utilisant Astro.glob()
  • Affichez une liste générée dynamiquement de billets sur votre page Blog
  • Refactorez pour utiliser un composant <BlogPost /> pour chaque élément de liste

Afficher dynamiquement une liste de billets

  1. Ajoutez le code suivant à blog.astro pour retourner des informations sur tous vos fichiers Markdown. Astro.glob() renverra un tableau d’objets, un pour chaque billet de blog.
src/pages/blog.astro
---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "Mon blog d'apprentissage Astro";
---
<BaseLayout pageTitle={pageTitle}>
  <p>C'est ici que je vais publier sur mon voyage d'apprentissage d'Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Poste 1</a></li>
    <li><a href="/posts/post-2/">Poste 2</a></li>
    <li><a href="/posts/post-3/">Poste 3</a></li>
  </ul>
</BaseLayout>

  1. Pour générer toute la liste de billets dynamiquement, en utilisant les titres et les URL des billets, remplacez vos balises <li> individuelles par le code Astro suivant :

    src/pages/blog.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro'
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mon blog d'apprentissage Astro";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>C'est ici que je vais publier sur mon voyage d'apprentissage d'Astro.</p>
      <ul>
        <li><a href="/posts/post-1/">Poste 1</a></li>
        <li><a href="/posts/post-2/">Poste 2</a></li>
        <li><a href="/posts/post-3/">Poste 3</a></li>
    

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

    L’ensemble de votre liste de billets de blog est maintenant généré dynamiquement, en parcourant le tableau renvoyé par Astro.glob().

  2. Ajoutez un nouveau billet de blog en créant un nouveau fichier post-4.md dans src/pages/posts/ et en ajoutant un contenu Markdown. Assurez-vous d’inclure au moins les propriétés de frontmatter utilisées ci-dessous.

---
layout: ../../layouts/MarkdownPostLayout.astro
title: Mon quatrième billet de blog
author: Apprenti Astro
description: "Ce billet apparaîtra tout seul !"
image:
  url: "https://docs.astro.build/default-og-image.png"
  alt: "Le mot « astro » sur fond d'illustration de planètes et d'étoiles."
pubDate: 2022-08-08
tags: ["astro", "réussites"]
---
Ce billet devrait apparaître avec mes autres billets de blog, car `Astro.glob()` renvoie une liste de tous mes billets pour créer ma liste.
  1. Revisitez votre page de blog dans votre aperçu de navigateur à l’adresse http://localhost:4321/blog et recherchez une liste mise à jour avec quatre éléments, y compris votre nouveau billet de blog !

Défi : Créez un composant BlogPost

Essayez de faire vous-même toutes les modifications nécessaires à votre projet Astro afin de pouvoir utiliser le code suivant pour générer votre liste de billets de blog :

src/pages/blog.astro
<ul>
  {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
</ul>
Cliquez pour voir les étapes

  1. Créez un nouveau composant dans src/components/.

    Afficher le nom de fichier
    BlogPost.astro

  2. Écrivez la ligne de code dans votre composant pour qu’il puisse recevoir un title et une url en tant que Astro.props.

    Afficher le code
    src/components/BlogPost.astro
    ---
    const { title, url } = Astro.props;
    ---

  3. Ajoutez la mise en forme utilisée pour créer chaque élément de votre liste de billets de blog.

    Afficher le code
    src/components/BlogPost.astro
    <li><a href={url}>{title}</a></li>

  4. Importez le nouveau composant dans votre page de blog.

    Afficher le code
    src/pages/blog.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import BlogPost from '../components/BlogPost.astro';
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mon blog d'apprentissage Astro";
    ---

  5. Vérifiez-vous : consultez le code du composant terminé.

    Afficher le code
    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 = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mon blog d'apprentissage Astro"
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>C'est ici que je vais publier sur mon voyage d'apprentissage d'Astro.</p>
      <ul>
        {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
      </ul>
    </BaseLayout>

Testez vos connaissances

Si votre composant Astro contient la ligne de code suivante :

---
const myPosts = await Astro.glob('../pages/posts/*.md');
---

Choisissez la syntaxe que vous pourriez écrire pour représenter :

  1. Le titre de votre troisième billet de blog.

  2. Un lien vers l’URL de votre premier billet de blog.

  3. Un composant pour chaque billet, affichant la date de sa dernière mise à jour.

Liste de vérification

Ressources