Premiers pas avec les collections de contenu dans Astro —

Cette introduction aux collections de contenu dans Astro est exclue de Libérer la puissance d’Astrodisponible dès maintenant sur SitePoint Premium.

Pour utiliser les collections de contenu, Astro désigne un dossier spécial : src/content. Par la suite, nous pouvons créer des sous-dossiers au sein de cet emplacement, chacun générant des collections de contenu individuelles. Par exemple, nous pourrions créer des collections telles que src/content/dev-blog et src/content/corporate-blog.

Chaque collection de contenu peut être configurée dans un fichier de configuration :/src/content/config.js (ou .ts) — où nous avons la possibilité d’utiliser des schémas de collection en utilisant Zod.

Zod est une « validation de schéma TypeScript-first avec inférence de type statique » intégrée à Astro. Voici un exemple de la façon dont cela prendrait forme :

// src/content/config.js
import { z, defineCollection } from 'astro:content';

const devBlogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string().default('The Dev Team'),
    tags: z.array(z.string()),
    date: z.date(),
    draft: z.boolean().default(true),
    description: z.string(),
  }),
});

const corporateBlogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string(),
    date: z.date(),
    featured: z.boolean(),
    language: z.enum(['en', 'es']),
  }),
});

export const collections = {
  devblog: devBlogCollection,
  corporateblog: corporateBlogCollection,
};

Dans le code ci-dessus, nous définissons deux collections de contenu : une pour un « blog de développeur » et une pour un « blog d’entreprise ». Le defineCollection méthode nous permet de créer un schema pour une collection donnée. Pour le « blog des développeurs », nous créons un schéma dans lequel les articles de cette catégorie de blog doivent avoir un titre (chaîne), un auteur (chaîne par défaut « The Dev Team »), des balises (tableau de chaînes), une date (date). type), brouillon (booléen par défaut true) et une description (chaîne).

Pour le « blog d’entreprise », notre schéma est un peu différent : nous avons une chaîne à la fois pour le titre et pour l’auteur. La date (type de données) sera également requise par le contenu, ainsi que l’indicateur présenté (booléen) et une langue (énumération), qui peut être définie sur en ou es.

Enfin, nous exportons un collections objet avec deux propriétés, devblog et corporateblog. Ceux-ci seront utilisés plus tard.

---
title: 'Buy!!'
author: 'Jack from Marketing'
date: 2023-07-19
featured: true
language: 'en'
---

# Some Marketing Promo

This is the best product!

Création de limaces

Astro générera automatiquement des slugs pour les publications en fonction du nom du fichier. Par exemple, la limace pour first-post.md sera first-post. Cependant, si nous fournissons un slug entrée dans notre frontmatterAstro respectera cela et utilisera notre slug personnalisé.

Gardez à l’esprit que les propriétés spécifiées dans le export const collections L’objet doit correspondre aux noms de dossiers dans lesquels le contenu va vivre. (Notez également qu’ils sont sensibles à la casse !)

Interrogation de données

Une fois que nous avons tous les fichiers Markdown en place (dans notre cas, ce serait sous src/content/devblog et src/content/corporateblog) et notre config.js le fichier étant prêt, nous pouvons commencer à interroger les données des collections, ce qui est un processus simple :

---
import { getCollection } from 'astro:content';
const allDevPosts = await getCollection('devblog');
const allCorporatePosts = await getCollection('corporateblog');
---
<pre>{JSON.stringify(allDevPosts)}</pre>
<pre>{JSON.stringify(allCorporatePosts)}</pre>

Comme vu ci-dessus, le getCollection La méthode peut être utilisée pour récupérer toutes les entrées d’une collection donnée (encore une fois, en faisant référence aux noms de collection exportés précédemment). Dans l’exemple ci-dessus, nous récupérons tous les articles du « blog développeur » (devblog) et du « blog d’entreprise » (corporateblog). Dans le modèle, nous renvoyons simplement les données brutes en utilisant JSON.stringify().

Nous devrions également examiner les données affichées via JSON.stringify()et nous devons noter que, outre le frontmatter données, nous obtenons également un idun sluget un body propriété remise en service lorsque cette dernière contient le contenu de la publication.

Nous pouvons également filtrer les brouillons ou les articles rédigés dans une langue particulière dans le frontmatter section en parcourant tous les articles comme celui-ci :

import { getCollection } from 'astro:content';

const spanishEntries = await getCollection('corporateblog', ({ data }) => {
  return data.language === 'es';
});

getCollection renvoie tous les messages, mais on peut aussi utiliser getEntry pour renvoyer une seule entrée à partir d’une collection :

import { getEntry } from 'astro:content';

const singleEntry = await getEntry('corporateblog', 'pr-article-1');

getCollection et getEntries

Bien qu’il existe deux manières de renvoyer plusieurs publications de collections, il existe une différence subtile entre les deux. getCollection() récupère une liste d’entrées de collection de contenu par nom de collection, tandis que getEntries() récupère plusieurs entrées de collection de la même collection.

La documentation Astro donne l’exemple de getEntries() étant utilisé pour récupérer du contenu lors de l’utilisation d’entités de référence (par exemple, une liste de publications associées).

Le concept de publications associées permet de référencer un ensemble de publications d’une collection. Ceci peut être réalisé en ajoutant ce qui suit au schéma lors de l’utilisation du defineCollection méthode:

import { defineCollection, reference, z } from 'astro:content';

const devblog = defineCollection({
  schema: z.object({
    title: z.string(),
    relatedPosts: z.array(reference('blog')),
  }),
});

Dans le code ci-dessus, nous importons également reference et l’utiliser lors de l’ajout relatedPosts à notre schéma. (Notez que nous pouvons appeler cela comme nous voulons, comme recommendedPosts ou followupPosts.)

Pour les utiliser relatedPostsles valeurs de slug appropriées doivent être ajoutées au frontmatter une partie du Markdown :

title: "This is a post"
relatedPosts:

- A related post # `src/content/devblog/a-related-post.md

Les entités de référence sont définies dans le config.js fichier pour la collection de contenu et utilisez le reference méthode de Zod :

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    relatedPosts: z.array(reference('blog')).optional(),
    author: reference('author'),
  }),
});

const author = defineCollection({
  type: 'data',
  schema: z.object({
    name: z.string(),
  }),
});

Notez également l’utilisation de type: 'content' et type: 'data'. Dans ce cas, la collection englobe à la fois des formats de création de contenu tels que Markdown (type: 'content') et des formats de données comme JSON ou YAML (type: 'data').

Afficher le contenu

Maintenant que nous savons comment interroger les données, voyons comment les afficher de manière formatée. Astro propose une méthode pratique appelée render() pour restituer l’intégralité du contenu du Markdown dans un composant Astro intégré appelé <Content />. La façon dont nous construisons et affichons le contenu dépendra également du fait que nous ayons une génération de site statique ou un mode de rendu côté serveur.

Pour le pré-rendu, nous pouvons utiliser le getStaticPaths() méthode:

// /src/pages/posts/[...slug].astro
---
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const blogEntries = await getCollection('blog');
  return blogEntries.map(entry => ({
    params: { slug: entry.slug }, props: { entry },
  }));
}

const { entry } = Astro.props;
const { Content } = await entry.render();
---
<h1>{entry.data.title}</h1>
<Content />

Dans le code ci-dessus, nous utilisons getStaticPaths(). (Nous avons abordé cette méthode dans le deuxième tutoriel de cette série comme moyen de prendre en charge les itinéraires dynamiques.) Nous nous appuyons ensuite sur Astro.props pour capturer le entryqui sera un objet contenant les métadonnées sur l’entrée, un idun sluget un render() méthode. Cette méthode est responsable du rendu de l’entrée Markdown au format HTML dans le modèle Astro, et elle le fait en créant un <Content /> composant. Ce qui est étonnant, c’est que tout ce que nous devons faire maintenant, c’est ajouter le <Content /> composant à notre modèle et nous pourrons voir le contenu Markdown rendu en HTML.

Vous voulez en savoir plus sur Astro, le framework tout-en-un moderne permettant de créer des sites Web plus rapides et axés sur le contenu ? Vérifier Libérer la puissance d’Astrodisponible dès maintenant sur SitePoint Premium.