# Fumadocs Core (the core library of Fumadocs): Content Collections
URL: /zh-TW/docs/headless/content-collections
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/headless/content-collections/index.zh-TW.mdx

在 Fumadocs 中使用 Content Collections

[Content Collections](https://www.content-collections.dev) 是一個函式庫，能將您的內容轉換成型別安全的資料集合。

## 設定 [#setup]

請依照 Content Collections 的[官方指南](https://content-collections.dev/docs)，在您的 React 框架中設定 Content Collections。

請確認您已設定好 MDX：

```npm
npm i @content-collections/mdx
```

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

```ts title="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()`。

```ts title="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 存取頁面及產生的頁面樹。

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

const page = getPage(slugs);

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

// 目錄
page?.data.toc;

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

### MDX 選項 [#mdx-options]

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

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

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

### 匯入元件 [#import-components]

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

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

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

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

<Callout title="深入探討：為什麼？">
Content Collections 使用 `mdx-bundler` 來打包 MDX 檔案。

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

原因如下：

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