MkSaaS文檔手動安裝
從零開始創建一個新的 Fumadocs 項目
請先閱讀快速入門指南瞭解基本概念。
入門
使用 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。
@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 文件。
---
title: Hello World
---
## Introduction
I love Anime.自定義
您可以為網站的其他頁面使用 Home Layout，它包含一個帶有主題切換的導航欄。
部署
它應該在 Vercel 和 Netlify 上開箱即用。
Docker 部署
如果您想使用 Docker 部署您的 Fumadocs 應用程序，並且已配置了 Fumadocs MDX，請確保將 source.config.ts 文件添加到 Dockerfile 中的 WORKDIR。
以下片段取自官方 Next.js 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 在構建期間可以訪問您的配置文件。