文档编写指南

content/
├── index.mdx                  # 首页配置（hero / features）
└── docs/                      # 文档根
    ├── meta.json              # 侧边栏导航配置
    ├── index.mdx              # 文档首页
    ├── getting-started.mdx
    └── theming/               # 子目录 = 侧边栏分组
        ├── meta.json          # 分组配置
        ├── theme-config.mdx
        └── theme-development.mdx

{
  "title": "文档",
  "pages": [
    "index",
    "getting-started",
    "configuration",
    "theming",
    "excce",
    "frequent-questions"
  ]
}

{
  "title": "主题系统",
  "description": "主题配置与开发指南",
  "defaultOpen": false,
  "pages": [
    "theme-config",
    "theme-development"
  ]
}

---
title: 站点标题
hero:
  title: 渐变色主标题
  description: 粗体副标题
  tagline: 灰色标语
  actions:
    - text: 主按钮
      href: /docs/getting-started
      variant: primary
    - text: 次按钮
      href: /docs
    - text: 外部链接
      href: https://example.com
      external: true
features:
  - icon: 🚀
    title: 特性标题
    description: 特性描述
---

---
title: 文档标题
description: 简要描述
date: 2025-09-14
lastModified: 2026-01-28
index: 0
slug: custom/path
---

## 二级标题 — 会在右侧 TOC 生成锚点
### 三级标题
#### 四级标题（尽量少用）

[博客](https://blog.heikeson.com)

![描述](https://example.com/image.jpg)
![描述](https://example.com/image.jpg "鼠标悬停提示")

> 引用内容
>
> 可以多段落

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

- 项目一
  - 子项
    - 孙项

- [ ] 未完成
- [x] 已完成

```yaml
title: 示例
description: YAML 示例
```

| 安装方式           | 难度 | 适用场景         |
| ------------------ | ---- | ---------------- |
| **Docker Compose** | ⭐⭐ | 生产环境         |
| **源码部署**       | ⭐⭐⭐⭐ | 开发环境     |

---

<Callout type="info" title="信息提示">
这是一条提示信息。
</Callout>

<Callout type="warn" title="警告">
这是一个警告信息。
</Callout>

<Tabs items={["选项一", "选项二"]}>
  <Tab value="选项一">
    **内容一**
    - 支持 Markdown
  </Tab>
  <Tab value="选项二">
    内容二
  </Tab>
</Tabs>

<Accordions type="single">
  <Accordion title="折叠项标题">
    展开后的内容，支持 Markdown。
  </Accordion>
  <Accordion title="另一项">
    更多内容。
  </Accordion>
</Accordions>

<Files>
  <Folder name="src" defaultOpen>
    <File name="index.ts" />
    <File name="app.tsx" />
  </Folder>
  <File name="package.json" />
</Files>

![](https://example.com/image.jpg){caption="底部描述文字"}

![](https://example.com/image.jpg){width=800 height=600}

![](https://example.com/image.jpg){align=left}
![](https://example.com/image.jpg){align=center}
![](https://example.com/image.jpg){align=right}

![风景照片](url "悬停提示"){caption="描述" width=800 align=center}

当 $a \ne 0$ 时，$ax^2 + bx + c = 0$ 有两个解。

$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

```mermaid
graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]
    B -->|否| D[结束]
    C --> D
```

```mermaid
sequenceDiagram
    participant U as 用户
    participant S as 服务器
    U->>S: 发送请求
    S-->>U: 返回响应
```

```mermaid
gitGraph
   commit
   branch develop
   checkout develop
   commit
   checkout main
   merge develop
   commit
```

<font color="#00ffff" size="7">青色大字体</font>

<p style={{ textAlign: "center" }}>居中文字</p>
<p style={{ textAlign: "right" }}>右对齐文字</p>

<div className="flex flex-col items-center text-center">
  <p>居中容器中的内容</p>
</div>