emm...

因为课业(摸鱼)很久都没有写博客了，于是也积攒了很多可以写的素材。

关心我博客或者常常流连于各大博主论坛的小伙伴应该会发现，在博客的角落常常会蹲着一只可爱的看板娘。她/他会引导你浏览博客，并给予一定程度上的反馈和互动。

22真可爱

看到这我猜你已经心动了，但当你想要去网上查找资料时，往往会发现各类资料参差不齐，内容不符。所以我在这介绍一下Hexo下使用看板娘插件的教程，也留作备份。

两种方法

1. 第一种方法时直接使用插件库里的hexo-helper-live2d插件，这种方法理应快捷便利，只需要npm install hexo-helper-live2d然后启用就行，但是该项目已经3年没有更新且作者已经弃坑。

2. 第二种方法我采用了[张书樵大神的live2d-widget项目](https://github.com/stevenjoezhang/live2d-widget)，该项目基于原项目魔改而来，且更新较为及时，模型丰富，于是我采用了第二种方法。

具体配置看板娘

前期准备

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

npm uninstall hexo-helper-live2d

下载项目

从[张书樵大神的live2d-widget项目](https://github.com/stevenjoezhang/live2d-widget)下载项目并解压到：`themes\butterfly\source\`文件夹下例如我的：`D:\code\blog\themes\butterfly\source\`

(其实基本上博客主题相关文件资源都放在source文件夹下)

引入

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

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

即完成引入！

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

# 看板娘

live2d:

  enable: true

预览

在终端执行

hexo clean && hexo g && hexo s

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

当然，很多选项可以自行定制：

自定义配置

修改看板娘的位置

  在 live2d-widget 目录下的 waifu.css 中可以修改画布位置使得看板娘显示在你指定的位置

  具体在 #waifu 选择器下修改：

修改聊天内容

可以在 live2d-widget 文件夹下的 waifu-tips.js 文件中修改。

修改首次加载的模型

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

引用:

[blog.csdn.net](https://blog.csdn.net/csdn__cpp/article/details/110007453)