content collections

Colecciones de contenido

Transforme su contenido en colecciones de datos seguras de tipo. Elimine la necesidad de obtener datos manuales y análisis. Simplemente importe su contenido y comience. La validación incorporada garantiza la precisión de sus datos. Preprocese sus datos antes de ingresar a su aplicación.

Características

• Hermosa DX : Content Collections está diseñada para proporcionar una experiencia de usuario placentera. Ofrece una experiencia de desarrollador perfecta sin la necesidad de reiniciar el servidor o actualizar el navegador. Las colecciones de contenido se actualizan automáticamente cuando realiza cambios en su contenido.

• Tipo seguro : su contenido se analiza y se valida durante el proceso de compilación, garantizando precisión y moneda. Content Collections ofrece una API de tipo seguro para acceder a su contenido.

• Flejado de usar : no es necesario obtener y analizar manualmente su contenido. Simplemente importándolo y comience a usar colecciones de contenido. Proporciona una API simple, lo que le permite concentrarse en construir su aplicación.

• Transformación : las colecciones de contenido le permiten transformar su contenido antes de ingresar a su aplicación. Puede usarlo para modificar su contenido, unirse a dos colecciones o incluso obtener datos de un servidor.

Instalación

Content Collections ofrece una variedad de adaptadores que se integran perfectamente con los marcos web populares. El proceso de instalación depende del adaptador elegido:

• Next.js
• Qwik
• Remix (vite)
• Comienzo sólido
• Seltekit
• Vite

Si su marco no está en la lista, aún puede usar colecciones de contenido utilizando la CLI. Abra un boleto si desea ver su marco en la lista.

Uso

1. Cree un archivo de contenido-collections.ts en la raíz de su proyecto:

    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. Comience a escribir contenido en src/posts :

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

3. Use su contenido en su aplicación:

    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 >
     ) ;
   }

   Tenga en cuenta que el ejemplo anterior muestra solo los conceptos básicos de las colecciones de contenido y no cubre la transformación de contenido. Las colecciones de contenido no transforman contenido como Markdown o MDX de forma predeterminada. Pero tiene paquetes que pueden hacer eso por ti:

   • @contenido-colecciones/markdown
   • @contenido-colecciones/mdx

   Si desea ver más ejemplos y casos de uso, consulte la documentación.

Patrocinadores

Convertirse en patrocinador

Licencia

Content Collections tiene licencia bajo la licencia MIT.