584 字
3 分钟
Markdown 步骤引导
步骤引导把普通的有序列表渲染成带序号圆圈与竖向连线的流程图,语义结构仍是标准 <ol>/<li>,序号圆圈由 CSS 伪元素绘制。
带标题与起始序号
效果
快速上手三步曲
安装环境依赖
确保本地 Node.js 版本满足
>= 22.12,并安装 pnpm 包管理器。克隆并初始化仓库
Terminal window git clone https://github.com/LyraVoid/Shirone.gitcd Shironepnpm install启动本地开发服务器
运行
pnpm dev并在浏览器中访问http://localhost:4321。
源码(容器名与花括号之间不能有空格;步骤正文与嵌套代码块缩进 3 个空格)
:::steps{title="快速上手三步曲" start=1}1. **安装环境依赖**
确保本地 Node.js 版本满足 `>= 22.12`,并安装 pnpm 包管理器。2. **克隆并初始化仓库**
```bash git clone https://github.com/LyraVoid/Shirone.git cd Shirone pnpm install ```3. **启动本地开发服务器**
运行 `pnpm dev` 并在浏览器中访问 `http://localhost:4321`。:::方括号标题写法
效果
内容仓改一篇稿子的流程
- 改
content/posts/下的 Markdown - 本地
pnpm content:sync后预览 - 提交推送到内容仓,等待站点自动重建
源码
:::steps[内容仓改一篇稿子的流程]1. 改 `content/posts/` 下的 Markdown2. 本地 `pnpm content:sync` 后预览3. 提交推送到内容仓,等待站点自动重建:::参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | 空 | 标题,最长 200 字符 |
start | 正整数 | 1 | 起始序号 |
:::steps[标题] | — | — | 方括号标题写法,与 title= 等价 |
说明
- 容器只接受一个有序列表;传入无序列表、多段文本等会把整块保留为普通 Markdown;
- 每个步骤内部可以自由嵌套段落、代码块、图片与提示容器;
- 视觉序号带
aria-hidden,屏幕阅读器读到的是标准列表语义; - 纯 SSR 输出,无客户端 JavaScript。
Markdown 步骤引导
https://www.klucen.cn/posts/博客搭建/markdown-steps/分享文章
生成精美分享图或复制链接,与更多人分享本文。
继续阅读
换条路线
从其他文章中稳定抽取
最后更新于 ,距今已过 301 天
部分内容可能已过时
评论