Waku

前提条件

开始之前，请确保已配置：

• Tailwind CSS 4
• Fumadocs MDX（按照 Vite 设置指南）
• 已创建 lib/source.ts 等必要文件

安装

npm i fumadocs-core fumadocs-ui

样式配置

在 Tailwind CSS 文件中添加导入：

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

文件结构设置

布局配置文件

创建 lib/layout.shared.tsx，包含：

• GitHub 配置（用户名、仓库、分支）
• 定义导航标题和 GitHub URL 的基础布局属性

必需组件文件

MDX 组件（components/mdx.tsx）： 导出默认的 Fumadocs MDX 组件，支持自定义扩展。

文档布局（pages/docs/_layout.tsx）： 使用 DocsLayout 组件包裹文档页面，传入来源的页面树结构。

动态页面（pages/docs/[...slugs].tsx）： 渲染单个文档页面，包含：

• 目录
• 页面标题和描述
• Markdown 复制按钮
• 视图选项弹出框
• MDX 内容渲染
• 静态路径生成配置

搜索 API（pages/_api/api/search.ts）： 使用 fumadocs-core 的 createFromSource 提供搜索功能。

Provider 设置

在 Fumadocs providers 下包裹应用：

创建 components/provider.tsx 导出 RootProvider 组件，然后在根布局文件中集成。

内容创建

在 content/docs 目录中使用带有 front matter（标题和其他元数据）的 MDX 格式创建文档。