这是什么
这篇短文演示如何在博客文章里嵌入一段交互式终端录屏。录屏用 asciinema rec 录制为 .cast 文件,再用 asciinema-player 原样回放,保留真实的终端配色与 ANSI 转义序列。
示例
下面是一段简单的终端操作录屏:
特性
- 自动播放:页面加载后自动回放(若系统未开启「减弱动态效果」)。
- 双主题:跟随博客暗色开关联动,亮/暗配色对齐站内代码块。
- 减弱动态效果:开启后终端定格在末帧,不自动播放、不循环,仍可手动点播放。
- 无 JS 兜底:禁用 JavaScript 时展示静态 SVG 截图。
在自己的文章里使用
在 markdown 里写一个 asciinema fenced 代码块,内容是一行 JSON:
```asciinema
{"src": "/casts/your.cast", "alt": "描述", "cols": 80}
```
其中 src 是 .cast 文件在 public/ 下的路径,alt 用于无障碍与 noscript 兜底图,cols 可选(默认读录制时的宽度)。