Collections de contenus

Ajouté à la version : astro@2.0.0

Les collections de contenu sont le meilleur moyen de gérer des ensembles de contenu dans n’importe quel projet Astro. Les collections aident à organiser et à interroger vos documents, à activer Intellisense et la vérification de type dans votre éditeur et à fournir une sûreté du typage TypeScript automatique pour tout votre contenu. Astro v5.0 a introduit l’API Content Layer pour définir et interroger les collections de contenu. Cette API performante et évolutive fournit des chargeurs de contenu intégrés pour vos collections locales. Pour le contenu distant, vous pouvez utiliser des chargeurs tiers et créés par la communauté ou créer votre propre chargeur personnalisé et extraire vos données à partir de n’importe quelle source.

Que sont les collections de contenu ?

Vous pouvez définir une collection à partir d’un ensemble de données structurellement similaires. Il peut s’agir d’un répertoire d’articles de blog, d’un fichier JSON de produits ou de toute donnée représentant plusieurs éléments de la même forme.

Les collections stockées localement dans votre projet ou sur votre système de fichiers peuvent contenir des entrées de fichiers Markdown, MDX, Markdoc ou JSON :

Répertoiresrc/
- …
Répertoirenewsletter/ la collection “newsletter”
- week-1.md une entrée de collection
- week-2.md une entrée de collection
- week-3.md une entrée de collection
Répertoireauthors/ la collection “author”
- authors.json un fichier unique contenant toutes les entrées de la collection

Avec un chargeur de collection approprié, vous pouvez récupérer des données distantes à partir de n’importe quelle source externe, telle qu’un CMS, une base de données ou un système de paiement sans tête.

Configuration TypeScript pour les collections

Les collections de contenu s’appuient sur TypeScript pour fournir la validation Zod, Intellisense et la vérification de type dans votre éditeur. Si vous n’étendez pas l’un des paramètres TypeScript strict ou strictest d’Astro, vous devrez vous assurer que compilerOptions définisse les options suivantesdans votre fichier tsconfig.json :

{
  // Inclus avec "astro/tsconfigs/strict" ou "astro/tsconfigs/strictest"
  "extends": "astro/tsconfigs/base",
  "compilerOptions": {
    "strictNullChecks": true, // ajouter si vous utilisez le modèle `base`
    "allowJs": true // requis et inclus avec tous les modèles Astro
  }
}

Définition des collections

Les collections individuelles utilisent defineCollection() pour configurer :

un chargeur (loader) pour une source de données (obligatoire)
un schéma (schema) pour la sûreté du typage (facultatif, mais fortement recommandé !)

Le fichier de configuration des collections

Pour définir des collections, vous devez créer un fichier src/content.config.ts dans votre projet (les extensions .js et .mjs sont également prises en charge). Il s’agit d’un fichier spécial qu’Astro utilisera pour configurer vos collections de contenu en fonction de la structure suivante :

// 1. Importer des utilitaires depuis `astro:content`
import { defineCollection, z } from 'astro:content';

// 2. Importer un ou plusieurs chargeurs
import { glob, file } from 'astro/loaders';

// 3. Définir votre/vos collection(s)
const blog = defineCollection({ /* ... */ });
const dogs = defineCollection({ /* ... */ });

// 4. Exporter un seul objet « collections » pour enregistrer votre/vos collection(s)
export const collections = { blog, dogs };

Définir le `loader` de collection

L’API Content Layer vous permet de récupérer votre contenu (qu’il soit stocké localement dans votre projet ou à distance) et utilise une propriété loader pour récupérer vos données.

Chargeurs intégrés

Astro fournit deux fonctions de chargement intégrées (glob() et file()) pour récupérer votre contenu local, ainsi qu’un accès à l’API pour construire votre propre chargeur et récupérer des données distantes.

Le chargeur glob() crée des entrées à partir de répertoires de fichiers Markdown, MDX, Markdoc ou JSON à partir de n’importe quel endroit du système de fichiers. Il accepte un pattern de fichiers d’entrée à faire correspondre et un chemin de fichier base indiquant où se trouvent vos fichiers. L’id de chaque entrée sera automatiquement généré à partir de son nom de fichier. Utilisez ce chargeur lorsque vous avez un fichier par entrée.

Le chargeur file() crée plusieurs entrées à partir d’un seul fichier local. Chaque entrée du fichier doit avoir une propriété de clé id unique. Il accepte un chemin de fichier base vers votre fichier et éventuellement une fonction parser pour les fichiers de données qu’il ne peut pas analyser automatiquement. Utilisez ce chargeur lorsque votre fichier de données peut être analysé comme un tableau d’objets.

import { defineCollection, z } from 'astro:content';
import { glob, file } from 'astro/loaders'; // Non disponible avec l'API héritée

const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
  schema: /* ... */
});
const dogs = defineCollection({
  loader: file("src/data/dogs.json"),
  schema: /* ... */
  }),
});

const probes = defineCollection({
  // `loader` peut accepter un tableau de plusieurs modèles ainsi que des modèles de chaîne de caractères
  // Chargez tous les fichiers Markdown dans le répertoire space-probes, à l'exception de ceux qui commencent par "voyager-"
  loader: glob({ pattern: ['*.md', '!voyager-*'], base: 'src/data/space-probes' }),
  schema: z.object({
    name: z.string(),
    type: z.enum(['Space Probe', 'Mars Rover', 'Comet Lander']),
    launch_date: z.date(),
    status: z.enum(['Active', 'Inactive', 'Decommissioned']),
    destination: z.string(),
    operator: z.string(),
    notable_discoveries: z.array(z.string()),
  }),
});

export const collections = { blog, dogs, probes };

Fonction `parser`

Le chargeur file() accepte un second argument qui définit une fonction parser. Cela vous permet de spécifier un analyseur personnalisé (par exemple toml.parse ou csv-parse) pour créer une collection à partir du contenu d’un fichier.

Le chargeur file() détectera et analysera automatiquement un seul tableau d’objets à partir de fichiers JSON et YAML (en fonction de leur extension de fichier) sans avoir besoin d’un parser à moins que vous n’ayez un document JSON imbriqué. Pour utiliser d’autres fichiers, tels que .toml et .csv, vous aurez besoin de créer une fonction d’analyse.

L’exemple suivant définit une collection de contenu dogs à l’aide d’un fichier .toml :

[[dogs]]
id = "..."
age = "..."

[[dogs]]
id = "..."
age = "..."

Après avoir importé l’analyseur de TOML, vous pouvez charger la collection dogs dans votre projet en transmettant à la fois un chemin de fichier et la fonction parser au chargeur file(). Un processus similaire peut être utilisé pour définir une collection cats à partir d’un fichier .csv :

import { defineCollection } from "astro:content";
import { file } from "astro/loaders";
import { parse as parseToml } from "toml";
import { parse as parseCsv } from "csv-parse/sync";

const dogs = defineCollection({
  loader: file("src/data/dogs.toml", { parser: (text) => parseToml(text).dogs }),
  schema: /* ... */
})

const cats = defineCollection({
  loader: file("src/data/cats.csv", { parser: (text) => parseCsv(text, { columns: true, skipEmptyLines: true })})
});

Documents `.json` imbriqués

L’argument parser vous permet également de charger une seule collection à partir d’un document JSON imbriqué. Par exemple, ce fichier JSON contient plusieurs collections :

{"dogs": [{}], "cats": [{}]}

Vous pouvez séparer ces collections en passant un parser personnalisé au chargeur file() pour chaque collection :

const dogs = defineCollection({
  loader: file("src/data/pets.json", { parser: (text) => JSON.parse(text).dogs })
});
const cats = defineCollection({
  loader: file("src/data/pets.json", { parser: (text) => JSON.parse(text).cats })
});

Construire un chargeur personnalisé

Vous pouvez créer un chargeur personnalisé pour récupérer du contenu distant à partir de n’importe quelle source de données, telle qu’un CMS, une base de données ou un point de terminaison d’API.

L’utilisation d’un chargeur pour récupérer vos données créera automatiquement une collection à partir de vos données distantes. Cela vous offre tous les avantages des collections locales, tels que les assistants API spécifiques aux collections tels que getCollection() et render() pour interroger et afficher vos données, ainsi que la validation de schéma.

Chargeurs en ligne

Vous pouvez définir un chargeur en ligne, à l’intérieur de votre collection, comme une fonction asynchrone qui renvoie un tableau d’entrées.

Ceci est utile pour les chargeurs qui n’ont pas besoin de contrôler manuellement la manière dont les données sont chargées et stockées. Chaque fois que le chargeur est appelé, il efface le magasin et recharge toutes les entrées.

const countries = defineCollection({
  loader: async () => {
    const response = await fetch("https://restcountries.com/v3.1/all");
    const data = await response.json();
    // Doit renvoyer un tableau d'entrées avec une propriété id ou un objet avec des ID comme clés et des entrées comme valeurs
    return data.map((country) => ({
      id: country.cca3,
      ...country,
    }));
  },
  schema: /* ... */
});

Les entrées renvoyées sont stockées dans la collection et peuvent être interrogées à l’aide des fonctions getCollection() et getEntry().

Objets de chargement

Pour un meilleur contrôle du processus de chargement, vous pouvez utiliser l’API Content Loader pour créer un objet de chargement. Par exemple, avec un accès direct à la méthode load, vous pouvez créer un chargeur qui permet de mettre à jour les entrées de manière incrémentielle ou d’effacer le magasin uniquement lorsque cela est nécessaire.

Similairement à la création d’une intégration Astro ou d’un plugin Vite, vous pouvez distribuer votre chargeur sous forme de paquet NPM que d’autres peuvent utiliser dans leurs projets.

Consultez l’API Content Layer complète et des exemples de création de votre propre chargeur.

Définition d’un schéma de collection

Les schémas garantissent la cohérence des données du frontmatter ou d’entrée au sein d’une collection via la validation Zod. Un schéma garantit que ces données existent sous une forme prévisible lorsque vous devez les référencer ou les interroger. Si un fichier viole son schéma de collection, Astro fournira une erreur utile pour vous en informer.

Les schémas alimentent également les typages automatiques TypeScript d’Astro pour votre contenu. Lorsque vous définissez un schéma pour votre collection, Astro génère et applique automatiquement une interface TypeScript. Le résultat est une prise en charge complète de TypeScript lorsque vous interrogez votre collection, y compris la saisie semi-automatique des propriétés et la vérification des types.

Chaque frontmatter ou propriété de données de vos entrées de collection doit être défini à l’aide d’un type de données Zod :

import { defineCollection, z } from 'astro:content';
import { glob, file } from 'astro/loaders'; // Non disponible avec l'API héritée

const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
  })
});
const dogs = defineCollection({
  loader: file("src/data/dogs.json"),
  schema: z.object({
    id: z.string(),
    breed: z.string(),
    temperament: z.array(z.string()),
  }),
});

export const collections = { blog, dogs };

Définition des types de données avec Zod

Astro utilise Zod pour alimenter ses schémas de contenu. Avec Zod, Astro est capable de valider les données de chaque fichier au sein d’une collection et de fournir des types TypeScript automatiques lorsque vous interrogez le contenu à partir de votre projet.

Pour utiliser Zod dans Astro, importez l’utilitaire z depuis "astro:content". Il s’agit d’une réexportation de la bibliothèque Zod, et elle prend en charge toutes les fonctionnalités de Zod.

// Exemple : une aide-mémoire de nombreux types de données Zod courants
import { z, defineCollection } from 'astro:content';

defineCollection({
  schema: z.object({
    isDraft: z.boolean(),
    title: z.string(),
    sortOrder: z.number(),
    image: z.object({
      src: z.string(),
      alt: z.string(),
    }),
    author: z.string().default('Anonyme'),
    language: z.enum(['en', 'es']),
    tags: z.array(z.string()),
    footnote: z.string().optional(),

    // En YAML, les dates écrites sans guillemets sont interprétées comme des objets Date
    publishDate: z.date(), // par exemple 2024-09-17

    // Transformer une chaîne de date (par exemple « 2022-07-08 ») en objet Date
    updatedDate: z.string().transform((str) => new Date(str)),

    authorContact: z.string().email(),
    canonicalURL: z.string().url(),
  })
})

Consultez le fichier README de Zod pour obtenir une documentation complète sur le fonctionnement de Zod et les fonctionnalités disponibles.

Méthodes de schéma Zod

Toutes les méthodes de schéma Zod (e.g. .parse(), .transform()) sont disponibles, avec certaines limitations. Notamment, l’exécution de contrôles de validation personnalisés sur les images à l’aide de image().refine() n’est pas prise en charge.

Définition des références de collection

Les entrées de collection peuvent également « faire référence » à d’autres entrées associées.

Avec la fonction reference() de l’API Collections, vous pouvez définir une propriété dans un schéma de collection en tant qu’entrée d’une autre collection. Par exemple, vous pouvez exiger que chaque entrée space-shuttle inclue une propriété pilot qui utilise le schéma propre à la collection pilot pour la vérification du type, la saisie semi-automatique et la validation.

Un exemple courant est un article de blog qui fait référence à des profils d’auteur réutilisables stockés au format JSON ou à des URL d’articles associés stockées dans la même collection :

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

const blog = defineCollection({
  loader: glob({ pattern: '**/[^_]*.md', base: "./src/data/blog" }),
  schema: z.object({
    title: z.string(),
    // Faire référence à un seul auteur de la collection `authors` par `id`
    author: reference('authors'),
    // Faire référence à un tableau d'articles connexes de la collection `blog` par `slug`
    relatedPosts: z.array(reference('blog')),
  })
});

const authors = defineCollection({
  loader: glob({ pattern: '**/[^_]*.json', base: "./src/data/authors" }),
  schema: z.object({
    name: z.string(),
    portfolio: z.string().url(),
  })
});

export const collections = { blog, authors };

Cet exemple d’article de blog spécifie les id des articles associés et l’id de l’auteur de l’article :

---
title: "Bienvenue sur mon blog"
author: ben-holmes # fait référence à `src/data/authors/ben-holmes.json`
relatedPosts:
- about-me # fait référence à `src/data/blog/about-me.md`
- my-year-in-review # fait référence à `src/data/blog/my-year-in-review.md`
---

Définition d’identifiants personnalisés

Lors de l’utilisation du chargeur glob() avec des fichiers Markdown, MDX, Markdoc ou JSON, chaque id d’entrée de contenu est automatiquement généré dans un format compatible URL basé sur le nom du fichier de contenu. L’id est utilisé pour interroger l’entrée directement à partir de votre collection. Il est également utile lors de la création de nouvelles pages et URL à partir de votre contenu.

Vous pouvez remplacer l’identifiant généré par une entrée en ajoutant votre propre propriété slug à la page de garde du fichier ou à l’objet de données pour les fichiers JSON. Ceci est similaire à la fonctionnalité « permalien » d’autres frameworks Web.

---
title: Mon article de blog
slug: mon-id-personnalise/supporte/les-barres-obliques
---
Le contenu de votre article de blog ici.

{
  "title": "Ma catégorie",
  "slug": "mon-id-personnalise/supporte/les-barres-obliques",
  "description": "Votre description de catégorie ici."
}

Interroger les collections

Astro fournit des fonctions d’aide pour interroger une collection et renvoyer une (ou plusieurs) entrées de contenu.

getCollection() récupère une collection entière et renvoie un tableau d’entrées.
getEntry() récupère une seule entrée d’une collection.

Ces entrées de retour contiennent un id unique, un objet data avec toutes les propriétés définies et renverront également un body contenant le corps brut et non compilé d’un document Markdown, MDX ou Markdoc.

import { getCollection, getEntry } from 'astro:content';

// Obtenir toutes les entrées d'une collection.
// Nécessite le nom de la collection comme argument.
const allBlogPosts = await getCollection('blog');

// Obtenir une seule entrée d’une collection.
// Nécessite le nom de la collection et un `id`
const poodleData = await getEntry('dogs', 'poodle');

Voir la liste complète des propriétés renvoyées par le type CollectionEntry.

Utilisation du contenu dans les modèles Astro

Après avoir interrogé vos collections, vous pouvez accéder au contenu de chaque entrée directement dans votre modèle de composant Astro. Par exemple, vous pouvez créer une liste de liens vers vos articles de blog, en affichant les informations de la page de garde de votre entrée à l’aide de la propriété data.

---
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
---
<h1>Mes articles</h1>
<ul>
  {posts.map(post => (
    <li><a href={`/blog/${post.id}`}>{post.data.title}</a></li>
  ))}
</ul>

Restitution du contenu

Une fois la requête effectuée, vous pouvez restituer les entrées Markdown et MDX en HTML à l’aide de la propriété de fonction render(). L’appel de cette fonction vous donne accès au contenu HTML restitué, y compris à la fois un composant <Content /> et une liste de tous les titres restitués.

---
import { getEntry, render } from 'astro:content';

const entry = await getEntry('blog', 'post-1');
const { Content, headings } = await render(entry);
---
<p>Publié le : {entry.data.published.toDateString()}</p>
<Content />

Transmettre du contenu en tant que props

Un composant peut également transmettre une entrée de collection entière en tant que propriété.

Vous pouvez utiliser l’utilitaire CollectionEntry pour saisir correctement les propriétés de votre composant à l’aide de TypeScript. Cet utilitaire prend un argument de chaîne qui correspond au nom de votre schéma de collection et héritera de toutes les propriétés du schéma de cette collection.

---
import type { CollectionEntry } from 'astro:content';
interface Props {
  post: CollectionEntry<'blog'>;
}

// `post` correspondra au type de schéma de votre collection 'blog'
const { post } = Astro.props;
---

Filtrer les requêtes sur les collections

getCollection() prend une fonction de rappel facultative « filter » qui vous permet de filtrer votre requête en fonction des propriétés id ou data d’une entrée.

Vous pouvez utiliser cette propriété pour filtrer selon n’importe quel critère de contenu. Par exemple, vous pouvez filtrer par des propriétés telles que draft pour empêcher la publication d’un brouillon d’article sur votre blog :

// Exemple : Filtrer les entrées de contenu avec `draft: true` (brouillon : vrai)
import { getCollection } from 'astro:content';
const publishedBlogEntries = await getCollection('blog', ({ data }) => {
  return data.draft !== true;
});

Vous pouvez également créer des pages provisoires qui sont disponibles lors de l’exécution du serveur de développement, mais qui ne sont pas construites dans la production :

// Exemple : Filtrer les entrées de contenu avec `draft: true` uniquement lors de la construction pour la production
import { getCollection } from 'astro:content';
const blogEntries = await getCollection('blog', ({ data }) => {
  return import.meta.env.PROD ? data.draft !== true : true;
});

L’argument filter permet également de filtrer les répertoires imbriqués dans une collection. Puisque id inclut le chemin imbriqué complet, vous pouvez filtrer par le début de chaque id pour ne renvoyer que les éléments d’un répertoire imbriqué spécifique :

// Exemple : Filtrer les entrées par sous-répertoire dans la collection
import { getCollection } from 'astro:content';
const englishDocsEntries = await getCollection('docs', ({ id }) => {
  return id.startsWith('en/');
});

Accès aux données référencées

Toutes références définies dans votre schéma doivent être interrogées séparément après la première interrogation de votre entrée de collection. Vous pouvez utiliser la fonction getEntry() pour renvoyer un seul élément référencé ou getEntries() pour récupérer plusieurs entrées référencées à partir de l’objet data renvoyé.

---
import { getEntry, getEntries } from 'astro:content';

const blogPost = await getEntry('blog', 'welcome');

// Restituer une référence singulière
const author = await getEntry(blogPost.data.author);
// Restituer un tableau de références
const relatedPosts = await getEntries(blogPost.data.relatedPosts);
---

<h1>{blogPost.data.title}</h1>
<p>Auteur : {author.data.name}</p>

<!-- ... -->

<h2>Vous pourriez aussi aimer :</h2>
{relatedPosts.map(post => (
  <a href={post.id}>{post.data.title}</a>
))}

Générer des routes à partir du contenu

Les collections de contenu sont stockées en dehors du répertoire src/pages/. Cela signifie qu’aucune page ou route n’est générée par défaut pour vos éléments de collection.

Vous devrez créer manuellement une nouvelle route dynamique si vous souhaitez générer des pages HTML pour chacune de vos entrées de collection, telles que des articles de blog individuels. Votre route dynamique va mettre en correspondance le paramètre de la requête entrante (ex : Astro.params.slug dans src/pages/blog/[...slug].astro) pour récupérer la bonne entrée à l’intérieur d’une collection.

La méthode exacte de génération des routes dépendra du fait que vos pages sont pré-rendues (par défaut) ou rendues à la demande par un serveur.

Construire pour une sortie statique (par défaut)

Si vous créez un site Web statique (comportement par défaut d’Astro), utilisez la fonction getStaticPaths() pour créer plusieurs pages à partir d’un seul composant de page (par exemple src/pages/[slug]) pendant votre création.

Appelez getCollection() à l’intérieur de getStaticPaths() pour que vos données de collection soient disponibles pour la création de routes statiques. Ensuite, créez les chemins d’URL individuels à l’aide de la propriété id de chaque entrée de contenu. Chaque page reçoit l’entrée de collection entière en tant que propriété à utiliser dans votre modèle de page.

---
import { getCollection, render } from 'astro:content';
// 1. Génére un nouveau chemin pour chaque entrée de collection
export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { id: post.id },
    props: { post },
  }));
}
// 2. Pour votre modèle, vous pouvez obtenir l'entrée directement à partir de la propriété
const { post } = Astro.props;
const { Content } = await render(post);
---
<h1>{post.data.title}</h1>
<Content />

Cela générera une route de page pour chaque entrée de la collection blog. Par exemple, une entrée dans src/blog/hello-world.md aura un id de hello-world, et donc son URL finale sera /posts/hello-world/.

Construction pour la sortie serveur (SSR)

Si vous construisez un site web dynamique (en utilisant le support SSR d’Astro), vous n’êtes pas censé générer des chemins à l’avance pendant la construction. Au lieu de cela, votre page devrait examiner la requête (en utilisant Astro.request ou Astro.params) pour trouver le slug à la demande, et ensuite le récupérer en utilisant getEntry().

---
import { getEntry, render } from "astro:content";
// 1. Récupérer le slug de la requête entrante du serveur
const { id } = Astro.params;
if (id === undefined) {
  return Astro.redirect("/404");
}
// 2. Interroger l'entrée directement à l'aide du slug de requête
const post = await getEntry("blog", id);
// 3. Redirection si l'entrée n'existe pas
if (post === undefined) {
  return Astro.redirect("/404");
}
// 4. Rendre l'entrée en HTML dans le modèle
const { Content } = await render(post);
---
<h1>{post.data.title}</h1>
<Content />

Quand créer une collection

Vous pouvez créer une collection à chaque fois que vous disposez d’un groupe de données ou de contenus associés qui partagent une structure commune.

Une grande partie des avantages liés à l’utilisation des collections provient de :

Définir une forme de données commune pour valider qu’une entrée individuelle est « correcte » ou « complète », évitant ainsi les erreurs de production.
API axées sur le contenu conçues pour rendre les requêtes intuitives (par exemple, getCollection() au lieu de import.meta.glob()) lors de l’importation et du rendu du contenu sur vos pages.
Une API de chargement de contenu pour récupérer votre contenu qui fournit à la fois des chargeurs intégrés et un accès à l’API de bas niveau. Il existe plusieurs chargeurs tiers et communautaires disponibles, et vous pouvez créer votre propre chargeur personnalisé pour récupérer des données de n’importe où.
Performances et évolutivité. L’API Content Layer permet de mettre en cache les données entre les builds et convient à des dizaines de milliers d’entrées de contenu.

Définissez vos données comme une collection lorsque :

Vous avez plusieurs fichiers ou données à organiser qui partagent la même structure globale (par exemple, des articles de blog écrits en Markdown qui ont tous les mêmes propriétés de frontmatter).
Vous disposez d’un contenu existant stocké à distance, par exemple dans un CMS, et vous souhaitez profiter des fonctions d’assistance des collections et de l’API Content Layer au lieu d’utiliser fetch() ou des SDK.
Vous devez récupérer (des dizaines de) milliers de données connexes et avez besoin d’une méthode d’interrogation et de mise en cache capable de gérer à grande échelle.

Quand ne pas créer une collection

Les collections offrent une excellente structure, sécurité et organisation lorsque vous avez plusieurs éléments de contenu qui doivent partager les mêmes propriétés.

Les collections ne sont peut-être pas votre solution si :

Vous n’avez qu’une seule page ou un petit nombre de pages différentes. Envisagez plutôt de créer des composants de page individuels tels que src/pages/about.astro directement avec votre contenu.
Vos données ne sont pas stockées dans un format pris en charge, tel que TOML. Utilisez plutôt d’autres méthodes d’importation de fichiers ou de récupération de données.
Vous affichez des fichiers qui ne sont pas traités par Astro, comme des fichiers PDF. Placez plutôt ces ressources statiques dans le répertoire public/ de votre projet.
Vous utilisez des API qui doivent être mises à jour en temps réel. Les collections de contenu ne sont mises à jour qu’au moment de la création. Par conséquent, si vous avez besoin de données en direct, vous devez envisager le rendu à la demande (EN).

Contribuer

Communauté

Collections de contenus

Que sont les collections de contenu ?

Configuration TypeScript pour les collections

Définition des collections

Le fichier de configuration des collections

Définir le `loader` de collection

Chargeurs intégrés

Fonction `parser`

Documents `.json` imbriqués

Construire un chargeur personnalisé

Chargeurs en ligne

Objets de chargement

Définition d’un schéma de collection

Définition des types de données avec Zod

Méthodes de schéma Zod

Définition des références de collection

Définition d’identifiants personnalisés

Interroger les collections

Utilisation du contenu dans les modèles Astro

Restitution du contenu

Transmettre du contenu en tant que props

Filtrer les requêtes sur les collections

Accès aux données référencées

Générer des routes à partir du contenu

Construire pour une sortie statique (par défaut)

Construction pour la sortie serveur (SSR)

Quand créer une collection

Quand ne pas créer une collection

Comment pouvons-nous vous aider ?

Créer une issue GitHub

Envoyez-nous un commentaire

Envoyez-nous un commentaire

Collections de contenus

Que sont les collections de contenu ?

Configuration TypeScript pour les collections

Définition des collections

Le fichier de configuration des collections

Définir le loader de collection

Chargeurs intégrés

Fonction parser

Documents .json imbriqués

Construire un chargeur personnalisé

Chargeurs en ligne

Objets de chargement

Définition d’un schéma de collection

Définition des types de données avec Zod

Méthodes de schéma Zod

Définition des références de collection

Définition d’identifiants personnalisés

Interroger les collections

Utilisation du contenu dans les modèles Astro

Restitution du contenu

Transmettre du contenu en tant que props

Filtrer les requêtes sur les collections

Accès aux données référencées

Générer des routes à partir du contenu

Construire pour une sortie statique (par défaut)

Construction pour la sortie serveur (SSR)

Quand créer une collection

Quand ne pas créer une collection

Définir le `loader` de collection

Fonction `parser`

Documents `.json` imbriqués