Content Collections

Content Collections 是一個函式庫，能將您的內容轉換成型別安全的資料集合。

設定

請依照 Content Collections 的官方指南，在您的 React 框架中設定 Content Collections。

請確認您已設定好 MDX：

npm i @content-collections/mdx

若要與 Fumadocs 整合，請在您的 content-collections.ts 中加入以下內容。

content-collections.ts

import { defineCollection, defineConfig } from '@content-collections/core';
import { transformMDX } from '@fumadocs/content-collections/configuration';
import { metaSchema, pageSchema } from 'fumadocs-core/source/schema';

const docs = defineCollection({
  name: 'docs',
  directory: 'content/docs',
  include: '**/*.mdx',
  schema: pageSchema,
  transform: transformMDX,
});

const metas = defineCollection({
  name: 'meta',
  directory: 'content/docs',
  include: '**/meta.json',
  parser: 'json',
  schema: metaSchema,
});

export default defineConfig({
  collections: [docs, metas],
});

接著將它傳入 loader()。

lib/source.ts

import { allDocs, allMetas } from 'content-collections';
import { loader } from 'fumadocs-core/source';
import { createMDXSource } from '@fumadocs/content-collections';

export const source = loader({
  baseUrl: '/docs',
  source: createMDXSource(allDocs, allMetas),
});

大功告成！您現在可以透過 Source API 存取頁面及產生的頁面樹。

import { getPage } from '@/lib/source';

const page = getPage(slugs);

// MDX 輸出
page?.data.body;

// 目錄
page?.data.toc;

// 結構化資料，供 Search API 使用
page?.data.structuredData;

MDX 選項

您可以在 transformMDX 函式中自訂 MDX 選項。

import { defineCollection } from '@content-collections/core';
import { transformMDX } from '@fumadocs/content-collections/configuration';

const docs = defineCollection({
  transform: (document, context) =>
    transformMDX(document, context, {
      // 在此填入選項
    }),
});

匯入元件

若要使用其他套件 (例如 Fumadocs UI) 提供的元件，請將這些元件傳入您的 <MDXContent /> 元件。

import { MDXContent } from '@content-collections/mdx/react';
import { getMDXComponents } from '@/components/mdx';

return <MDXContent code={page.data.body} components={getMDXComponents()} />;

您也可以在 MDX 檔案中匯入它們，但不建議這麼做。

深入探討：為什麼？

Content Collections 使用 mdx-bundler 來打包 MDX 檔案。

為了支援從 node modules 匯入套件，Fumadocs 為 MDX Bundler 的 cwd 選項加入了預設值。雖然這樣運作良好，但我們仍然不建議在 MDX 檔案中匯入元件。

原因如下：

這需要透過 esbuild 打包這些元件，但這項工作理應由框架的打包工具 (例如 Vite 或 Turbopack) 負責
您可以重構元件的匯入路徑，而無須修改 MDX 檔案。
使用遠端來源 (Remote Sources) 時，在 MDX 檔案中加入匯入並沒有意義。

Content Collections

設定複製錨點連結

MDX 選項複製錨點連結

匯入元件複製錨點連結

本頁目錄

設定

MDX 選項

匯入元件