自从看了JetBrains主页上那个命令行模拟器,就一直想弄一个玩玩。今天谷歌了一下,果然有这样的插件。
暂时选定了使用这个http://terminal.jcubic.pl/: 主页上的标题也感觉非常高大上:
这一周就开始搞这个吧:-D。
首先从官网下载需要压缩包文件,建议将以下文件引入到网页中:
创建对应的显示区域
让terminal显示到浮动在右下角,并有关闭按钮,需要CSS限定位置
然后用js实现功能
一个简单的右下角浮动shell就出现了。
在我的博客上部署的时候很奇怪发现,命令行的一行只有35个字符,无法充满整个命令行。一直找不到是啥原因。
于是去博客上询问了一下作者,并附上了一个简单的DEMOhttp://jsfiddle.net/sumy/f7qdrp1y/。作者看了之后指出,要修改字体,需要将所有的terminal
统一字体。
但是这样还是不行,最后发现是在计算单个字符的地方出现了点差错。
作者计算单个字符的时候使用了.terminal span
里空格的宽度,但是这个类选中了一个莫名其妙的字体,导致空格无故变宽。通过修改css强制修改font-family
就可以了。