content collectionsダウンロード - content collectionsソースコードのダウンロード

content collections

AI ソースコード

@content-collections

ダウンロード

コンテンツコレクション

コンテンツをタイプセーフデータコレクションに変換します。手動データの取得と解析の必要性を排除します。コンテンツをインポートして開始するだけです。組み込み検証により、データの精度が保証されます。アプリに入る前にデータを事前に処理します。

特徴

Beautiful DX ：Content Collectionsは、楽しいユーザーエクスペリエンスを提供するように設計されています。サーバーを再起動したりブラウザを更新したりすることなく、シームレスな開発者エクスペリエンスを提供します。コンテンツを変更すると、コンテンツコレクションが自動的に更新されます。
タイプセーフ：コンテンツは、ビルドプロセス中に解析および検証され、精度と通貨を保証します。コンテンツコレクションは、コンテンツにアクセスするためのタイプセーフAPIを提供します。
使いやすい：コンテンツを手動でフェッチして解析する必要はありません。インポートして、コンテンツコレクションの使用を開始します。シンプルなAPIを提供し、アプリの構築に集中できます。
変換：コンテンツコレクションを使用すると、コンテンツがアプリに入る前に変換できます。それを使用して、コンテンツを変更したり、2つのコレクションに参加したり、サーバーからデータを取得したりできます。

インストール

コンテンツコレクションは、人気のあるWebフレームワークとシームレスに統合するさまざまなアダプターを提供しています。インストールプロセスは、選択したアダプターによって異なります。

next.js
qwik
Remix（Vite）
しっかりしたスタート
sveltekit
vite

フレームワークがリストされていない場合でも、CLIを使用してコンテンツコレクションを使用できます。リストされているフレームワークをご覧になりたい場合は、チケットを開いてください。

使用法

プロジェクトのrootで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 >
  ) ;
}
```
上記の例は、コンテンツコレクションの基本のみを示しており、コンテンツの変換をカバーしていないことに注意してください。コンテンツコレクションは、デフォルトでマークダウンやMDXなどのコンテンツを変換しません。しかし、それはあなたのためにそれを行うことができるパッケージを持っています：
- @Content-Collections/Markdown
- @content-collections/mdx
より多くの例とユースケースを見たい場合は、ドキュメントを参照してください。