二甲基

语法格式#

使用 ::: steps 容器包裹标准 Markdown 有序列表：

1
::: steps{title="快速上手三步曲"}
2

3
1. **安装环境依赖**
4

5
   确保本地 Node.js 版本满足 `>= 22.12`，并安装 pnpm 包管理器。
6

7
2. **克隆并初始化仓库**
8

9
   ```bash
10
   git clone https://github.com/LyraVoid/Shirone.git
11
   cd Shirone
12
   pnpm install
13
   ```
14

15
3. **启动本地开发服务器**
16

17
   运行 `pnpm dev` 并在浏览器中访问 `http://localhost:4321`。
18

19
:::

渲染效果：

::: steps{title=“快速上手三步曲”}

1. 安装环境依赖

   确保本地 Node.js 版本满足 >= 22.12，并安装 pnpm 包管理器。

2. 克隆并初始化仓库

   1
   git clone https://github.com/LyraVoid/Shirone.git
   2
   cd Shirone
   3
   pnpm install

3. 启动本地开发服务器

   运行 pnpm dev 并在浏览器中访问 http://localhost:4321。

:::

方括号标题形式#

标题也支持方括号写法，适合标题中包含标点的情况：

1
::: steps[发布前检查清单]
2
1. 运行 `pnpm.cmd astro check`，确认 0 错误
3
2. 运行 `pnpm.cmd build`，确认无警告
4
3. 推送内容仓库，等待跨仓构建
5
:::

渲染效果：

::: steps[发布前检查清单]

1. 运行 pnpm.cmd astro check，确认 0 错误
2. 运行 pnpm.cmd build，确认无警告
3. 推送内容仓库，等待跨仓构建 :::

步骤内部可以放什么#

每一步都是一个完整的 Markdown 上下文，可以自由嵌套段落、代码块、提示容器与图片：

1
::: steps{title="配置评论系统"}
2

3
1. **填写环境变量**
4

5
   ::: warning 注意
6
   变量名区分大小写。
7
   :::
8

9
2. **在配置文件中启用**
10

11
   ```yaml title="config/comment.yaml"
12
   enable: true
13
   provider: twikoo
14
   ```
15

16
:::

渲染效果：

::: steps{title=“配置评论系统”}

1. 填写环境变量

2. 在配置文件中启用

   1
   enable: true
   2
   provider: twikoo

:::

与普通有序列表的区别#

渲染特性#

• 序号圆圈与竖向引导连线完全由 CSS 伪元素与 Material 3 令牌驱动，语义结构保持为标准的 <ol> 列表。
• 支持在每个步骤内部自由嵌套段落、代码块、提示容器或图片。