content collections下載 - content collections源代碼下載

content collections

Ai源碼

@content-collections

下載

內容集

將您的內容轉換為類型安全數據收集。消除對手動數據獲取和解析的需求。只需導入您的內容並開始。內置驗證可確保數據的準確性。在數據輸入應用之前，預處理您的數據。

特徵

美麗的DX ：內容集旨在提供令人愉悅的用戶體驗。它提供了無縫的開發人員體驗，而無需重新啟動服務器或刷新瀏覽器。更改內容時，內容集合會自動更新。
類型安全：您的內容在構建過程中進行了解析和驗證，以確保准確性和貨幣。內容集合提供了類型的安全性API來訪問您的內容。
易於使用：無需手動獲取和解析您的內容。只需導入並開始使用內容集。它提供了一個簡單的API，使您可以專注於構建應用程序。
轉換：內容收集使您可以在輸入應用程序之前轉換它。您可以使用它來修改內容，加入兩個集合，甚至從服務器獲取數據。

安裝

內容集合提供了各種適配器，可與流行的Web框架無縫集成。安裝過程取決於所選適配器：

next.js
Qwik
混音（VITE）
紮實的開始
Sveltekit
Vite

如果未列出您的框架，您仍然可以使用CLI使用內容集。如果您想查看已列出的框架，請打開票。

用法

在項目的根部創建一個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 ] ,
} ) ;

開始在src/posts中編寫內容：

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

# Hello World

This is my first post.

在應用中使用您的內容：

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