手動安裝

您也可以使用 Fumadocs CLI 自動完成設定：

npx @fumadocs/cli init

先決條件

繼續之前，請確認您已設定好：

Node.js 22.23.4 或更新版本 (Astro 的需求) 。
Tailwind CSS 4。

本指南使用 Astro 內容集合作為內容來源。@fumadocs/astro 會透過 Fumadocs 編譯這些內容，並將其中的 MDX 算繪為 React islands。

開始使用

安裝套件：

npm i fumadocs-core fumadocs-ui@npm:@fumadocs/base-ui @fumadocs/astro @astrojs/react react react-dom @types/mdx

與範本相同，此指令會將 fumadocs-ui 安裝為 @fumadocs/base-ui 的別名，也就是 Fumadocs UI 的 Base UI 版本。若要使用 Radix UI 版本，請直接安裝 fumadocs-ui，不要使用別名。

樣式

請將以下內容加入您的 Tailwind CSS 檔案：

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

整合

將 Fumadocs 整合加入您的 Astro 設定：

astro.config.mjs

import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
import fumadocs from '@fumadocs/astro';

export default defineConfig({
  integrations: [fumadocs({ components: './src/components/mdx.tsx' })],
  vite: {
    plugins: [tailwindcss()],
  },
});

內容集合

定義您的內容集合：

src/content.config.ts

import { defineCollection } from 'astro:content';
import { metaLoader, pageLoader } from '@fumadocs/astro/loaders';

export const collections = {
  docs: defineCollection({ loader: pageLoader() }),
  meta: defineCollection({ loader: metaLoader() }),
};

從您的集合建立 Fumadocs 來源：

src/lib/source.ts

import { getCollection } from 'astro:content';
import { loader } from 'fumadocs-core/source';
import { toFumadocsSource } from '@fumadocs/astro/source';

export const source = loader({
  source: toFumadocsSource(await getCollection('docs'), await getCollection('meta')),
  baseUrl: '/docs',
});

若要在同一個 loader() 中與其他來源合併使用，請將 { baseDir } 作為 toFumadocsSource() 的第三個引數傳入，讓其檔案放在指定目錄下。

路由

請建立下列檔案：

import defaultMdxComponents from 'fumadocs-ui/mdx';
import { DocsBody } from 'fumadocs-ui/layouts/docs/page';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents) {
  return {
    ...defaultMdxComponents,
    ...components,
  } satisfies MDXComponents;
}

// for the Fumadocs integration, `wrapper` gives the content its prose styles
export default getMDXComponents({ wrapper: DocsBody });

搜尋路由採用 ZBSearch，設定方式請參閱文件搜尋。

完成

啟動開發伺服器，即可在 content/docs 中撰寫您的文件：

content/docs/index.mdx

---
title: Hello World
---

## Introduction

I love Fumadocs.

先決條件複製錨點連結

開始使用複製錨點連結

樣式複製錨點連結

整合複製錨點連結

內容集合複製錨點連結

路由複製錨點連結

完成複製錨點連結

本頁目錄

先決條件

開始使用

樣式

整合

內容集合

路由

完成