组件
Onedocs 会为你的 MDX 文件注册一组 Fumadocs UI 组件，因此无需导入即可使用。
使用组件
将 mdxComponents 传递给你的 MDX 内容：
TSX
import { DocsPage, mdxComponents } from "onedocs";
// In your page component:
<MDX components={mdxComponents} />
mdxComponents 包含 Fumadocs UI 默认组件（带锚点链接的标题、代码块、链接、图片、表格、Card、Cards 和 Callout），以及 Tab、Tabs、Step、Steps、Accordion、Accordions、File、Folder、Files、ImageZoom 和 TypeTable。以下所有示例都可以直接使用。
提示框
突出显示重要信息。type 是 info（默认值）、warn、error、success 或 idea 之一：
Mdx
<Callout type="info">
This is an informational callout.
</Callout>
<Callout type="warn">
This is a warning callout.
</Callout>
<Callout type="error">
This is an error callout.
</Callout>
使用 title 添加标题：
Mdx
<Callout type="warn" title="Breaking change">
The `docs` option was removed in version 2.
</Callout>
标签页
将内容整理到选项卡中。每个 Tab value 对应 items 中的一个条目：
Mdx
<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
<Tab value="npm">npm install onedocs</Tab>
<Tab value="yarn">yarn add onedocs</Tab>
<Tab value="pnpm">pnpm add onedocs</Tab>
<Tab value="bun">bun add onedocs</Tab>
</Tabs>
卡片
使用卡片网格链接到其他页面：
Mdx
<Cards>
<Card title="Getting Started" href="/docs/getting-started">
Learn how to set up Onedocs
</Card>
<Card title="Configuration" href="/docs/configuration">
Configure your documentation
</Card>
</Cards>
步骤
显示编号步骤：
Mdx
<Steps>
<Step>Install Onedocs</Step>
<Step>Create configuration</Step>
<Step>Write documentation</Step>
</Steps>
折叠面板
用于常见问题和可选详情的可折叠内容。同一时间只会展开一个条目：
Mdx
<Accordions>
<Accordion title="What is Onedocs?">
Layouts, components and SEO helpers for documentation sites built with Next.js and Fumadocs.
</Accordion>
<Accordion title="How do I install it?">
Follow the install step in Getting Started.
</Accordion>
</Accordions>
文件
显示文件树：
Mdx
<Files>
<Folder name="content" defaultOpen>
<Folder name="docs" defaultOpen>
<File name="index.mdx" />
<File name="getting-started.mdx" />
</Folder>
</Folder>
<File name="onedocs.config.ts" />
</Files>
图片缩放
点击图片后会以原始尺寸打开。来自 public/ 的图片必须提供 width 和 height：
Mdx
<ImageZoom src="/screenshot.png" alt="Dashboard" width={1200} height={800} />
类型表格
记录 API 的属性或选项：
Mdx
<TypeTable
type={{
title: {
type: "string",
description: "Site name shown in the navbar.",
},
description: {
type: "string",
description: "Used for meta tags and the home page.",
default: "undefined",
},
}}
/>
更多组件
InstallBlock 和 CodeBlock 未包含在 mdxComponents 中。要在 MDX 中使用它们，请将其添加到你传入的对象中：onedocs
TSX
import { CodeBlock, DocsPage, InstallBlock, mdxComponents } from "onedocs";
// In your page component:
<MDX components={{ ...mdxComponents, InstallBlock, CodeBlock }} />
其他组件可在你的 MDX 文件中从 Fumadocs UI 导入，或用相同方式添加：
TypeScript
import { Banner } from "fumadocs-ui/components/banner";
import { InlineTOC } from "fumadocs-ui/components/inline-toc";
完整列表请参阅 Fumadocs 文档。