載入器外掛

概覽

載入器外掛可以擴充 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 hook。

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

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

頁面樹

頁面樹會根據您的檔案系統產生，並過濾掉部分不必要的資訊 (例如未使用的 frontmatter 屬性) 。

您可以透過 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;
        },
      },
    }),
  ],
});

概覽複製錨點連結

建立外掛複製錨點連結

儲存空間複製錨點連結

頁面樹複製錨點連結

本頁目錄

概覽

建立外掛

儲存空間

頁面樹