# Fumadocs (Framework Mode): 簡介
URL: /zh-TW/docs
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/index.zh-TW.mdx

專為 React 打造的文件框架

# Set up Fumadocs

Instructions for AI agents to set up Fumadocs on Next.js. The setup changes between versions, so run the commands below and read the linked docs instead of writing the setup from memory. Add `.md` to the URL of a docs page to read it as Markdown.

Use Next.js unless the user asks for another framework, or their app uses another one. In that case, follow the instructions of that framework instead:

- Next.js: https://fumadocs.dev/docs/next.md
- React Router: https://fumadocs.dev/docs/react-router.md
- TanStack Start: https://fumadocs.dev/docs/tanstack-start.md
- Waku: https://fumadocs.dev/docs/waku.md
- Astro: https://fumadocs.dev/docs/astro.md

## New Site

Create a new docs site in a new folder, or as a workspace package of a monorepo:

```bash
npx create-fumadocs-app@latest my-docs --template +next+fuma-docs-mdx --install --yes
```

For a static site, use the `+next+fuma-docs-mdx+static` template.

- `my-docs` is the folder to create.
- `--yes` skips the prompts, and the options you don't pass use their defaults. The options are listed in https://fumadocs.dev/docs/cli/create-fumadocs-app.md

## Existing App

To add docs to an existing app, run the CLI in the folder of the app:

```bash
npx @fumadocs/cli@latest init
```

- The CLI detects the framework, and adds the docs pages with their own layout beside the existing routes.
- `--i18n` sets up internationalization.
- The CLI asks before it overwrites a file. Without a terminal, it keeps the file and prints its name. Pass `--yes` only when every file it writes can be overwritten.

To set up by hand, or to merge a file that the CLI kept, follow https://fumadocs.dev/docs/next/manual-installation.md

## After the Setup

Both commands print the next steps. Start the dev server and open the docs, at `/docs` unless the output names another path.

For the tasks that follow, read the docs page of the task first:

- Writing pages: https://fumadocs.dev/docs/next/markdown.md
- Organizing pages and folders: https://fumadocs.dev/docs/next/page-conventions.md
- Customizing the UI: https://fumadocs.dev/docs/next/guides/customize-ui.md
- Changing the theme and colors: https://fumadocs.dev/docs/ui/theme.md
- Other tasks: https://fumadocs.dev/llms.txt lists every docs page.

Fumadocs <span className="text-fd-muted-foreground text-sm">(Foo-ma docs)</span> 是一個**文件框架**，設計上追求快速與彈性，
並能無縫整合至您的 React 框架中。它由多個層次組成：

<Cards>
<Card title="Fumadocs Core" href="/docs/headless">
負責大部分的邏輯，包括文件搜尋、內容來源轉接器，以及 Markdown 擴充功能。
</Card>

<Card title="Fumadocs UI" href="/docs/ui">
Fumadocs 的預設主題，為文件網站與互動式元件打造美觀的外觀。
</Card>

<Card title="內容來源">
內容的出處，可以是 CMS，也可以是像 [Fumadocs MDX](/docs/mdx) (官方內容來源) 這類本機資料層。
</Card>

<Card title="Fumadocs CLI" href="/docs/cli">
用來安裝 UI 元件及自動化各項作業的命令列工具，在自訂版面配置時特別實用。
</Card>
</Cards>

<Callout title="想了解更多嗎？">
請閱讀我們的深入介紹：[什麼是 Fumadocs](/docs/next/what-is-fumadocs)。
</Callout>

## 選擇框架 [#choosing-a-framework]

本指南依框架分別撰寫。請選擇您的應用程式所使用的框架；若是新專案，建議選擇 Next.js：

<Cards>
<Card title="Next.js（推薦）" href="/docs/next">
功能強大且成熟，是新專案的預設選擇。
</Card>

<Card title="React Router" href="/docs/react-router">
適用於 React Router 應用程式。透過其 SPA 模式，可將網站以靜態方式託管於 CDN。
</Card>

<Card title="TanStack Start" href="/docs/tanstack-start">
適用於 TanStack Start 應用程式。透過其 SPA 模式，可將網站以靜態方式託管於 CDN。
</Card>

<Card title="Waku" href="/docs/waku">
快速又簡單，是建構於 Vite 之上、支援伺服器元件的 React 框架。
</Card>

<Card title="Astro" href="/docs/astro">
適用於 Astro 網站，支援內容集合，並以 React islands 的形式算繪 MDX。
</Card>
</Cards>

<Callout title="以更簡便的開發者體驗試用 Fumadocs">
[Fumapress](https://press.fumadocs.dev) 是一個網站產生器，在 Fumadocs 的基礎上替您管理更多功能。

* 自動路由、`llms.txt`、MCP 等基本功能。
* 基於 Vite ([Waku](https://waku.gg)) 。

它會強制使用自有的 React 框架，但也因此能提供更好的開發者體驗。
</Callout>