avatar

Hexo添加Live2d看板动画效果

引言

Hexo是一个快速、简洁且高效的博客框架,能够快速生成静态页面,只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站,支持 GitHub Flavored Markdown 的所有功能,同时还拥有强大的插件系统。

img

为增添页面趣味性,这次主要介绍 Hexo 添加Live2d看板动画效果。

添加Live2d看板动画

看板动画

站点根目录下载插件,安装成功后,你可以在你的站点根文件夹/node_modules/底下找到live2d-widget这个文件夹。

1
npm install --save hexo-helper-live2d

安装你想要的live2d动画人物,这里选择 live2d-widget-model-koharu

1
npm install live2d-widget-model-koharu

在站点根目录下_config.yml添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#live2d看板动画
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-koharu
display:
superSample: 2
width: 150
height: 300
position: right
hOffset: 100
vOffset: -50
mobile:
show: true
scale: 0.5
react:
opacityDefault: 0.7
opacityOnHover: 0.2

本地预览效果

1
hexo clean && hexo g && hexo s

Live2d各个模型:

live2d-widget-model-chitose

img

live2d-widget-model-epsilon2_1

img

live2d-widget-model-haru_01

img

live2d-widget-model-haru_02

img

live2d-widget-model-haruto

img

live2d-widget-model-koharu

img

live2d-widget-model-hibiki

img

live2d-widget-model-miku

img

live2d-widget-model-hijiki

img

live2d-widget-model-tororo

img

live2d-widget-model-izumi

img

live2d-widget-model-nico

img

live2d-widget-model-nietzsche

img

live2d-widget-model-ni-j

img

live2d-widget-model-nipsilon

img

live2d-widget-model-nito

img

live2d-widget-model-shizuku

img

live2d-widget-model-tsumiki

img

live2d-widget-model-unitychan

img

live2d-widget-model-gf

img

live2d-widget-model-wanko

img

live2d-widget-model-z16

[img

文章作者: Wu Fei
文章链接: http://linuxwf.com/2020/04/09/Hexo%E6%B7%BB%E5%8A%A0Live2d%E7%9C%8B%E6%9D%BF%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WF's Blog
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论