自行建置

頁面樹複製錨點連結

您可以將頁面樹直接寫死在程式碼中，也可以撰寫程式碼來產生。 請參閱頁面樹的定義。

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

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      tree={
        {
          // 您自己的頁面樹
        }
      }
    >
      {children}
    </DocsLayout>
  );
}

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

頁面內容複製錨點連結

文件頁面的邏輯也相同：

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

您可能還需要目錄，可以自行產生，或使用 getTableOfContents 工具函式 (僅限 Markdown/MDX) 。

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

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>
  );
}

預先算繪複製錨點連結

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

在 react-router.config.ts 的 prerender 中回傳路徑。

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

/docs/* -> GET github.com
/docs/introduction -> GET github.com
/docs/my-page -> GET github.com
Error: API Ratelimit

文件搜尋複製錨點連結

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

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