hexo 添加live2d看板动画
https://www.jianshu.com/p/3a6342e16e57
首先贴出官网代码
官网地址配置:https://www.npmjs.com/package/hexo-helper-live2d
按如下步骤执行
1️⃣ 首先检查博客主目录下面的 package.json
里是否有"hexo-helper-live2d": "^3.0.3",
依赖,有的话可以先卸载
使用命令:npm uninstall hexo-helper-live2d
之后再安装:npm install --save hexo-helper-live2d
注意:命令都是在你的博客主目录执行
![](http://upload-images.jianshu.io/upload_images/5841000-e2664ebfd731a8d9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/630/format/webp)
我的博客目录结构:d:/github/blog
安装完成之后在
package.json
会看到安装的model
![](http://upload-images.jianshu.io/upload_images/5841000-02a497abe20b74de.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/607/format/webp)
package.json依赖
此时再去
node_moduels
目录下,可以看到有如下文件夹,这些都是动画主配置
![](http://upload-images.jianshu.io/upload_images/5841000-9ba59c23a3e93f97.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/699/format/webp)
node_modules目录
2️⃣下载各种动画model:
地址: https://github.com/xiazeyu/live2d-widget-models.git
3️⃣下载好之后将packages里的所有动画模板拷贝到博客的node_modules目录里
![](http://upload-images.jianshu.io/upload_images/5841000-e55231f39459c4ce.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
packages目录
4️⃣配置博客站点配置文件,_config.yml
live2d:
enable: true
pluginModelPath: assets/
model:
use: live2d-widget-model-epsilon2_1 #模板目录,在node_modules里
display:
position: right
width: 150
height: 300
mobile:
show: false #是否在手机进行显示
5️⃣开始部署
当使用hexo clean
或者 hexo g
命令的时候,这时候就可以看到如下日志了
![](http://upload-images.jianshu.io/upload_images/5841000-af7c4a71f5345b9f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/894/format/webp)
构建日志
INFO HEXO-HELPER-LIVE2D: Loaded model from npm-module(1), live2d-widget-model-epsilon2_1@1.0.5 from 'D:\github\blog\node_modules\live2d-widget-model-epsilon2_1\assets'
说明已经加载到了配置的动画模板,到此就完成了。