getCollection

コンテンツまたはデータコレクションのすべてのエントリを読み込みます。

シグネチャ

getCollection<T = Record<string, unknown>>(name: string): CollectionEntry<T>[]

ページモジュールから getCollection を呼び出すと、名前付きコレクション内のすべてのエントリを読み込めます。コレクションは zfb.config の collections で宣言されている必要があります。この関数は同期的で、Promise ではなくプレーンな配列を返します。TypeScript のジェネリック T は型ヒントにすぎません。スキーマは getCollection の内部でも zfb build 中でもチェックされません。

スキーマ検証は zfb build ではなく zfb check で実行されます。ビルドはコレクションエントリをスナップショットし、パース済み frontmatter を保持しますが、スキーマ違反は check コマンドで強制されるため、スキーマが重要な CI では zfb check を実行してください。

`getEntry`

getEntry<T = Record<string, unknown>>(
  name: string,
  slug: string,
): CollectionEntry<T> | undefined

getEntry(name, slug) を使うと、コレクションから 1 件のエントリを読み込めます。getCollection と同じスナップショット / ファイルシステム解決経路を共有し、コレクションに一致する slug がない場合は undefined を返します。

import { getEntry } from "@takazudo/zfb/content";

export default function FeaturedPost() {
  const post = getEntry<{ title: string }>("blog", "hello-zfb");
  if (!post) return <p>Post not found</p>;
  return <post.Content />;
}

CollectionEntry の形状

各エントリは以下のフィールドを持ちます。

slug: string — コレクション相対パスから末尾の .md、.mdx、または .tsx 拡張子を 1 つ取り除き、スラッシュ区切りのパスに正規化したものです。ネストしたファイルはパスベースの slug を生成します（例: "2024/hello"）。
data: T — パース済みのフロントマター。ジェネリックパラメータで型付けされます。
body: string — フロントマターを除いた生のマークダウン本文。
module_specifier: string — コンパイル済みモジュールをルックアップするために、レンダラが内部的に使用する安定したブリッジキーです。.md / .mdx エントリは mdx://<collection>/<slug>#<hash>（body にマークダウン本文が入ります）、.tsx エントリは tsx://<collection>/<slug>#<hash>（body は空 — 別個のマークダウン本文がないため）になります。末尾のハッシュはコンパイル済み JSX ソースから導出されます。独自のブリッジを構築する場合は、この specifier をカスタムの Content ルックアップに渡してください。
Content: (props: ContentProps) => ContentElement — このエントリのレンダリング可能なコンポーネント。利用可能な場合はレンダラブリッジ経由でレンダリングし、ブリッジが存在しないテストや dev のコンテキストでは <pre data-zfb-content-fallback> ブロックにフォールバックします。

ContentProps

type ContentProps = {
  components?: Record<string, unknown>;
};

components プロップは Astro の <Content components={...}> の慣習を踏襲しており、要素名からオーバーライドするコンポーネントへのフラットなマップです。ベースとして "@takazudo/zfb" の defaultComponents を使ってください。

import { defaultComponents } from "@takazudo/zfb";

<entry.Content components={{ ...defaultComponents, h2: MyHeading }} />

例

典型的なユースケースは、インデックスページでブログ記事の一覧をレンダリングすることです。

import { getCollection } from "@takazudo/zfb/content";

export default function BlogIndex() {
  const posts = getCollection<{ title: string; date: string }>("blog");

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <a href={`/blog/${post.slug}`}>{post.data.title}</a>
        </li>
      ))}
    </ul>
  );
}

getCollection と getEntry は同期的に返るため、await は不要です。エントリごとの動的ページには getCollection と paths() エクスポートを組み合わせます。関連するパターンについては paginate を参照してください。

getCollection

シグネチャ

getEntry

CollectionEntry の形状

ContentProps

例

Revision History

`getEntry`