コンテンツへスキップ
Fumadocs

ソース

ローダー API で使用するソースを設定します

概要

コンテンツローダーは、source インターフェースを介してさまざまなコンテンツソースを受け付けます。

複数のソース

単一のソースではなく、ソースオブジェクトを Record 形式でまとめて渡してください。

import { loader } from 'fumadocs-core/source';
import { blog, docs } from 'collections/server';
import { lucideIconsPlugin } from 'fumadocs-core/source/lucide-icons';

export const source = loader(
  {
    docs: docs.toFumadocsSource(),
    openapi: blog.toFumadocsSource(),
  },
  {
    baseUrl: '/docs',
  },
);

各ソースに固有のプロパティにアクセスするには、次のようにします。

const page = source.getPage(['...']);

if (page.type === 'docs') {
  console.log(page.data);
} else {
  console.log(page.data);
}

静的ソース

独自のコンテンツソースを組み込むには、StaticSource オブジェクトを作成します。

ローダー API はファイルシステムに依存しないため、ファイルパスには file.mdx や content/file.mdx のような仮想パスしか使用できません。./file.mdx や D://content/file.mdx は使用できません。

import type {  } from 'fumadocs-core/source';

export function (): <{
  : { : string; : string[] }; // カスタム型
  : { : string; ?: string }; // カスタム型
}> {
  return {
    : [
      {
        : 'page',
        : 'folder/index.mdx',
        : {
          : 'Hello World',
          // ...
        },
      },
      {
        : 'meta',
        : 'meta.json',
        : {
          : 'Docs',
          : ['folder'],
          // ...
        },
      },
    ],
  };
}

i18n を使用する場合、ファイル側で locale を指定しない限り、ファイルの言語はパスから判別されます。

動的ソース

再検証に対応したコンテンツソースの場合は、代わりに DynamicSource を返してください。

import type { DynamicSource } from 'fumadocs-core/source';

export function createMySource(): DynamicSource<{
  metaData: { title: string; pages: string[] };
  pageData: { title: string; description?: string };
}> {
  return {
    async files() {
      return [
        {
          type: 'page',
          path: 'folder/index.mdx',
          data: {
            title: 'Hello World',
          },
        },
        {
          type: 'meta',
          path: 'meta.json',
          data: {
            title: 'Docs',
            pages: ['folder'],
          },
        },
      ];
    },
    configure(loader) {
      // ソース側からローダーを再検証できます。例:
      onMyEvent(() => {
        void loader.revalidate();
      });
    },
  };
}

動的ソースは dynamicLoader() でしか利用できません。

パスパラメーター

ソースでパスパラメーターをサポートするには、[framework]/deploy.mdx のようなファイルを1つの仮想ファイルとして渡します。ローダーは値ごとにページを生成し、各ページのデータには dataAt() の戻り値を使用します。dataAt() がない場合は data を使用します。メタファイルも同様に扱われます。

import type {  } from 'fumadocs-core/source';

const : ['files'] = [
  {
    : 'page',
    : '[framework]/deploy.mdx',
    : { : 'Deploy' },
    : () => ({ : `Deploy on ${.framework}` }),
  },
  {
    : 'meta',
    : '[framework]/meta.json',
    : { : [{ : 'waku' }, { : 'astro' }] },
    : () => ({ : .framework }),
  },
];

params の一覧取得

コード内のフロントマターのように、各値のデータをローダーより先に解決できるよう、getStaticParams() は同じルールに従って params を一覧取得します。ストレージ内にあるメタファイルの staticParams を、拡張子を除いたパスをもとに読み込みます。

const  = ('[framework]/deploy.mdx', {
  : .,
  : () => .()?.,
});

値を列挙するものがない場合は undefined を返します。その場合、ファイルはリテラルなパスに対応する1つのページになります。

カスタム props

カスタム props をサポートするため、dataAt() は第2引数でカスタム props を受け取ります。このとき渡されるページデータは、ローダープラグイン適用後のものです。params とカスタム props に応じてレンダリングしたデータを返してください。

const : ['files'] = [
  {
    : 'page',
    : '[framework]/deploy.mdx',
    : ({}),
    : (, ) =>
       ? { ...., ...({ ..., .... }) } : (),
  },
];

dataAt() を持たないページでは、カスタム props は無視されます。

ランタイム出力

ソースが MDX をコンパイルする場合は、各ファイルのコンパイルを一度だけにし、ページの props をそのコンテンツに渡してください。同じ props で目次、検索レコード、Markdown を生成するには、次の設定を行います。

  • コンパイルするファイルの data に unstable_runtimeOutputs: true を設定します。Sätteri の場合は、コンパイルオプションの data に設定します。
  • 最後の rehype プラグインとして rehypeHeading を追加し、レンダリングされたテキストから見出し ID を生成します。
import { VFile } from 'vfile';

const file = new VFile({
  path: '[framework]/deploy.mdx',
  value: source,
  data: { unstable_runtimeOutputs: true },
});

この場合、プラグインは値ではなく関数をエクスポートします。たとえば、Rehype TOC の toc や Remark LLMs の _markdown コンポーネントがこれに該当します。これらは各ページの props を渡して呼び出します。

const { : , , :  } = ;

function (: object) {
  return {
    : 'Deploy',
    : (: MDXProps) => < {...} {...} />,
    : (),
    : () => (< {...} />),
    : ..,
  };
}

const : ['files'] = [
  {
    : 'page',
    : '[framework]/deploy.mdx',
    : ({}),
    : () => (),
  },
];

検索に使う場合は、Remark Structure のレコードをエクスポートからではなく file.data.structuredData から読み取ってください。これらのレコードにはすべての <show> 分岐が含まれ、式も元のソーステキストのまま保持されます。

unstable_ プレフィックスは、その API が今後変更される可能性があることを示しています。このフラグを指定しない場合、Rehype TOC、Remark Structure、Remark LLMs のいずれかが実行されると、<show> を含むドキュメントはコンパイルに失敗します。

How is this guide?

最終更新日

このページの内容

概要複数のソース静的ソース動的ソースパスパラメーターparams の一覧取得カスタム propsランタイム出力
Sponsors
General TranslationGeneral TranslationFerry HealthFerry Healthassistant-uiassistant-uiInkeepInkeep