Aller au contenu

Créer une archive d'articles de blog

Maintenant que vous avez quelques articles de blog à lier, il est temps de configurer la page Blog pour les lister automatiquement !

Préparez-vous à…

  • Accéder aux données de tous vos articles en une fois en utilisant import.meta.glob()
  • Afficher une liste d'articles générée dynamiquement sur votre page Blog
  • Refactorer pour utiliser un composant <BlogPost /> pour chaque élément de liste

Afficher dynamiquement une liste d'articles

  1. Ajoutez le code suivant dans blog.astro pour retourner des informations sur tous vos fichiers Markdown. import.meta.glob() renverra un tableau d'objets, un pour chaque article de blog.

    ---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
const pageTitle = "Mon blog d'apprentissage Astro";
---
<BaseLayout pageTitle={pageTitle}>
  <p>C'est ici que je vais publier sur mon parcours d'apprentissage d'Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Article 1</a></li>
    <li><a href="/posts/post-2/">Article 2</a></li>
    <li><a href="/posts/post-3/">Article 3</a></li>
  </ul>
</BaseLayout>

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

    ---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
const pageTitle = "Mon blog d'apprentissage Astro";
---
<BaseLayout pageTitle={pageTitle}>
  <p>C'est ici que je vais publier sur mon parcours d'apprentissage d'Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Article 1</a></li>
    <li><a href="/posts/post-2/">Article 2</a></li>
    <li><a href="/posts/post-3/">Article 3</a></li>

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

    Votre liste complète d'articles de blog est désormais générée dynamiquement à l'aide de la prise en charge de TypeScript intégrée dans Astro, en parcourant le tableau renvoyé par import.meta.glob().

  3. Ajoutez un nouvel article 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 article de blog
author: Apprenti Astro
description: "Ce article 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"]
---
Cet article devrait apparaître avec mes autres articles de blog, car `import.meta.glob()` renvoie une liste de tous mes articles pour créer ma liste.

  4. Revisitez votre page de blog dans l'aperçu de votre navigateur à l'adresse http://localhost:4321/blog et recherchez une liste mise à jour avec quatre éléments, y compris votre nouvel article de blog !

Défi : Créer 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 d'articles de 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>

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 titre (title) et une url en tant que Astro.props.

    Afficher le code

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

  3. Ajoutez le modèle utilisé pour créer chaque élément de votre liste d’articles 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

    ---
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 = "Mon blog d'apprentissage Astro";
---

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

    Afficher le code

    ---
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 = "Mon blog d'apprentissage Astro"
---
<BaseLayout pageTitle={pageTitle}>
  <p>C'est ici que je vais publier sur mon parcours d'apprentissage d'Astro.</p>
  <ul>
    {allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
  </ul>
</BaseLayout>

Tester vos connaissances

Si votre composant Astro contient la ligne de code suivante :

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

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

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

  2. Un lien vers l'URL de votre premier article de blog.

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

Liste de contrôle

Ressources

Contribuer Communauté Parrainer