给博客添加 live2d 看板娘

写在前面
最早的时候看别人的博客很多都有一个可爱的看板娘，然后就找了教程给自己也整了一个。因为找到的教程都是稂莠不齐的，原作者自己说的也略显含糊（其实是我自己看不懂）。总之秉承着一如既往的小白风格。把网上的教程做个整合。
Hexo 插件版看板娘（不能换装）

点击查看插件化配置方案

首先是博客自带的看板娘，这孩子不会说话也不能换装，只会跟着你的鼠标晃动脑袋，不过有几款超可爱。
安装
在 Hexo 根目录 [Blogroot] 下打开终端，输入以下指令安装必要插件。

1	npm install --save hexo-helper-live2d

打开站点配置文件 [Blogroot]\config.yml
搜索 live2d, 按照如下注释内容指示进行操作。
如果没有搜到 live2d 的配置项，就直接把以下内容复制到最底部。

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true #开关插件版看板娘
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
  display:
    position: right #控制看板娘位置
    width: 150 #控制看板娘大小
    height: 300 #控制看板娘大小
  mobile:
    show: true # 手机中是否展示

完成后保存修改，在 Hexo 根目录下运行指令

1
2
3

hexo clean
hexo g
hexo s

之所以必须要使用 hexo clean 是因为我们需要清空缓存重新生成静态页面，不然看板娘没被加入生成的静态页面里，是不会出现的。
更换看板娘
同样是在 Hexo 根目录 [Blogroot] 下，打开终端，选择想要的看板娘进行安装，例如我这里用到的是 live2d-widget-model-koharu，一个 Q 版小正太。其他的模型也可以在模型预览里查看以供选择。
输入指令

1	npm install --save live2d-widget-model-koharu

然后在站点配置文件 [Blogroot]_config.yml 里找到 model 项修改为期望的模型

1
2
3

model:
  use: live2d-widget-model-koharu
  # 默认为live2d-widget-model-wanko

之后按部就班的运行

1
2
3

hexo clean
hexo g
hexo s

就能在 localhost:4000 上查看效果了。
卸载看板娘
卸载插件和卸载模型的指令都是通过 npm 进行操作的。在博客根目录 [Blogroot] 打开终端，输入：

1 2	npm uninstall hexo-helper-live2d #卸载看板娘插件 npm uninstall live2d-widget-model-modelname #卸载看板娘模型。记得替换modelname为看板娘名称

卸载后为了保证配置项不出错，记得把 [Blogroot]_config.yml 里的配置项给注释或者删除掉。