给你的网站加一个2.5D悬浮小人

live2d-widget-model-chitose

我们平常访问某些网站的时候,会发现在网站上总是悬浮者一个可爱的小人.而且还可以跟用户进行各种互动(说话?).
一般这种小人都是通过js加载出来的, 搜索关键词网上有教程. 不过我今天在这里记录的是,如何添加2.5D互动小人

平台: hexo + hexo-plugins(live2d-widget-models)
同时也支持jekyll, wordpress, etc.

安装

sudo npm install --save hexo-helper-live2d

项目github地址

https://github.com/xiazeyu/live2d-widget-models

然后在_config.yml(hexo或者主题的都行)中添加

live2d:
  enable: true
  scriptFrom: local
  model:
    use: live2d-widget-model-wanko //使用的模型名,下面会详细讲
  display: //如果觉得默认定位不满意可在此微调,bottom
    position: right
    width: 150
    height: 300
    bottom:-30
  mobile:
    show: true

自定义模型的使用点我

hexo下现有模型的安装

npm install {packagename}

安装示例

sudo npm install live2d-widget-model-chitose

最新版现有模型测试与预览

OK, 这是重点[哭笑不得],
现实效果是会动的, 由于截gif过于麻烦, 我就只好截屏了. 现实效果绝对比这帅.

live2d-widget-model-chitose

live2d-widget-model-chitose

唔, 这是一个美少年. 比较适合女生. 我就不用这个了.

live2d-widget-model-epsilon2_1

live2d-widget-model-epsilon2_1

一个夏装妹子, 比较适合宅男

live2d-widget-model-gf

live2d-widget-model-gf

一个卡通人物(废话), 很炫酷

live2d-widget-model-haru

这个模型需要两点注意,

1. 它的安装方式是

npm install live2d-widget-model-haru

模型的使用却是
use: live2d-widget-model-haru/01 或者
use: live2d-widget-model-haru/02
这是因为他这个包里有两个模型的原因

2. 它在子模型下的json文件是空的,

所以你要将/博客路径/node_modules/live2d-widget-model-haru/package.json复制进01, 02 文件夹.

live2d-widget-model-haru/01

live2d-widget-model-haru/01

live2d-widget-model-haru/02

live2d-widget-model-haru/02

live2d-widget-model-haruto

live2d-widget-model-haruto

live2d-widget-model-hibiki

live2d-widget-model-hibiki

吐槽一句, 这位同学太高了,已经把我电脑屏幕高快全占了

live2d-widget-model-izumi

live2d-widget-model-izumi

live2d-widget-model-koharu

live2d-widget-model-koharu

是不是有些熟悉? 这妹妹跟haruto是情侣啊!

live2d-widget-model-miku

live2d-widget-model-miku

live2d-widget-model-ni-j

live2d-widget-model-ni-j

live2d-widget-model-nico

live2d-widget-model-nico

live2d-widget-model-nietzsche

live2d-widget-model-nietzsche

live2d-widget-model-nipsilon

live2d-widget-model-nipsilon

live2d-widget-model-nito

live2d-widget-model-nito

live2d-widget-model-shizuku

live2d-widget-model-shizuku

live2d-widget-model-tororo

live2d-widget-model-tororo

live2d-widget-model-tsumiki

live2d-widget-model-tsumiki

live2d-widget-model-unitychan

live2d-widget-model-unitychan

live2d-widget-model-wanko

live2d-widget-model-wanko

live2d-widget-model-z16

live2d-widget-model-z16

总结

我把官网所有的模型都装了一次, 最后发现一个规律, 那就是模型妹子偏多. 看来技术宅喜欢动漫少女的说法基本正确. 由于我装了一个多小时的模型, 已经对此有些反感了, 所以就保留最后一个不换了. 想看效果的可以电脑端访问https://www.thinkmoon.cn 看效果

mobile 的值决定了在手机端是否显示

由于显示会影响阅读,我这儿设为false