手動安裝

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

開始使用

使用 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 在建置期間可以存取你的設定檔。

目錄