hexo添加live2d,让你获得一个可爱的girlfriend

1.安装必备环境

假定你已经有了hexo的一些环境，比如npm，node等

我的个人环境如下：

$ node -v
v12.18.3
$ npm -v
6.14.6

本人博客的主题为：

hexo-theme-matery

2.安装模块

1. 首先进入博客的主目录下

2. 执行以下命令进行安装live2D模块

   npm install --save hexo-helper-live2d

3. 这样进行安装后，我并没有进行相关的配置直接就可以在博客中看到可爱的动漫人物了

   默认的人物是：

   shizuku

3.修改默认配置，选择自己喜欢的人物

截图预览，参考作者的博客，以下为相关展示

Epsilon2.1

Gantzert_Felixander

haru

miku

ni-j

nico

nietzche

nipsilon

nito

shizuku

tsumiki

wanko

z16

hibiki

koharu

haruto

Unitychan

tororo

hijiki

4. 安装你自己喜欢的人物对应的模块包

1. 模型列表

   • 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

   比如我这里选择了 hibiki,那么安装命令如下：

   使用使用npm install {packagename}安装模型

   npm install live2d-widget-model-hibiki

2. 这里网上说的是去主题下的_config.yml或者hexo主目录下的_config.yml进行配置，但是我的博客在主题下的_config.yml这样配置后并没有生效，所以我在hexo博客的主目录下的_config.yml文件中进行了如下配置，就可以生效了，将默认的替换成了我自己选择的。

   # Live2D
   ## https://github.com/EYHN/hexo-helper-live2d
   ## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
   live2d:
     enable: true
     #enable: false
     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-hibiki
       # 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: left
       width: 145
       height: 315
     mobile:
       show: true # 是否在移动设备上显示
       scale: 0.5 # 移动设备上的缩放       
     react:
       opacityDefault: 0.7
       opacityOnHover: 0.8

3.参考文章

• Hexo博客添加helper-live2d动态模型插件
• live2d的GitHub文档
• hexo live2d插件 2.0 !