给hexo博客添加Live2d小人

昨天看到旁边的同事在美化自己的博客，看到他在搞这个，还挺好看的，所以现在刚好有时间也折腾了一下

一、安装hexo-helper-live2d插件

现在假设你已经又一个使用hexo搭建的博客，然后我们安装hexo-helper-live2d模块

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来部署，然后清除一下浏览器缓存，打开后就可以发现我们添加的小人已经在屏幕右下角看着你了。