可爱小人

给你的⽹站加⼀个2.5D悬浮⼩⼈

live2d-widget-model-chito

live2d-widget-model-chito

我们平常访问某些⽹站的时候,会发现在⽹站上总是悬浮者⼀个可爱的⼩⼈.⽽且还可以跟⽤户进⾏各种互动(说话?).

⼀般这种⼩⼈都是通过js加载出来的,搜索关键词⽹上有教程.不过我今天在这⾥记录的是,如何添加2.5D互动⼩⼈

平台:hexo+hexo-plugins(live2d-widget-models)

同时也⽀持jekyll,wordpress,etc.

安装

sudonpminstall--savehexo-helper-live2d

项⽬github地址

然后在_(hexo或者主题的都⾏)中添加

live2d:

enable:true

scriptFrom:local

model:

u:live2d-widget-model-wanko//使⽤的模型名,下⾯会详细讲

display://如果觉得默认定位不满意可在此微调,bottom

position:right

width:150

height:300

bottom:-30

mobile:

show:true

⾃定义模型的使⽤点我

hexo下现有模型的安装

npminstall{packagename}

安装⽰例

sudonpminstalllive2d-widget-model-chito

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

OK,这是重点[哭笑不得],

现实效果是会动的,由于截gif过于⿇烦,我就只好截屏了.现实效果绝对⽐这帅.

live2d-widget-model-chito

live2d-widget-model-chito

live2d-widget-model-chito

唔,这是⼀个美少年.⽐较适合⼥⽣.我就不⽤这个了.

live2d-widget-model-epsilon2_1

live2d-widget-model-epsilon2_1

live2d-widget-model-epsilon2_1

⼀个夏装妹⼦,⽐较适合宅男

live2d-widget-model-gf

live2d-widget-model-gf

live2d-widget-model-gf

⼀个卡通⼈物(废话),很炫酷

live2d-widget-model-haru

这个模型需要两点注意,

1.它的安装⽅式是

npminstalllive2d-widget-model-haru

模型的使⽤却是

u:live2d-widget-model-haru/01或者

u:live2d-widget-model-haru/02

这是因为他这个出则无敌国外患者的上一句 包⾥有两个模型的原因

2.它在⼦模型下的json⽂件是空的,

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

ru/live2d-widget-model-haru/01

live2d-widget-model-haru/01

live2d-widget-model-haru/01

ru/live2d-widget-model-haru/02

live2d-widget-model-haru/02

live2d-widget-model-haru/02

live2d-widget-model-haruto

live2d-widget-model-haruto

live2d-widget-model-haruto

live2d-widget-model-hibiki

live2d-widget-model-hibiki

live2d-widget-model-hibiki

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

live2d-widget-model-izumi

live2d-widget-mo文化维度理论 del-izumi

live2d-widget-model-izumi

live2d-widget-model-koharu

live2d-widget-model-koharu

live2d-widget-model-koharu

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

live2d-widget-model-miku

live2d-widget-model-miku

live2d-widget-model-miku

live2d-widget-model-ni-j

live2d-落叶知秋的意思 widget-model-ni-j

live2d-widget-model-ni-j

live2d-widget-model-nico

live2d-widget-model-nico

live2d-widget-model-nico

live2d-widget-model-nietzsche

live2d-widget-model-nietzsche

live2d-widget-model-nietzsche

live2d-widget-model-nipsilon

live2d-widget-model-nipsilon

live2d-widget-mode宠物壁纸 l-nipsilon

live2d-widget-model-nito

live2d-widget-model-nito

live2d-widget-model-nito

live2d-widget-model-shizuku

live2d-widget-model-sh丝袜的由来 izuku婚礼对联

live2d-widget-model-shizuku

live2d-widget-model-tororo

live2d-widget-model-tororo

live2d-widget-model-tororo

live2d-widget-model-tsumiki

live2d-widget-model-tsumiki

live2d-widget-model-tsumiki

live2d-widget-model-unitychan

live2d-widget-model-unityc白果的食用方法 han

live2d-widget-model-unitychan

live2d-widget-model-wanko

live2d-widget-model-wanko

live2d-widget-model-wanko

live2d-widget-model-z16

live2d-widget-model-z16

live2d-widget-model-z16

总结

mobile的值决定了在⼿机端是否显⽰

由于显⽰会影响阅读,我这⼉设为fal