在butterfly主题下如何配置加强版看板娘？

Hexo 在butterfly主题下如何配置加强版看板娘？

前期准备

如果已经安装过官方提供的live2d，需要先卸载！

npm uninstall hexo-helper-live2d

然后，

1.下载

经过张书樵大神魔改后的项目下载地址：https://github.com/stevenjoezhang/live2d-widget

下载解压到：themes\butterfly\source\文件夹下

例如我的：

C:\Users\cds\Desktop\gitCode\blog\themes\butterfly\source\live2d-widget

2.设置绝对路径

打开项目目录进入修改autoload.js文件，将live2d_path设为自己的路径，一般没什么太大变化都为：/live2d-widget/

3.引入

打开butterfly下的layout下的includes目录，点击修改head.pug文件，在文件末尾粘贴：

script(src='/live2d-widget/autoload.js')

即完成引入！

最后在主题配置文件下即butterfly下的_config.yml中开启看板娘：

# 看板娘
live2d:
  enable: true

运行项目就可以在左下角看到一个可换装、可聊天的动态加强版看板娘啦。

当然你也可以自己做一些简单修改：

4.自定义配置

• 修改看板娘的位置
  在live2d-widget目录下的waifu.css中可以修改画布位置使得看板娘显示在你指定的位置
  具体在#waifu选择器下修改：

我这里设置的是看板娘固定在页面右下角！

- 修改聊天内容
可以在live2d-widget文件夹下的waifu-tips.js文件中修改，进去就可以看到大量的文本内容，原作者为此也是花了不少心思组织了这么多语言。我是懒得改了，hahaha~😄

• 修改首次加载的模型

  如果你不喜欢默认的第一个模型，可以指定首次加载的模型，具体配置在live2d-widget文件夹下的waifu-tips.js中的大约160行，原作者也在这里注释了模型的ID，默认为1，后面的模型依次递增，我比较喜欢第二个和第三个2233娘，那就把这里改成2就行了。

效果预览

ps

附上我的个人bolg地址：MingHui-明辉大大，希望和大家一起交流学习！