使用指南

安裝複製錨點連結

初始化 CLI 的設定檔：

npx @fumadocs/cli

您可以在設定檔中變更元件的輸出路徑。

初始化複製錨點連結

在現有的應用程式中設定 Fumadocs，支援 Next.js、React Router、TanStack Start、Waku 及 Astro。

npx @fumadocs/cli init

為了避免與您的應用程式發生衝突，文件頁面會放在專屬的路由群組中 (例如 Next.js 上的 app/(docs)) ，並擁有各自的 provider 與版面配置；搜尋 API 等路由處理常式則依照範例建立。現有檔案只會有少量修改：

• 在您的框架設定中加入 Fumadocs MDX 外掛。
• 在您的全域 CSS 中加入 Fumadocs UI 樣式。
• 在根版面配置的 <html> 元素上加入 suppressHydrationWarning，以支援主題切換。
• 在 .gitignore 中加入 .source。

傳入 --i18n 即可設定國際化：文件路由會加上語系區段 (若路由器支援，預設語系可省略此區段) ，並建立 lib/i18n.ts 設定檔；在 Next.js 上還會加入一個僅作用於文件路由的代理伺服器。其他功能則會沿用您專案的 i18n 設定。

覆寫檔案前會先詢問您；傳入 --yes 可略過提示，傳入 --no-install 則只會將相依套件寫入 package.json，而不會安裝。

功能複製錨點連結

為您的專案設定某項功能後，即會安裝所需的元件與路由，並將其整合至您的應用程式中。

npx @fumadocs/cli feature ai --provider openrouter

功能會依您的專案設定自動調整：

• 使用 Macro API 或 source.config.ts 的 Fumadocs MDX；其他內容來源無法使用 llms、mcp 與 epub。
• 文件的 baseUrl、src/ 目錄、next.config.ts、i18n、靜態匯出與 SPA 模式。
• 使用檔案式路由的 React Router：改為輸出需要註冊的路由。
• 使用 @fumadocs/astro 集合的 Astro：無法使用 ai，且 mcp 與 epub 需要轉接器。

路由路徑會定義在 lib/shared.ts 的常數中。

請參閱說明以了解可用的選項：

npx @fumadocs/cli feature -h

元件複製錨點連結

選擇並安裝元件。

npx @fumadocs/cli add

您可以直接傳入元件名稱。

npx @fumadocs/cli add banner files

背後的原理是什麼？複製錨點連結

CLI 會從 Fumadocs registry (https://fumadocs.dev/registry) 取得最新版本的元件。 因此您安裝的元件保證都是最新版本。

此外，CLI 也會轉換匯入路徑。 請務必使用最新版本的 CLI

自訂複製錨點連結

以簡單的方式自訂 Fumadocs 版面配置。

npx @fumadocs/cli customize

這會將版面配置安裝到 layouts，並將路由檔案中的匯入改為指向該版面配置。

Shadcn UI複製錨點連結

在含有 components.json 的專案中，CLI 會沿用 Shadcn UI 的別名，並且：

• 安裝 shadcn 預設組合，讓 Fumadocs UI 套用您的主題色彩。
• 重複使用您 ui 目錄中的 button、popover 與 collapsible，因為它們與 Shadcn UI 的 API 相同。
• 從您的 utils 別名匯入 cn。

只有在您尚未擁有這些元件時，才會安裝 Fumadocs 提供的版本。

Tree複製錨點連結

在終端機中使用 tree 指令，為 Fumadocs UI 的 Files 元件產生檔案樹。

npx @fumadocs/cli tree ./my-dir ./output.tsx

您也可以輸出 MDX 檔案：

npx @fumadocs/cli tree ./my-dir ./output.mdx

如需更多詳細資訊，請參閱說明：

npx @fumadocs/cli tree -h

輸出範例複製錨點連結

import { File, Folder, Files } from 'fumadocs-ui/components/files';

export default (
  <Files>
    <Folder name="app">
      <File name="layout.tsx" />
      <File name="page.tsx" />
      <File name="global.css" />
    </Folder>
    <Folder name="components">
      <File name="button.tsx" />
      <File name="tabs.tsx" />
      <File name="dialog.tsx" />
    </Folder>
    <File name="package.json" />
  </Files>
);