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
Titre de la section Afficher dynamiquement une liste d’articles-
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.src/pages/blog.astro ---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> -
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 :src/pages/blog.astro ---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()
. -
Ajoutez un nouvel article de blog en créant un nouveau fichier
post-4.md
danssrc/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.astrotitle: Mon quatrième article de blogauthor: Apprenti Astrodescription: "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-08tags: ["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. -
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
Titre de la section Défi : Créer un composant BlogPostEssayez 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
-
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 titre (
title
) et uneurl
en tant queAstro.props
.Afficher le code
src/components/BlogPost.astro ---const { title, url } = Astro.props;--- -
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> -
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 = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true }));const pageTitle = "Mon blog d'apprentissage Astro";--- -
Vérifiez vous-même : 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 = 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
Titre de la section Tester vos connaissancesSi 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 article de blog.
-
Un lien vers l’URL de votre premier article de blog.
-
Un composant pour chaque article, affichant la date de sa dernière mise à jour.