| type | title | description | i18nReady |
|---|---|---|---|
tutorial |
Créez une archive de billets de blog |
Tutoriel : Construisez votre premier blog Astro —
Utilisez Astro.glob() pour accéder aux données de fichiers de votre projet |
true |
import Box from '/components/tutorial/Box.astro';
import Checklist from '/components/Checklist.astro';
import MultipleChoice from '/components/tutorial/MultipleChoice.astro';
import Option from '/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
Maintenant que vous avez quelques billets de blog à lier, configurons la page Blog pour créer automatiquement une liste d'entre eux !
- 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 `` pour chaque élément de liste 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.```astro title="src/pages/blog.astro" ins={3}
---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = await Astro.glob('./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>
```
-
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 = await Astro.glob('./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(). -
Ajoutez un nouveau billet de blog en créant un nouveau fichier
post-4.mddanssrc/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.
-
Revisitez votre page de blog dans votre aperçu de navigateur à l'adresse
http://localhost:4321/bloget recherchez une liste mise à jour avec quatre éléments, y compris votre nouveau billet de blog !
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) => <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/`.<details>
<summary>Afficher le nom de fichier</summary>
```
BlogPost.astro
```
</details>
-
Écrivez la ligne de code dans votre composant pour qu'il puisse recevoir un
titleet uneurlen tant queAstro.props.Afficher le code
```astro --- // 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
```astro- {title}
``` -
Importez le nouveau composant dans votre page de blog.
Afficher le code
```astro title="src/pages/blog.astro" ins={3} --- 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"; --- ``` -
Vérifiez-vous : consultez le code du composant terminé.
Afficher le code
```astro title="src/components/BlogPost.astro" --- const { title, url } = Astro.props ---- {title}
``` ```astro title="src/pages/blog.astro" ins={3,10} --- 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" ---C'est ici que je vais publier sur mon voyage d'apprentissage d'Astro.
-
{allPosts.map((post) => )}
Si votre composant Astro contient la ligne de code suivante :
---
const myPosts = await Astro.glob('./posts/*.md');
---Choisissez la syntaxe que vous pourriez écrire pour représenter :
-
Le titre de votre troisième billet de blog.
`myPosts.map((post) => )` `myPosts[2].frontmatter.title` `Premier billet !!` -
Un lien vers l'URL de votre premier billet de blog.
`myPosts.map((post) => )` `myPosts[2].frontmatter.title` `Premier billet !!` -
Un composant pour chaque billet, affichant la date de sa dernière mise à jour.
`myPosts.map((post) => )` `myPosts[2].frontmatter.title` `Premier billet !!`