手動安裝

請先閱讀快速入門指南瞭解基本概念。

入門

使用 create-next-app 創建一個新的 Next.js 應用程序，並安裝所需的包。

fumadocs-ui fumadocs-core

內容源

Fumadocs 支持不同的內容源，您可以選擇您喜歡的一種。

以下是官方支持的源列表：

請確保在繼續之前按照其設置指南正確配置庫，我們將在本指南中使用 @/lib/source.ts 導入源適配器。

根佈局

將整個應用程序包裝在 Root Provider 中，併為 body 添加所需的樣式。

import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body
        // you can use Tailwind CSS too
        style={{
          display: 'flex',
          flexDirection: 'column',
          minHeight: '100vh',
        }}
      >
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}

樣式

在您的 Next.js 應用程序上設置 Tailwind CSS v4，將以下內容添加到 global.css。

Tailwind CSS

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

/* path of `fumadocs-ui` relative to the CSS file */
@source '../node_modules/fumadocs-ui/dist/**/*.js';

它不附帶預設字體，您可以從 next/font 中選擇一個。

佈局

創建一個 app/layout.config.tsx 文件，放置我們佈局的共享選項。

{
  "file": "../../examples/next-mdx/app/layout.config.tsx",
  "codeblock": {
    "meta": "title=\"app/layout.config.tsx\""
  }
}

為我們的文檔創建一個資料夾 /app/docs，並給它一個適當的佈局。

{
  "file": "../../examples/next-mdx/app/docs/layout.tsx",
  "codeblock": {
    "meta": "title=\"app/docs/layout.tsx\""
  }
}

pageTree 指的是頁面樹，應該由您的內容源提供。

頁面

為文檔頁面創建一個捕獲所有路由 /app/docs/[[...slug]]。

在頁面中，將您的內容包裝在 Page 組件中。這可能因您的內容源而異。您應該使用 generateStaticParams 配置靜態渲染，並使用 generateMetadata 配置元數據。

{
  "file": "../../examples/next-mdx/app/docs/[[...slug]]/page.tsx",
  "codeblock": {
    "meta": "title=\"app/docs/[[...slug]]/page.tsx\" tab=\"Fumadocs MDX\""
  }
}

{
  "file": "../../examples/content-collections/app/docs/[[...slug]]/page.tsx",
  "codeblock": {
    "meta": "title=\"app/docs/[[...slug]]/page.tsx\" tab=\"Content Collections\""
  }
}

搜尋

使用基於 Orama 的預設文檔搜尋。

{
  "file": "../../examples/next-mdx/app/api/search/route.ts",
  "codeblock": {
    "meta": "title=\"app/api/search/route.ts\" tab=\"Fumadocs MDX\""
  }
}

{
  "file": "../../examples/content-collections/app/api/search/route.ts",
  "codeblock": {
    "meta": "title=\"app/api/search/route.ts\" tab=\"Content Collections\""
  }
}

瞭解更多關於文檔搜尋的資訊。

完成

您可以啟動開發伺服器並創建 MDX 文件。

content/docs/index.mdx

---
title: Hello World
---

## Introduction

I love Anime.

自定義

您可以為網站的其他頁面使用 Home Layout，它包含一個帶有主題切換的導航欄。

部署

它應該在 Vercel 和 Netlify 上開箱即用。

Docker 部署

如果您想使用 Docker 部署您的 Fumadocs 應用程序，並且已配置了 Fumadocs MDX，請確保將 source.config.ts 文件添加到 Dockerfile 中的 WORKDIR。以下片段取自官方 Next.js Dockerfile 示例：

Dockerfile

WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* source.config.ts ./

這確保 Fumadocs MDX 在構建期間可以訪問您的配置文件。

請先閱讀快速入門指南瞭解基本概念。

入門

使用 create-next-app 創建一個新的 Next.js 應用程序，並安裝所需的包。

fumadocs-ui fumadocs-core

內容源

Fumadocs 支持不同的內容源，您可以選擇您喜歡的一種。

以下是官方支持的源列表：

請確保在繼續之前按照其設置指南正確配置庫，我們將在本指南中使用 @/lib/source.ts 導入源適配器。

根佈局

將整個應用程序包裝在 Root Provider 中，併為 body 添加所需的樣式。

import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body
        // you can use Tailwind CSS too
        style={{
          display: 'flex',
          flexDirection: 'column',
          minHeight: '100vh',
        }}
      >
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}

樣式

在您的 Next.js 應用程序上設置 Tailwind CSS v4，將以下內容添加到 global.css。

Tailwind CSS

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

/* path of `fumadocs-ui` relative to the CSS file */
@source '../node_modules/fumadocs-ui/dist/**/*.js';

它不附帶預設字體，您可以從 next/font 中選擇一個。

佈局

創建一個 app/layout.config.tsx 文件，放置我們佈局的共享選項。

{
  "file": "../../examples/next-mdx/app/layout.config.tsx",
  "codeblock": {
    "meta": "title=\"app/layout.config.tsx\""
  }
}

為我們的文檔創建一個資料夾 /app/docs，並給它一個適當的佈局。

{
  "file": "../../examples/next-mdx/app/docs/layout.tsx",
  "codeblock": {
    "meta": "title=\"app/docs/layout.tsx\""
  }
}

pageTree 指的是頁面樹，應該由您的內容源提供。

頁面

為文檔頁面創建一個捕獲所有路由 /app/docs/[[...slug]]。

{
  "file": "../../examples/next-mdx/app/docs/[[...slug]]/page.tsx",
  "codeblock": {
    "meta": "title=\"app/docs/[[...slug]]/page.tsx\" tab=\"Fumadocs MDX\""
  }
}

{
  "file": "../../examples/content-collections/app/docs/[[...slug]]/page.tsx",
  "codeblock": {
    "meta": "title=\"app/docs/[[...slug]]/page.tsx\" tab=\"Content Collections\""
  }
}

搜尋

使用基於 Orama 的預設文檔搜尋。

{
  "file": "../../examples/next-mdx/app/api/search/route.ts",
  "codeblock": {
    "meta": "title=\"app/api/search/route.ts\" tab=\"Fumadocs MDX\""
  }
}

{
  "file": "../../examples/content-collections/app/api/search/route.ts",
  "codeblock": {
    "meta": "title=\"app/api/search/route.ts\" tab=\"Content Collections\""
  }
}

瞭解更多關於文檔搜尋的資訊。

完成

您可以啟動開發伺服器並創建 MDX 文件。

content/docs/index.mdx

---
title: Hello World
---

## Introduction

I love Anime.

自定義

您可以為網站的其他頁面使用 Home Layout，它包含一個帶有主題切換的導航欄。

部署

它應該在 Vercel 和 Netlify 上開箱即用。

Docker 部署

Dockerfile

WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* source.config.ts ./

這確保 Fumadocs MDX 在構建期間可以訪問您的配置文件。

入門

內容源

根佈局

樣式

佈局

頁面

搜尋

完成

自定義

部署

Docker 部署

作者

分類

更多文章

對比

搜尋

快速入門

加入我們的社區

手動安裝

入門

內容源

根佈局

樣式

佈局

頁面

搜尋

完成

自定義

部署

Docker 部署

作者

分類

更多文章

對比

搜尋

快速入門

加入我們的社區