# Fumadocs (Framework Mode, TanStack Start): 自行建置
URL: /zh-TW/docs/tanstack-start/integrations/content/custom
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/integrations/content/custom.zh-TW.mdx

為 Fumadocs 打造您專屬的內容來源。

## 簡介 [#introduction]

實作自訂內容來源的方式有兩種：

### 使用載入器 API [#using-loader-api]

載入器 API 提供類似檔案系統的介面，方便整合各種不同的內容來源。

詳情請參閱[載入器 API `source`](/docs/headless/source-api/source)。

### 使用低階 API [#using-low-level-api]

若需要更靈活的控制，您可以直接使用較低階的 API。

#### 頁面樹 [step] [#page-tree]

您可以將頁面樹直接寫死在程式碼中，也可以撰寫程式碼來產生。
請參閱[頁面樹的定義](/docs/headless/page-tree)。

在您的文件版面配置中，將頁面樹傳給 `DocsLayout`：

```tsx title="layout.tsx"
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      // [!code ++:5]
      tree={
        {
          // 您自己的頁面樹
        }
      }
    >
      {children}
    </DocsLayout>
  );
}
```

頁面樹就像是更聰明的「側邊欄項目」，UI 中各處的導覽元素 (例如頁尾) 都會參照它。

#### 頁面內容 [step] [#page-content]

文件頁面的邏輯也相同：

* 定義路徑參數 (`slugs`) 。
* 依據路徑參數取得頁面內容。
* 算繪內容 (在 `DocsPage` 元件內) 。

您可能還需要目錄，可以自行產生，或使用 [`getTableOfContents`](/docs/headless/utils/get-toc) 工具函式 (僅限 Markdown/MDX) 。

在您所用框架的文件路由中算繪內容：

```tsx title="components/docs-page.tsx"
import { DocsPage, DocsBody } from 'fumadocs-ui/layouts/docs/page';
import { getPage } from './my-content-source';

export function Page({ slugs }: { slugs: string[] }) {
  const page = getPage(slugs);
  // 使用框架提供的 API 回應 404
  if (!page) return null;

  return (
    <DocsPage toc={page.tableOfContents}>
      <DocsBody>{page.render()}</DocsBody>
    </DocsPage>
  );
}
```

#### 預先算繪 [step] [#pre-rendering]

預先算繪頁面 (尤其是經常造訪的頁面) ，以縮短初始載入時間。

啟用 `tanstackStart()` Vite 外掛的 `prerender` 選項。

從遠端來源預先算繪頁面時，請務必最佳化建置階段的重複讀取。
例如，若您透過 GitHub API 擷取內容，建議先將儲存庫內容複製 (clone) 到本機，再進行預先算繪。

```text tab="Before"
/docs/* -> GET github.com
/docs/introduction -> GET github.com
/docs/my-page -> GET github.com
Error: API Ratelimit
```

```text tab="After"
開始 -> git clone
/docs/* -> ls
/docs/introduction -> 讀取檔案
/docs/my-page -> 讀取檔案
```

#### 文件搜尋 [step] [#document-search]

由於您的內容不一定是 Markdown/MDX，這部分可能較為棘手。
若是 Markdown 與 MDX，內建的 [Search API](/docs/headless/search/orama) 搭配搜尋索引即可滿足大多數使用情境。
若非如此，您就需要自行實作。

我們推薦使用 Orama 或 Algolia Search 等第三方解決方案，它們比內建的 Search API 更具彈性，也更容易與遠端來源整合。
Fumadocs 提供了多種[搜尋整合](/docs/headless/search)。