Facultatif : Créer une collection de contenu
Maintenant que vous avez un blog utilisant le routage basé sur des fichiers intégré d’Astro, vous allez le mettre à jour pour utiliser une collection de contenu. Les collections de contenu sont un moyen puissant de gérer des groupes de contenu similaire, tels que des articles de blog.
Préparez-vous à…
- Déplacez votre dossier d’articles de blog dans
src/blog/
- Créez un schéma pour définir le frontmatter de votre article de blog
- Utilisez
getCollection()
pour obtenir le contenu et les métadonnées des articles de blog
Apprendre : Pages vs Collections
Titre de la section Apprendre : Pages vs CollectionsMême lorsque vous utilisez des collections de contenu, vous utiliserez toujours le dossier src/pages/
pour les pages individuelles, telles que votre page À propos. Cependant, déplacer vos articles de blog en dehors de ce dossier spécial vous permettra d’utiliser des API plus puissantes et plus performantes pour générer l’index de vos articles de blog et afficher vos articles de blog individuels.
Dans le même temps, vous recevrez de meilleurs conseils et une meilleure saisie semi-automatique dans votre éditeur de code, car vous disposerez d’un schéma pour définir une structure commune pour chaque publication qu’Astro vous aidera à appliquer via Zod, une bibliothèque de déclaration de schéma et de validation pour TypeScript. Dans votre schéma, vous pouvez spécifier quand les propriétés du frontmatter sont requises, comme une description ou un auteur, et quel type de données doit être associé à chaque propriété, comme une chaîne de caractères ou un tableau. Cela permet de détecter de nombreuses erreurs plus tôt, avec des messages d’erreur descriptifs vous indiquant exactement quel est le problème.
Apprenez-en plus sur les collections de contenu d’Astro dans notre guide, ou commencez avec les instructions ci-dessous pour convertir un blog de base de src/pages/posts/
en src/blog/
.
Testez vos connaissances
Titre de la section Testez vos connaissances-
Quel type de page conserveriez-vous probablement dans
src/pages/
? -
Lequel n’est pas un avantage de déplacer des articles de blog vers une collection de contenu ?
-
Les collections de contenu utilisent TypeScript …
Les étapes ci-dessous vous montrent comment étendre le produit final du didacticiel Créer un blog en créant une collection de contenu pour les articles de blog.
Mise à niveau des dépendances
Titre de la section Mise à niveau des dépendancesEffectuez une mise à niveau vers la dernière version d’Astro et mettez à niveau toutes les intégrations vers leurs dernières versions en exécutant les commandes suivantes dans votre terminal :
Créez une collection pour vos articles
Titre de la section Créez une collection pour vos articles-
Créez une nouvelle collection (dossier) nommée
src/blog/
. -
Déplacez tous vos articles de blog existants (fichiers
.md
) desrc/pages/posts/
vers cette nouvelle collection. -
Créez un fichier
src/content.config.ts
pour définir un schéma pour votrepostsCollection
. Pour le code existant du tutoriel de blog, ajoutez le contenu suivant au fichier pour définir toutes les propriétés de frontmatter utilisées dans ses articles de blog : -
Pour qu’Astro reconnaisse votre schéma, quittez (
CTRL + C
) et redémarrez le serveur de développement pour continuer le tutoriel. Cela définira le moduleastro:content
.
Générer des pages à partir d’une collection
Titre de la section Générer des pages à partir d’une collection-
Créez un fichier de page appelé
src/pages/posts/[...slug].astro
. Vos fichiers Markdown et MDX ne deviennent plus automatiquement des pages utilisant le routage basé sur les fichiers d’Astro lorsqu’ils se trouvent dans une collection. Vous devez donc créer une page chargée de générer chaque article de blog individuel. -
Ajoutez le code suivant pour interroger votre collection afin de rendre le slug et le contenu de chaque page d’article de blog disponibles pour chaque page qu’elle générera :
-
Rendez votre article avec
<Content />
dans la mise en page pour les pages Markdown. Cela vous permet de spécifier une mise en page commune pour tous vos articles. -
Supprimez la propriété
layout
dans le frontmatter de chaque article. Votre contenu est désormais enveloppé dans une mise en page lors du rendu, et cette propriété n’est plus nécessaire.
Remplacez import.meta.glob()
par getCollection()
Titre de la section Remplacez import.meta.glob() par getCollection()-
Partout où vous avez une liste d’articles de blog, comme la page Blog du tutoriel (
src/pages/blog.astro/
), vous devrez remplacerimport.meta.glob()
pargetCollection()
comme moyen de récupérer le contenu et les métadonnées de vos fichiers Markdown. -
Vous devrez également mettre à jour les références aux données renvoyées pour chaque
post
. Vous trouverez maintenant les valeurs de votre frontmatter dans la propriétédata
de chaque objet. De plus, lors de l’utilisation de collections, chaque objetpost
aura unslug
de page, et non une URL complète. -
Le projet de blog du tutoriel génère également dynamiquement une page pour chaque étiquette à l’aide de
src/pages/tags/[tag].astro
et affiche une liste des étiquettes danssrc/pages/tags/index.astro
.Appliquez les mêmes modifications que ci-dessus à ces deux fichiers :
- récupérez des données sur tous vos articles de blog en utilisant
getCollection("blog")
au lieu d’utiliserimport.meta.glob()
- accédez à toutes les valeurs de frontmatter en utilisant
data
au lieu defrontmatter
- créez une URL de page en ajoutant le
slug
de l’article au chemin/posts/
La page qui génère des pages d’étiquettes individuelles devient désormais :
Essayez-le vous-même - Mettez à jour la requête dans la page d’index des étiquettes
Titre de la section Essayez-le vous-même - Mettez à jour la requête dans la page d’index des étiquettesImportez et utilisez
getCollection
pour récupérer les balises utilisées dans les articles de blog sursrc/pages/tags/index.astro
, en suivant les mêmes étapes que ci-dessus.Montrez-moi le code.
- récupérez des données sur tous vos articles de blog en utilisant
Mettez à jour toutes les valeurs du frontmatter pour qu’elles correspondent à votre schéma
Titre de la section Mettez à jour toutes les valeurs du frontmatter pour qu’elles correspondent à votre schémaSi nécessaire, mettez à jour toutes les valeurs du frontmatter de votre projet, comme dans votre mise en page, qui ne correspondent pas au schéma de vos collections.
Dans l’exemple du tutoriel du blog, pubDate
était une chaîne de caractères. Désormais, selon le schéma qui définit les types pour le sujet de publication, pubDate
sera un objet Date
. Vous pouvez maintenant en profiter pour utiliser les méthodes disponibles pour n’importe quel objet Date
pour formater la date.
Pour afficher la date dans la mise en page de l’article de blog, convertissez-la en chaîne de caractères à l’aide de la méthode toLocaleDateString()
:
Mettre à jour la fonction RSS
Titre de la section Mettre à jour la fonction RSSLe projet de blog du tutoriel comprend un flux RSS. Cette fonction doit également utiliser getCollection()
pour renvoyer des informations à partir de vos articles de blog. Vous générerez ensuite les éléments RSS à l’aide de l’objet data
renvoyé.
Pour l’exemple complet du tutoriel de blog utilisant des collections de contenu, consultez la branche Collections de contenu du dépôt du tutoriel.
Tutorials