Markdown 博客快速入门

1. 文件放哪

所有文章都放在 docs/ 目录里。文件名就是链接地址：

• docs/others/emoji.md → 访问 /others/emoji
• docs/others/emoji/index.md → 访问 /others/emoji/
• docs/index.md → 首页

2. 文章头部（frontmatter）

每篇文章开头用 --- 包起来的区域，用来写标题、描述等元信息：

---
title: 我的第一篇文章
description: 这篇文章讲了什么
---

标题会显示在浏览器标签和搜索结果里，页面正文里的标题仍要自己写。

3. 常用语法

# 一级标题
## 二级标题
### 三级标题

正文直接写就行。**加粗**、*斜体*、~~删除线~~。

[链接文字](https://example.com)

![图片说明](/main.png)

- 无序列表
- 第二项

1. 有序列表
2. 第二项

- [ ] 待办
- [x] 已完成

> 引用别人的话

`行内代码`

4. 代码块

用三个反引号围起来，后面写语言名：

```js
console.log('Hello World')
```

5. 表格

竖线加短横线就能做表格：

| 名称 | 说明 |
| --- | --- |
| 😀 | 开心 |
| 🚀 | 起飞 |

6. VitePress 特有功能

docs/public 里的文件直接用 /文件名 引用，比如 ![图片](/main.png)。

提示框：

> [!NOTE]
> 这是一条普通提示

> [!TIP]
> 小技巧

> [!WARNING]
> 注意这里

> [!DANGER]
> 危险警告

文章标题比较多时，VitePress 会自动在页面右侧生成目录，不用自己写。

7. 本地预览

在项目根目录运行：

npm run docs:dev

打开终端里显示的地址就能实时预览，写完保存自动刷新。改 config.mts 这类配置文件时如果没生效，重启一下 dev server。

8. 完整示例

新建 docs/others/my-first-post.md：

---
title: 我的第一篇文章
description: 练手用的示例文章
---

# 我的第一篇文章

欢迎来到我的博客，这是一段**加粗**的示例文字。

## 今日清单

- [x] 学会写标题
- [ ] 学会写表格
- [ ] 发布第一篇文章

## 示例代码

```js
console.log('Hello, Gin Blog!')
```

> [!TIP]
> 保存文件后，浏览器会自动刷新。

把文件放进 docs 后访问 /others/my-first-post 就能看到效果。