昨天看到旁边的同事在美化自己的博客，看到他在搞这个，还挺好看的，所以现在刚好有时间也折腾了一下
一、安装hexo-helper-live2d插件
现在假设你已经又一个使用hexo搭建的博客，然后我们安装hexo-helper-live2d模块
npm install --save hexo-helper-live2d
二、添加配置文件
在hexo博客到_config.yml文件添加以下配置
建议在根目录下的_config.yml配置，这样以后换了主题就不用重新配置了
当然也可以在themes下的_config.yml配置但是要注意模型目录要填写正确
live2d:
enable: true # 是否启动
scriptFrom: local # 默认
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: live2d-widget ## 模型文件
display:
position: right # 定位方向 left right top bottom
width: 150 # 小人宽度
height: 300 # 小人高度
hOffset: -15 # 向👇偏移
vOffset: -15 # 像👈偏移
mobile:
show: true # 手机端是否显示
react:
opacity: 0.7 # 模型透明度
三、修改你喜欢的模型
你可以在这里找到你喜欢的模型
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
然后通过npm install npm install --save live2d-widget-model-xxx来安装你喜欢的模型
比方说作者喜欢的是koharu这个那就使用npm install npm install --save live2d-widget-model-koharu进行安装
安装后我们在node_modules目录下面找到live2d-widget-model-koharu这个文件夹，把这个文件夹复制下来
找到我们的hexo博客的根目录(因为我们是在根目录的_config.yml里添加的配置)新建一个文件夹叫做live2d_models，把刚刚我们复制的文件粘贴过来，这样我们就完成了99%，最后我们打开添加的配置文件，找到这一行
model:
use: live2d-widget ## 模型文件
把use后面改成我们复制在live2d_models文件夹里面的模型目录名称，这样我们就完成了修改使用hexo d || hexo deploy来部署，然后清除一下浏览器缓存，打开后就可以发现我们添加的小人已经在屏幕右下角看着你了。
更多内容关注我的博客 xiaobaicai.fun
