在Hexo部落格裡面插入asciinema終端記錄影片

2019 年 12 月 25 日
筆記

概述

前幾天發現了一個很有意思的記錄終端操作的工具asciinema,使用起來異常簡單功能卻很強大，很佩服開發者的想像力和創造力。今天我在想，能否在Hexo部落格裡面插入asciinema錄的影片呢？Google了一下，發現真的已經有人做出了該功能的插件hexo-tag-asciinema,安裝了下果然可以在部落格裡面插入asciinema，而且一個超級簡單的命令即可完成。像下面就是一個例子(用C++編寫一個簡單的HelloWorld程式)：

下面詳細介紹每個步驟。

asciinema安裝

參照這裡的教程,常見的asciinema的安裝方式有下面2種：

通過系統的包管理軟體安裝 Debian: sudo apt-get install asciinema Ubuntu: sudo apt-add-repository ppa:zanchey/asciinema sudo apt-get update sudo apt-get install asciinema

2.通過pip3安裝，需要先安裝python3

sudo pip3 install asciinema

asciinema使用

安裝好後，打開終端,輸入asciinema rec 開始記錄，按Ctrl-D結束記錄。結束記錄後，會讓你選擇是否需要上傳數據，如果選擇Y,則會給出一個URL，點擊該URL即可訪問你剛才錄的影片。另外，你也可以在asciinema官網上註冊帳號，這樣你所有記錄的數據都可以保存在上面，你可以通過asciinema auth來驗證帳號。

在Hexo裡面插入asciinema的影片

假設你已經在本地安裝好了Hexo部落格系統而且已經通過asciinema錄製好了影片並上傳到asciinema網站上。首先是通過npm安裝hexo-tag-asciinema:

npm install --save hexo-tag-asciinema

然後在Hexo部落格的markdown文件裡面，使用下面的命令來插入影片:

{% asciinema video_id %}

其中video_id是你上傳的影片的編號，比如你影片所在的頁面是https://asciinema.org/a/41100, 那在video_id那裡填41100。然後保存markdown文件，執行npm install安裝必要的包，再hexo deploy部署你的部落格，就可以看到效果了。