使用Hexo的helper-live2d插件自定义博客看板娘

经常逛别人博客都会看到看板娘，但是那些看板娘我都不太喜欢。度娘搜了搜Hexo看板娘教程来来去去都是使用live2d-widget-models提供的那几个模型，昨天偶然在gitee上看到了少女前线的Live2D文件很喜欢！！！搜了一下好像没什么教程是自定义Live2d模型的，都是使用helper-live2d插件提供的模型。
在gitee上看到的少女前线的Live2D模型文件除了预览图和贴图文件，一个都没看懂。自己琢磨了一下，对比了github上live2d-widget-models提供的模型，发现文件大致上分为四类，moc（程序中要用到的 Live2D 模型数据）、mtn（程序中要用到的 Live2D 模型的动作数据）、json（模型数据）、png（模型预览图和贴图）

参考了Hexo安装helper-live2d的模型教程，成功自定义了少女前线的模型！！！

接下来是自定义Live2D模型的演示

安装

安装helper-live2d插件，github传送门

npm install --save hexo-helper-live2d

导入模型

这里只演示自定义模型的设置，想使用 live2d-widget-model的可以自行百度

1. 在Hexo根目录新建live2d_models文件夹
2. 将模型文件放进live2d_models文件夹
3. 重命名模型文件中的json文件

这里以我下载的少女前线模型为例

将整个hk416_805复制到Hexo根目录新建live2d_models文件夹中

将文件夹重命名为 hk416(文件夹名字是自定义的)，同时要保证文件中的hk416.model.json文件的名字要和文件夹名字对应。

在这个模型中这一步不是必要的，因为json文件已经和文件夹同名了，但是有些Live2D的模型文件不一定同名，需要自行修改成xxx.model.json

配置

在Hexo根目录的_config.yml配置文件中添加配置

## live2d
live2d:
   enable: true # 是否开启live2d
   scriptFrom: local # 脚本从本地引入
   pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
   pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
   pluginModelPath: assets/ # 模型文件相对与插件根目录路径
   tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
   debug: false # 调试, 是否在控制台输出日志
   model:
       use: hk416 # 填写放进live2d_models文件夹中的模型文件夹名字
       scale: 1 # canvas 模型与canvas的缩放
   display:
       width: 150 # 宽度
       height: 300 # 高度
       position: left # 显示位置
       hOffset: 0 #水平偏移
       vOffset: -20 #垂直偏移
   mobile:
       show: true # 手机端是否显示
       scale: 0.5 # 移动设备上的缩放
  react:
      opacity: 0.7 # 透明度

更多参数配置可以自行查看官方API文档，传送门

	姓名：shadow
	个人博客传送门

相关文章：

Hexo博客Butterfly主题美化

Butterfly主题Valine评论美化