content collections

Коллекции контента

Преобразовать свой контент в коллекции данных, безопасных для типа. Устранение необходимости вручную и анализ данных. Просто импортируйте свой контент и начните. Встроенная проверка обеспечивает точность ваших данных. Предварительно обработайте ваши данные, прежде чем он войдет в ваше приложение.

Функции

• Beautiful DX : Content Collections предназначена для обеспечения приятного пользовательского опыта. Он предлагает бесшовный опыт разработчика без необходимости перезагрузки сервера или обновления браузера. Коллекции контента автоматически обновляются при внесении изменений в свой контент.

• Type-Safe : ваш контент анализируется и подтвержден в процессе сборки, гарантируя точность и валюту. Content Collections предлагает API, защищающий тип, для доступа к вашему контенту.

• Простое в использовании : больше не нужно вручную получать и проанализировать ваш контент. Просто импортируйте его и начните использовать коллекции контента. Он обеспечивает простой API, позволяющий вам сосредоточиться на создании вашего приложения.

• Преобразование : Коллекция контента позволяет вам преобразовать ваш контент, прежде чем он входит в ваше приложение. Вы можете использовать его для изменения вашего контента, присоединения к двум коллекциям или даже извлечь данные с сервера.

Установка

Content Collections предлагает различные адаптеры, которые плавно интегрируются с популярными веб -структурами. Процесс установки зависит от выбранного адаптера:

• Next.js
• Qwik
• Remix (Vite)
• Твердый старт
• СВЕЛТЕКИТ
• Просие

Если ваша структура не указана, вы все равно можете использовать коллекции контента, используя CLI. Пожалуйста, откройте билет, если вы хотите увидеть свою структуру.

Использование

1. Создайте файл content-collections.ts в корне вашего проекта:

    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. Начните писать контент в src/posts :

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

3. Используйте свой контент в своем приложении:

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

   Обратите внимание, что приведенный выше пример показывает только самые основы коллекций контента и не охватывает преобразование контента. Коллекции контента не преобразуют контент, например, Markdown или MDX по умолчанию. Но у него есть пакеты, которые могут сделать это для вас:

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

   Если вы хотите увидеть больше примеров и вариантов использования, пожалуйста, обратитесь к документации.

Спонсоры

Станьте спонсором

Лицензия

Коллекции контента лицензированы по лицензии MIT.