Hexo -5- 添加 live2d 看板动画

本文最后更新于:2021年12月11日 上午

live2d是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。 在Hexo中生成可以与用户互动的卡通人物,简直就是博客的灵魂所在。本文介绍live2d 看板动画添加方法。

安装 hexo-helper-live2d

官网链接 hexo-helper-live2d Github 官方链接

安装时需要在 Hexo 工程目录下输入命令:

1
npm install --save hexo-helper-live2d

挑选喜欢的模型

基础的live2d模型有很多,挑选你喜欢的记录下他的名字:

chitose

epsilon2_1

gf

haru/01

haru/02

haruto

hibiki

hijiki

izumi

koharu

miku

nico

nietzsche

ni-j

nipsilon

nito

shizuku

tororo

tsumiki

unitychan

wanko

z16

模型下载

命令行

在hexo目录中输入命令:

1
npm install --save live2d-widget-model-`模型名字`

此时在hexo根目录/node_modules/ 文件夹中增加 ’ live2d-widget-model-模型名字 ’ 文件夹

github下载

上述列表模型 github地址

新模型 gtihub地址

可以下载模型放在hexo根目录/node_modules/ 文件夹中,以达到命令行安装的效果

模型应用配置

站点配置文件中加入配置信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-<模型名字>
display:
position: right # left
width: 220
height: 440
mobile:
show: true #是否在手机进行显示
react:
opacity: 0.7

haru

haru 和其他模型有些不同,haru包中包含 01 / 02 两个模型,在使用时模型名字为:

1
2
model:
use: live2d-widget-model-haru/01

1
2
model:
use: live2d-widget-model-haru/02

此时模型仍然无法正确加载,因为hexo根目录/node_modules/live2d-widget-model-haru/01/或02/ 中的json文件是空的,所以需要把hexo根目录/node_modules/live2d-widget-model-haru/中的json文件复制到01/或02/文件夹中。

测试

输入命令:

1
hexo clean && hexo g && hexo s

http://127.0.0.1:4000/查看测试结果 (示例为z16)

加强版(可以说话、互动)

优化版live2d-widget

具体方法参考

https://blog.csdn.net/weixin_34235371/article/details/91468588

https://blog.csdn.net/cungudafa/article/details/104282643#_47