content collections

Koleksi konten

Ubah konten Anda menjadi pengumpulan data yang aman. Menghilangkan kebutuhan untuk pengambilan data manual dan penguraian. Cukup impor konten Anda dan mulai. Validasi bawaan memastikan keakuratan data Anda. ProProcess data Anda sebelum memasuki aplikasi Anda.

Fitur

• DX yang indah : Koleksi konten dirancang untuk memberikan pengalaman pengguna yang menyenangkan. Ini menawarkan pengalaman pengembang yang mulus tanpa perlu memulai kembali server atau menyegarkan browser. Koleksi konten diperbarui secara otomatis saat Anda melakukan perubahan pada konten Anda.

• Tipe-Safe : Konten Anda diuraikan dan divalidasi selama proses pembangunan, menjamin akurasi dan mata uang. Koleksi konten menawarkan API yang aman untuk mengakses konten Anda.

• Mudah digunakan : Tidak perlu lagi mengambil dan menguraikan konten Anda secara manual. Cukup impor dan mulailah menggunakan koleksi konten. Ini memberikan API sederhana, memungkinkan Anda berkonsentrasi membangun aplikasi Anda.

• Transformasi : Koleksi konten memungkinkan Anda untuk mengubah konten Anda sebelum memasuki aplikasi Anda. Anda dapat menggunakannya untuk memodifikasi konten Anda, bergabung dengan dua koleksi atau bahkan mengambil data dari server.

Instalasi

Koleksi konten menawarkan berbagai adaptor yang terintegrasi dengan mulus dengan kerangka kerja web yang populer. Proses instalasi tergantung pada adaptor yang dipilih:

• Next.js
• Qwik
• Remix (vite)
• Awal yang solid
• Sveltekit
• Vite

Jika kerangka kerja Anda tidak terdaftar, Anda masih dapat menggunakan koleksi konten dengan menggunakan CLI. Harap buka tiket jika Anda ingin melihat kerangka kerja Anda terdaftar.

Penggunaan

1. Buat file content-collection.ts di root proyek Anda:

    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. Mulailah menulis konten di src/posts :

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

3. Gunakan konten Anda di aplikasi Anda:

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

   Harap dicatat bahwa contoh di atas hanya menunjukkan dasar -dasar koleksi konten dan tidak mencakup transformasi konten. Koleksi konten tidak mengubah konten seperti Markdown atau MDX secara default. Tetapi memiliki paket yang dapat melakukannya untuk Anda:

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

   Jika Anda ingin melihat lebih banyak contoh dan menggunakan kasus, silakan merujuk ke dokumentasi.

Sponsor

Menjadi sponsor

Lisensi

Koleksi konten dilisensikan di bawah lisensi MIT.