avatar

给自己的博客领养一只小白猫

前几天浏览网页中无意看到了集成了live2d的博客,觉得挺有趣,就打算给自己的博客也集成一个,废话不多说,赶紧记录下拉,以免自己忘记

live2d的安装

hexo已经有人集成了live2d的插件,详情见GitHub ,安装readme指示做就ok,这里记录一下自己的操作步骤

  • 1.安装npm包
1
npm install --save hexo-helper-live2d
  • 2.在hexo的配置文件_config.yml中添加如下配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
live2d:
enable: true
# enable: false
pluginRootPath: live2dw/ # Root path of plugin to be on the site (Relative)
pluginJsPath: lib/ # JavaScript path related to plugin's root (Relative)
pluginModelPath: assets/ # Relative model path related to plugin's root (Relative)
scriptFrom: local # Default
# scriptFrom: jsdelivr # jsdelivr CDN
# scriptFrom: unpkg # unpkg CDN
# scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # Your custom url
tagMode: false # Whether only to replace live2d tag instead of inject to all pages
log: false # Whether to show logs in console
model:
use: live2d-widget-model-wanko # npm-module package name
# use: wanko # folder name in (hexo base dir)/live2d_models/
# use: ./wives/wanko # folder path relative to hexo base dir
# use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # Your custom url
  • 3.安装tororo模型
1
npm install live2d-widget-model-tororo

其他支持的模型列表:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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

模型效果可以在这里看到,选择自己喜欢的npm就行

  • 4.下载完之后,在Hexo根目录中新建文件夹live2d_models,然后在node_modules文件夹中找到刚刚下载的live2d模型,将其复制到live2d_models中,然后编辑配置文件中的model.use项,将其修改为live2d_models文件夹中的模型文件夹名称。

  • 5.大功告成

遗憾

是只小白猫,想要一只小黄猫,可惜不会修改live2d的模型,哈哈,还是算了,本来还有一只小黑猫hijiki供选择,但是不喜欢,就这样吧,这次就记录到这里

文章作者: zhao
文章链接: https://blog.beno1.top/2020/03/25/live2d-for-blog/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 微笑向阳

评论