如果你使用了butterfly做hexo主题

可以向界面加入一些装饰,但butterfly使用了pug模板,所以与其他主题可能有些区别


1.live2d看板娘,能聊天,能玩耍,能换装等等

这得感谢大神stevenjoezhang为原本只能显示一个模型的live2d插件添加了许多功能
如果对位置什么的没有很大的要求的话,直接打开
themes\Butterfly\layout\includes\head.pug
结尾加入一行
script(src=’https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js‘)
就行了
当然你会发现直接这样加的话,阅读Page时,打开TOC的话,看板娘会被遮住
所以建议调整看板娘位置
前往https://github.com/stevenjoezhang/live2d-widget 下载
解压后将autoload.js第二行的位置改成你挂载在服务器上的autoload.js所在文件夹的绝对路径
比如autoload.js在科大ftp的/public_html/js/live2d-widget/目录下,这里就要改成http://home.ustc.edu.cn/~username/js/live2d-widget/ (科大ftp的根目录是/public_html/)
然后修改waifu.css里面的 #waifu下的 left: 0;将这一行改成right: 70px;

1
2
3
4
5
6
7
8
9
#waifu {
bottom: -1000px;
left: 0; //这一行改成right: 70px;
line-height: 0;
position: fixed;
transform: translateY(3px);
transition: transform .3s ease-in-out, bottom 3s ease-in-out;
z-index: 1;
}

将head.pug添加的src的autoload.js的路径改成你上传的路径就行了


2.全局吸底APlayer

打开themes\Butterfly\layout\includes\head.pug
结尾加一句

1
include ./third-party/aplayer.pug

然后在themes\Butterfly\layout\includes\third-party\里面新建一个文件叫 aplayer.pug ,内容如下
1
2
3
4
5
6
if theme.aplayer && theme.aplayer.enable
.aplayer(data-id=theme.aplayer.id data-server=theme.aplayer.server data-type=theme.aplayer.type data-fixed=theme.aplayer.fixed data-mini=theme.aplayer.mini data-listFolded=theme.aplayer.listFolded data-order=theme.aplayer.order data-preload=theme.aplayer.preload)
each item in theme.aplayer.css
link(rel='stylesheet', href=item)
each item in theme.aplayer.js
script(src=item)

然后打开butterfly.yml(如果你没有启用的话,就打开themes\Butterfly_config.yml) 加入以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
aplayer:
enable: true
js:
- https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js
- https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js
css:
- https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css
id: 2661264578
server: netease
type: playlist
fixed: 'true'
order: random
preload: none
listFolded: 'false'

然后重新生成就可以看到 aplayer了,这里的id是我的网易云歌单号,可以修改成别的.
但是浏览Page时会发现 aplayer会和 TOC(怎么又是它) 的切换按钮重合
打开themes\Butterfly\source\css\_global\index.styl
修改第61行
1
2
3
4
5
6
7
8
9
#toggle-sidebar
position: fixed
bottom: $sidebar-icon-top //这里改成bottom: 70px
left: $sidebar-icon-left
z-index: 100
font-size: $sidebar-icon-size
// opacity: 0
cursor: pointer
transition: all .2s

就可以了