content collections

คอลเลกชันเนื้อหา

แปลงเนื้อหาของคุณให้เป็นคอลเลกชันข้อมูลประเภทที่ปลอดภัย กำจัดความจำเป็นในการดึงข้อมูลด้วยตนเองและการแยกวิเคราะห์ เพียงนำเข้าเนื้อหาของคุณและเริ่มต้น การตรวจสอบความถูกต้องในตัวทำให้มั่นใจได้ถึงความถูกต้องของข้อมูลของคุณ ประมวลผลข้อมูลของคุณล่วงหน้าก่อนที่จะเข้าสู่แอปของคุณ

คุณสมบัติ

• DX ที่สวยงาม : คอลเลกชันเนื้อหาได้รับการออกแบบมาเพื่อมอบประสบการณ์การใช้งานที่น่าพึงพอใจ มันมีประสบการณ์นักพัฒนาที่ราบรื่นโดยไม่จำเป็นต้องรีสตาร์ทเซิร์ฟเวอร์หรือรีเฟรชเบราว์เซอร์ คอลเลกชันเนื้อหาจะได้รับการอัปเดตโดยอัตโนมัติเมื่อคุณทำการเปลี่ยนแปลงเนื้อหาของคุณ

• Type-Safe : เนื้อหาของคุณถูกแยกวิเคราะห์และตรวจสอบความถูกต้องในระหว่างกระบวนการสร้างรับประกันความถูกต้องและสกุลเงิน คอลเลกชันเนื้อหามี API ที่ปลอดภัยประเภทเพื่อเข้าถึงเนื้อหาของคุณ

• ใช้งานง่าย : ไม่จำเป็นต้องดึงข้อมูลและแยกวิเคราะห์เนื้อหาของคุณด้วยตนเองอีกต่อไป เพียงแค่นำเข้าและเริ่มใช้คอลเลกชันเนื้อหา มันให้ API ง่าย ๆ ช่วยให้คุณมีสมาธิในการสร้างแอปของคุณ

• การแปลง : คอลเลกชันเนื้อหาช่วยให้คุณสามารถแปลงเนื้อหาของคุณก่อนที่จะเข้าสู่แอปของคุณ คุณสามารถใช้เพื่อแก้ไขเนื้อหาของคุณเข้าร่วมสองคอลเลกชันหรือแม้แต่ดึงข้อมูลจากเซิร์ฟเวอร์

การติดตั้ง

คอลเลกชันเนื้อหานำเสนออะแดปเตอร์ที่หลากหลายซึ่งรวมเข้ากับเฟรมเวิร์กเว็บยอดนิยมได้อย่างราบรื่น กระบวนการติดตั้งขึ้นอยู่กับอะแดปเตอร์ที่เลือก:

• next.js
• Qwik
• รีมิกซ์ (Vite)
• จุดเริ่มต้นที่มั่นคง
• sveltekit
• Vite

หากเฟรมเวิร์กของคุณไม่อยู่ในรายการคุณยังสามารถใช้คอลเลกชันเนื้อหาได้โดยใช้ CLI กรุณาเปิดตั๋วหากคุณต้องการดูเฟรมเวิร์กของคุณในรายการ

การใช้งาน

1. สร้างไฟล์ 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