content collections

Collections de contenu

Transformez votre contenu en collections de données de type type. Éliminez le besoin de récupération et de l'analyse des données manuelles. Importez simplement votre contenu et commencez. La validation intégrée assure la précision de vos données. Prétraitez vos données avant qu'elles entrent dans votre application.

Caractéristiques

• Beautiful DX : Content Collections est conçu pour offrir une expérience utilisateur agréable. Il offre une expérience de développeur transparent sans avoir besoin de redémarrer le serveur ou de rafraîchir le navigateur. Les collections de contenu sont automatiquement mises à jour lorsque vous apportez des modifications à votre contenu.

• Type-Safe : Votre contenu est analysé et validé pendant le processus de construction, garantissant la précision et la monnaie. Contenu Collections propose une API de type type pour accéder à votre contenu.

• Simple à utiliser : plus besoin de récupérer et d'analyser manuellement votre contenu. Il suffit de l'importer et de commencer à utiliser des collections de contenu. Il fournit une API simple, vous permettant de vous concentrer sur la création de votre application.

• Transformation : les collections de contenu vous permet de transformer votre contenu avant qu'il entre dans votre application. Vous pouvez l'utiliser pour modifier votre contenu, rejoindre deux collections ou même récupérer des données à partir d'un serveur.

Installation

Content Collections propose une variété d'adaptateurs qui s'intègrent de manière transparente aux cadres Web populaires. Le processus d'installation dépend de l'adaptateur choisi:

• Next.js
• Qwik
• Remix (vite)
• Démarrage solide
• Sveltekit
• Vite

Si votre cadre n'est pas répertorié, vous pouvez toujours utiliser des collections de contenu en utilisant la CLI. Veuillez ouvrir un billet si vous souhaitez voir votre cadre répertorié.

Usage

1. Créez un fichier de contenu-collections.ts à la racine de votre projet:

    import { defineCollection , defineConfig } from "@content-collections/core" ;
   
   const posts = defineCollection ( {
     name : "posts" ,
     directory : "src/posts" ,
     include : "**/*.md" ,
     schema : ( z ) => ( {
       title : z . string ( ) ,
       summary : z . string ( ) ,
     } ) ,
   } ) ;
   
   export default defineConfig ( {
     collections : [ posts ] ,
   } ) ;

2. Commencez à écrire du contenu dans src/posts :

    ---
   title : Hello World
   summary : This is my first post
   ---
   
   # Hello World
   
   This is my first post.

3. Utilisez votre contenu dans votre application:

    import { allPosts } from "content-collections" ;
   
   export function Posts ( ) {
     return (
       < ul >
         { allPosts . map ( ( post ) => (
           < li key = { post . _meta . path } >
             < a href = { `/posts/ ${ post . _meta . path } ` } >
               < h3 > { post . title } </ h3 >
               < p > { post . summary } </ p >
             </ a >
           </ li >
         ) ) }
       </ ul >
     ) ;
   }

   Veuillez noter que l'exemple ci-dessus ne montre que les bases mêmes des collections de contenu et qu'elle ne couvre pas la transformation de contenu. Content Collections ne transforme pas le contenu comme Markdown ou MDX par défaut. Mais il a des packages qui peuvent le faire pour vous:

   • @ Content-Collections / Markdown
   • @ Content-Collections / MDX

   Si vous souhaitez voir plus d'exemples et de cas d'utilisation, veuillez vous référer à la documentation.

Sponsors

Devenir sponsor

Licence

Les collections de contenu sont autorisées sous la licence du MIT.