文档系统
Fumadocs 内容块
覆盖 Fumadocs UI 全量内容块类型（含可直接渲染示例与额外依赖说明）。
按需启用更多组件（控制构建体积）
为了控制文档页客户端包体，模板默认只映射常用组件。
如果你需要使用更多内容块（如 Accordions、Banner、InlineTOC、TypeTable、DynamicCodeBlock），请在 DocsContent.tsx 中按需导入并注入：
import { Accordion, Accordions } from "fumadocs-ui/components/accordion";
import { Banner } from "fumadocs-ui/components/banner";
import {
CodeBlock,
CodeBlockTab,
CodeBlockTabs,
CodeBlockTabsList,
CodeBlockTabsTrigger,
Pre,
} from "fumadocs-ui/components/codeblock";
import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
import { InlineTOC } from "fumadocs-ui/components/inline-toc";
import {
TabsContent,
TabsList,
TabsTrigger,
} from "fumadocs-ui/components/tabs";
import { TypeTable } from "fumadocs-ui/components/type-table";
// ...
<MDXContent
code={code}
components={{
...defaultMdxComponents,
Accordions,
Accordion,
Banner,
CodeBlock,
Pre,
CodeBlockTabs,
CodeBlockTabsList,
CodeBlockTabsTrigger,
CodeBlockTab,
DynamicCodeBlock,
TabsList,
TabsTrigger,
TabsContent,
InlineTOC,
TypeTable,
}}
/>
// ...
标准 Markdown 展示
标题层级
四级标题
五级标题
六级标题
- 无序列表项 A
- 无序列表项 B
- 无序列表项 C
- 有序列表项 1
- 有序列表项 2
- 有序列表项 3
这是引用块，用于展示
blockquote的渲染样式。
| 字段 | 类型 | 说明 |
|---|---|---|
title | string | 标题 |
icon | string | 图标名 |
const section = {
title: "CMS",
icon: "Blocks",
pages: ["cms-blog", "cms-docs"],
};
组件总览（本页覆盖）
| 分类 | 组件 |
|---|---|
| 提示信息 | Callout、CalloutContainer、CalloutTitle、CalloutDescription |
| 卡片 | Cards、Card |
| 标签页 | Tabs、Tab、TabsList、TabsTrigger、TabsContent |
| 代码块 | CodeBlock、Pre、CodeBlockTabs、CodeBlockTabsList、CodeBlockTabsTrigger、CodeBlockTab、DynamicCodeBlock |
| 步骤与文件树 | Steps、Step、Files、Folder、File |
| 目录与结构 | InlineTOC、Accordions、Accordion、TypeTable |
| 媒体与横幅 | ImageZoom（含 img 自动增强）、Banner |
| 服务端块 | GithubInfo（本页给代码示例） |
Callout 系列
Callout 示例
这是 Callout 简写形式，常用于信息提示。
warn 类型
支持 warn、warning、error、success、idea 等类型。
组合式 Callout（CalloutContainer）
当你需要更细粒度控制标题和正文时，可使用 CalloutContainer + CalloutTitle + CalloutDescription。
Cards / Card
Tabs / Tab（简写模式）
pnpm install
pnpm devnpm install
npm run devTabsList / TabsTrigger / TabsContent（高级模式）
适合服务端获取数据后直接渲染，减少客户端负担。
适合需要频繁交互、浏览器 API 或本地状态管理的场景。
代码块组件
Markdown 代码块（默认会走 pre -> CodeBlock 渲染）
export const project = {
name: "MuseMVP",
stack: ["Next.js", "Hono", "Drizzle"],
} as const;CodeBlockTabs（多段代码切换）
RESEND_API_KEY="re_xxx"
DATABASE_URL="postgres://..."DynamicCodeBlock（运行时高亮）
export function sum(a: number, b: number) {return a + b;}Steps / Step
在 content/docs 下创建新的 *.mdx 文件。
在对应 meta.{locale}.json 中注册页面顺序。
在 frontmatter 中添加 title、description、icon。
Files / Folder / File
cms-blog.zh.mdx
cms-docs.zh.mdx
paid-content-demo.zh.mdx
meta.zh.json
ImageZoom（含 img 自动增强）
默认 Markdown 图片会被 ImageZoom 增强（点击可放大）：
也可以显式指定宽高使用组件：
Accordions / Accordion
可以把长文档里的细节折叠起来，让主干信息更清晰。
Banner
InlineTOC
Inline TOC - A
这里是 A 段内容。
Inline TOC - B
这里是 B 段内容。
Inline TOC - C
这里是 C 段内容。
TypeTable
Prop
Type
GithubInfo（服务端块示例）
GithubInfo是异步组件，推荐放在服务端渲染路径中使用。当前页面为客户端 MDX 渲染，因此这里展示标准写法，不做实渲。
<GithubInfo owner="fuma-nama" repo="fumadocs" />可选传参：
token: GitHub Token（提高 API 限额）baseUrl: 自定义 GitHub API 地址（企业版场景）
额外依赖与限制说明
| 能力 | 是否需要额外安装 | 说明 |
|---|---|---|
fumadocs-ui/components/* 中的大部分内容块 | 否 | 你当前项目已安装 fumadocs-ui，本页示例可直接使用。 |
DynamicCodeBlock | 否 | 依赖 fumadocs-core 高亮能力，当前项目已具备。 |
ImageZoom | 否 | 依赖 react-medium-image-zoom，已由 fumadocs-ui 带入。 |
GithubInfo | 否（组件层面） | 但建议放在服务端渲染路径，且生产环境建议配置 token 避免频控。 |
TypeScript 自动类型表（如 AutoTypeTable） | 是 | 这类属于额外扩展能力，不在 fumadocs-ui 核心内容块里，需要单独接入对应插件。 |
组件速查（最终版）
| 组件 | 用途 |
|---|---|
Callout / CalloutContainer | 信息提示、告警、成功状态 |
Cards / Card | 卡片网格与链接卡片 |
Tabs / Tab / TabsList / TabsTrigger / TabsContent | 内容切换（简写与高级模式） |
CodeBlock / CodeBlockTabs / DynamicCodeBlock | 代码展示、高亮与代码分组 |
Steps / Step | 步骤列表 |
Files / Folder / File | 文件树展示 |
ImageZoom | 图片放大查看 |
Accordions / Accordion | 折叠面板 |
Banner | 顶部提示横幅 |
InlineTOC | 内联目录导航 |
TypeTable | API/类型参数表 |
GithubInfo | GitHub 仓库信息卡（服务端推荐） |
更多细节请参考 Fumadocs 文档。