Clarify

内置组件演示

本页展示 Clarify 支持的 Markdown 和 MDX 元素渲染效果。

排版

标题

一级标题

二级标题

三级标题

四级标题

段落与行内样式

这是普通段落。粗体、斜体、行内代码、链接 都可以正常使用。

列表

无序列表：

  • 项目一
  • 项目二
    • 嵌套项目
    • 嵌套项目
  • 项目三

有序列表：

  1. 第一步
  2. 第二步
  3. 第三步

代码

行内代码

使用 npm install 安装依赖。

代码块

// TypeScript 示例
interface User {
  id: string;
  name: string;
  email: string;
}

function greet(user: User): string {
  return `Hello, ${user.name}!`;
}

{
  "name": "clarify",
  "version": "1.0.0",
  "description": "开源文档发布工具"
}

表格

特性说明状态
MDX 支持Markdown + React 组件✅
静态生成构建时预渲染✅
OpenAPIAPI 文档嵌入🚧
搜索全文搜索🚧

引用

这是一段引用文本。Clarify 让你用熟悉的 Markdown + React 组件编写文档。

分隔线

上方和下方使用 --- 分隔。

内置公开组件

Clarify 默认提供一组可直接在 MDX 中使用的组件，不需要手动导入。完整 API 说明见 内置公开组件。

Callout

Callout 用于强调说明、风险提示、推荐实践或操作结果。常见类型包括 info、note、tip、warning、danger 和 success。

<Callout type="info">
  模型列表会持续更新，生产接入前应以控制台或模型广场中当前可用模型为准。
</Callout>

信息

模型列表会持续更新，生产接入前应以控制台或模型广场中当前可用模型为准。

注意

生产环境发布前，请确认密钥、域名、权限和缓存策略都已经完成校验。

已完成

构建通过后，Clarify 会为每个路由生成可直接部署的静态 HTML。

CardGroup / Card

CardGroup 和 Card 用于创建章节入口、功能矩阵或首页导航。Card 的 icon 使用 lucide 图标名，支持 badge-info 这种 kebab-case 写法。

<CardGroup cols={2}>
  <Card title="快速开始" icon="rocket" href="/getting-started">
    安装 CLI 并创建第一个 Clarify 文档站点。
  </Card>
  <Card title="写作文档" icon="file-code-2" href="/guides/writing-content">
    使用 Markdown、JSX 和内置组件组织内容。
  </Card>
</CardGroup>

快速开始

安装 CLI 并创建第一个 Clarify 文档站点。

写作文档

使用 Markdown、JSX 和内置组件组织内容。

API 文档

接入 OpenAPI 描述文件并生成接口文档。

配置参考

查看站点配置、导航、主题和国际化选项。

Button

Button 用于提供明确的下一步操作。

开始安装

查看 GitHub

自定义 MDX 组件

你也可以在 Markdown 中直接使用 JSX 或导入自己的 React 组件：

提示

这是一个自定义 React 组件，直接在 MDX 中渲染！