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 import.meta.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

Ajoutez le code suivant à blog.astro pour retourner des informations sur tous vos fichiers Markdown. import.meta.glob() renverra un tableau d’objets, un pour chaque billet 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 voyage d'apprentissage d'Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Billet 1</a></li>
    <li><a href="/posts/post-2/">Billet 2</a></li>
    <li><a href="/posts/post-3/">Billet 3</a></li>
  </ul>
</BaseLayout>

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 :

---
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 voyage d'apprentissage d'Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Billet 1</a></li>
    <li><a href="/posts/post-2/">Billet 2</a></li>
    <li><a href="/posts/post-3/">Billet 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 de manière dynamique à l’aide du support TypeScript intégré d’Astro, en parcourant le tableau renvoyé par import.meta.glob().

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 `import.meta.glob()` renvoie une liste de tous mes billets pour créer ma liste.

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 :

<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

Créez un nouveau composant dans src/components/.
Afficher le nom de fichier
```
BlogPost.astro
```
É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;
---
```
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>
```

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";
---

Vérifiez-vous : 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 voyage d'apprentissage d'Astro.</p>
  <ul>
    {allPosts.map((post: any) => <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 = Object.values(import.meta.glob('./posts/*.md', { eager:  true }));
---

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

Le titre de votre troisième billet de blog.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>Premier billet !!</a>
Un lien vers l’URL de votre premier billet de blog.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>Premier billet !!</a>
Un composant pour chaque billet, affichant la date de sa dernière mise à jour.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>Premier billet !!</a>

Liste de vérification

Je peux interroger des données à partir de mes fichiers locaux.
Je peux afficher une liste de tous mes billets de blog.

Ressources

Importation avec des modèles glob dans Astro

Contribuer Communauté Parrainer