本站写作指南

本站基于 VitePress 1.x。除了标准 Markdown，还支持以下富内容能力——本页本身即是全部特性的现场演示。

提示容器

用 ::: 语法高亮重要信息：

::: info 信息
这是一条普通信息。
:::

::: tip 提示
有帮助的小技巧。
:::

::: warning 注意
需要留意的行为。
:::

::: danger 危险
可能导致数据丢失等严重后果。
:::

实际效果：

信息

这是一条普通信息。

提示

有帮助的小技巧。

注意

需要留意的行为。

危险

可能导致数据丢失等严重后果。

点开折叠

需要但不常用的细节内容，默认折叠。

代码块与代码组

行号默认开启，可指定语言高亮：

export function greet(name: string): string {
  return `Hello, ${name}!`
}

同一操作的不同包管理器写法，用代码组（::: code-group）合并展示：

npm

npm run dev

pnpm

pnpm dev

Mermaid 图表

代码块语言标记为 mermaid 即可渲染流程图、时序图、甘特图等：

```mermaid
flowchart LR
    A[写 Markdown] --> B{push 到仓库}
    B -->|CI 构建| C[notes.dollarlu.top]
    B -->|构建失败| D[修复后重推]
```

实际效果：

时序图示例：

嵌入视频

B 站视频

用全局组件 BilibiliVideo，传 BV 号即可（16:9 自适应）：

<BilibiliVideo bvid="BV1GJ411x7h7" />

实际效果（B 站官方演示视频）：

YouTube 视频

用 YouTubeVideo 组件，传视频 ID（v= 后面那串）：

<YouTubeVideo videoId="dQw4w9WgXcQ" />

图片

图片放进 docs/public/（如 docs/public/img/screenshot.png），正文引用：

![截图说明](/img/screenshot.png)

正文图片已启用点击放大（medium-zoom），直接写普通 Markdown 即可，无需额外处理。

在 Markdown 里用 Vue 组件

VitePress 的 Markdown 即 Vue 模板。组件 props 用 :prop 传值、插槽内容写在标签中间：

<BilibiliVideo :page="2" bvid="BV1xx411c7mD" title="第二分 P" />

自定义新组件：放到 docs/.vitepress/theme/components/，并在 theme/index.ts 的 enhanceApp 里注册。

Frontmatter 与 SEO

每个页面建议写标题和描述，会进入页面 <head> 与 sitemap：

---
title: 页面标题
description: 一句话描述（搜索结果摘要）
---

全站 sitemap 地址：https://notes.dollarlu.top/sitemap.xml，已配置 robots.txt。

表格

功能	语法	备注
容器	::: tip … :::	四种级别
代码组	::: code-group	多标签切换
图表	```mermaid	Mermaid 11
B 站视频	<BilibiliVideo>	全局组件
图片放大	无需语法	主题已内置

---

更多细节参考 VitePress 中文文档。