快为您的Hexo博客加上一只可爱的看板娘吧!

emm…
因为课业(摸鱼)很久都没有写博客了,于是也积攒了很多可以写的素材。
关心我博客或者常常流连于各大博主论坛的小伙伴应该会发现,在博客的角落常常会蹲着一只可爱的看板娘。她/他会引导你浏览博客,并给予一定程度上的反馈和互动。
image.png
看到这我猜你已经心动了,但当你想要去网上查找资料时,往往会发现各类资料参差不齐,内容不符。所以我在这介绍一下Hexo下使用看板娘插件的教程,也留作备份。

两种方法

  1. 第一种方法时直接使用插件库里的hexo-helper-live2d插件,这种方法理应快捷便利,只需要npm install hexo-helper-live2d然后启用就行,但是该项目已经3年没有更新且作者已经弃坑。
  2. 第二种方法我采用了张书樵大神的live2d-widget项目,该项目基于原项目魔改而来,且更新较为及时,模型丰富,于是我采用了第二种方法。

具体配置看板娘

前期准备

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

npm uninstall hexo-helper-live2d

下载项目

张书樵大神的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 文件中修改,进去就可以看到大量的文本内容,原作者为此也是花了不少心思组织了这么多语言。我是懒得改了,hahaha~😄

  • 修改首次加载的模型

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

引用:
blog.csdn.net