ローダープラグイン

概要

ローダープラグインを使うと、loader() を拡張して出力をカスタマイズできます。

組み込みプラグインの一覧:

Lucide Icons: Lucide React のアイコンを使用できます(lucide-react のインストールが必要です)。

import { loader } from 'fumadocs-core/source';
import { lucideIconsPlugin } from 'fumadocs-core/source/lucide-icons';

export const source = loader({
  // ...
  plugins: [lucideIconsPlugin()],
});

プラグインの作成

各プラグインは、次のようなオブジェクトです。

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

export const source = loader({
  plugins: ({ typedPlugin }) => [
    typedPlugin({
      // プラグインの設定
    }),
  ],
});

補足

typedPlugin を使うと、コンテンツソースのカスタムプロパティを含め、プラグインにより正確な型が適用されます。

ただし、プラグインを(複数のローダーで)再利用できるようにしたい場合は、代わりに LoaderPlugin 型を使用してください。

ストレージ

処理の過程で、入力されたソースファイルはパースされ、メモリ上の仮想ストレージとして構築されます。

処理の前に仮想ファイルシステム上の操作を行うには、transformStorage フックを使用します。

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

export const source = loader({
  plugins: ({ typedPlugin }) => [
    typedPlugin({
      transformStorage({ storage }) {
        storage.read('my/path');
      },
    }),
  ],
});

ページツリー

ページツリーはファイルシステムから生成され、その際に不要な情報(使用されていないフロントマターのプロパティなど)は除外されます。

transformPageTree を使うと、ノードにカスタムプロパティを付与したり、ページの表示名をカスタマイズしたりできます。

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

export const source = loader({
  plugins: ({ typedPlugin }) => [
    typedPlugin({
      transformPageTree: {
        file(node, file) {
          // 元の(フィルタリング前の)ファイルデータにアクセス
          if (file) console.log(this.storage.read(file));

          // ノードを変更
          node.name = <>Some JSX Nodes here</>;
          return node;
        },
      },
    }),
  ],
});

ローダープラグイン

概要アンカーリンクをコピー

プラグインの作成アンカーリンクをコピー

ストレージアンカーリンクをコピー

ページツリーアンカーリンクをコピー

このページの内容

概要

プラグインの作成

ストレージ

ページツリー