Début avec les collections de contenu à Astro

débutant de la collection de contenu Astro: construire un puissant modèle de contenu

Cet article est extrait du livre désormais publié "déverrouillant la puissance d'Astro" sur SitePoint Premium. Nous apprendrons à créer des modèles de contenu flexibles et évolutifs en utilisant les capacités de collecte de contenu d'Astro.

Astro utilise des dossiers spéciaux src/content pour gérer les collections de contenu. Vous pouvez créer des sous-dossiers pour organiser différentes collections de contenu, telles que src/content/dev-blog et src/content/corporate-blog.

Chaque collection de contenu peut être configurée dans un fichier de configuration (par exemple, /src/content/config.js ou .ts) et utilise ZOD pour définir le modèle de collecte. ZOD est un "outil de vérification de schéma basé sur TypeScript avec une inférence de type statique" qui a été intégré à Astro.

Ce qui suit est un exemple de configuration:

// 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,
};

Le code définit deux collections de contenu: "Blog du développeur" et "Blog Enterprise". La méthode defineCollection vous permet de créer des modèles pour chaque collection.

Fichiers de marque et contenu frontal

La collection d'exemples de contenu dans ce didacticiel suppose que le fichier .md contient du contenu frontal qui correspond au modèle spécifié dans le fichier de configuration. Par exemple, un article "Blog d'entreprise" peut ressembler à ceci:

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

# Some Marketing Promo

This is the best product!

Génération de limaces

Astro générera automatiquement des limaces pour les articles basés sur le nom du fichier. Par exemple, la limace de first-post.md est first-post. Si le champ slug est fourni dans le contenu frontal, Astro utilisera une limace personnalisée.

Notez que les propriétés spécifiées dans l'objet export const collections doivent correspondre (et être sensible à la casse) Le nom du dossier où se trouve le contenu.

Data Query

Lorsque vous préparez le fichier Markdown (situé dans les fichiers src/content/devblog et src/content/corporateblog) et config.js, vous pouvez commencer à interroger les données dans la collection:

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

La méthode

getCollection peut être utilisée pour récupérer toutes les entrées dans un ensemble donné. Tous les articles dans "Developer Blog" (devblog) et "Company Blog" (corporateblog) sont récupérés dans l'exemple. Utilisez JSON.stringify() dans le modèle pour renvoyer les données d'origine.

En plus des données de contenu frontal, les données renvoyées incluent également les attributs id, slug et body (les attributs body contiennent du contenu de l'article).

Vous pouvez également filtrer les brouillons ou les articles spécifiques à la langue en itérant sur tous les articles:

import { getCollection } from 'astro:content';

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

getCollection Renvoie tous les messages, mais vous pouvez également utiliser getEntry pour retourner une seule entrée dans la collection:

import { getEntry } from 'astro:content';

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

getCollection vs getEntries

Bien qu'il existe deux façons de retourner plusieurs articles d'une collection, il existe de légères différences entre les deux. getCollection() récupère une liste des entrées de collection de contenu basées sur le nom de la collection, tandis que getEntries() récupère plusieurs entrées de collection de la même collection.

Des exemples de getEntries() pour récupérer le contenu sont donnés dans le

où des entités de référence sont utilisées (par exemple, listes d'articles connexes).

affichage du contenu

render() Maintenant, nous savons comment interroger les données, discutons comment afficher les données de manière formatée. Astro fournit une méthode pratique appelée <content></content> pour rendre l'intégralité du contenu de Markdown dans le composant Astro intégré

. La façon dont vous créez et affichez le contenu dépend également de la question de savoir si vous utilisez la génération de sites statiques ou le mode de rendu côté serveur.

getStaticPaths() Pour le pré-rendu, vous pouvez utiliser la méthode

:

// 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,
};

getStaticPaths() est utilisé dans le code Astro.props. Comptez ensuite sur id pour capturer l'entrée, qui sera un objet contenant les méthodes de métadonnées, slug, render() et <content></content> sur l'entrée. Cette méthode est responsable du rendu de l'entrée Markdown sur HTML dans le modèle Astro, qui est implémenté en créant un composant <content></content>. Étonnamment, il vous suffit maintenant d'ajouter le composant

au modèle pour voir le contenu Markdown rendu à HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!