在Hexo博客里面插入asciinema终端记录视频

发表于 更新于 阅读次数： 阅读次数：

概述

前几天发现了一个很有意思的记录终端操作的工具asciinema,使用起来异常简单功能却很强大，很佩服开发者的想象力和创造力。
今天我在想，能否在Hexo博客里面插入asciinema录的视频呢？Google了一下，发现真的已经有人做出了该功能的插件hexo-tag-asciinema,安装了下果然可以在博客里面插入asciinema，而且一个超级简单的命令即可完成。像下面就是一个例子(用C++编写一个简单的HelloWorld程序)：

下面详细介绍每个步骤。

asciinema安装

参照这里的教程,常见的asciinema的安装方式有下面2种：

  1. 通过系统的包管理软件安装
    Debian:
    1
    sudo apt-get install asciinema
    Ubuntu:
    1
    2
    3
    sudo apt-add-repository ppa:zanchey/asciinema
    sudo apt-get update
    sudo apt-get install asciinema

2.通过pip3安装，需要先安装python3

1
sudo pip3 install asciinema

asciinema使用

安装好后，打开终端,输入asciinema rec 开始记录，按Ctrl-D结束记录。
结束记录后，会让你选择是否需要上传数据，如果选择Y,则会给出一个URL，点击该URL即可访问你刚才录的视频。
另外，你也可以在asciinema官网上注册帐号，这样你所有记录的数据都可以保存在上面，你可以通过asciinema auth来验证帐号。

在Hexo里面插入asciinema的视频

假设你已经在本地安装好了Hexo博客系统而且已经通过asciinema录制好了视频并上传到asciinema网站上。
首先是通过npm安装hexo-tag-asciinema:

1
npm install --save hexo-tag-asciinema

然后在Hexo博客的markdown文件里面，使用下面的命令来插入视频:

1
{% asciinema video_id %}

其中video_id是你上传的视频的编号，比如你视频所在的页面是https://asciinema.org/a/41100, 那在video_id那里填41100。
然后保存markdown文件，执行npm install安装必要的包，再hexo deploy部署你的博客，就可以看到效果了。