为网站加上live2d看板娘

为网站加上live2d看板娘

上一篇我记录了怎么使用hexo+next搭建GitHub的个人网站,飞机票

下载hexo-helper-live2d

github地址
这是官网效果
好了虽然上面已经给出官网地址
但是还是给你讲解一下
打开dos命令 切换到你博客目录执行
npm install --save hexo-helper-live2d
安装完了之后打开package.json会看到你的model
hexo-helper-live2d
之后下载各种动画model
https://github.com/xiazeyu/live2d-widget-models.git
我喜欢这样下载,在dos命令行切换到要下载的地方
git clone https://github.com/xiazeyu/live2d-widget-models.git
把packages文件夹下的所有文件复制到node_modules下
live2d-windget
之后在博客的配置文件中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# Live2D
## https://github.com/EYHN/hexo-helper-live2d

live2d:
enable: true #是否开启
scriptFrom: local #默认
pluginRootPath: live2dw/ #插件的站点上的根目录(相对路径)
pluginJsPath: lib/ #脚本文件的相对与插件跟目录路径
pluginModelPath: assets/ #模型文件对插件跟目录路径
# scriptFrom: jsdelivr # jsdelivr CDN
# jsdelivr CDN # unpkg CDN
# scriptFrom: unpkg
# unpkg CDN
# scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url

tagMode: false #标签模式,是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
#scale: 1
#hHeadPos: 0.5
#vHeadPos: 0.618
use: live2d-widget-model-haru

#live2d-widget-model-shizuku
#live2d-widget-model-haru

# npm-module package name

# use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
# 你的自定义 url
display:
#superSample: 2
position: right
width: 150
height: 300
#hOffset: 0
#vOffset: -20
mobile:
show: true
#scale: 0.5
#react:
#opacityDefault: 0.7
#opacityOnHover: 0.2

完了之后就

1
2
hexo g
hexo d

部署
haru

看板娘终极进化,可换装

参考
下载静态资源包https://github.com/stevenjoezhang/live2d-widget
解压复制文件夹到\themes\next\source下,并到目录下打开autoload.js修改live2d_path,为你命名的目录const live2d_path = "/live2d-widget-master/";
/themes/next/layout/_layout.swing文件下加入
<script src="/live2d-widget-master/autoload.js"></script>
修改waifu-tips.js中

1
2
3
4
5
$.ajax({
url: "/live2d-widget-master/asteroids.js",
dataType: "script",
cache: true
});

把原来链接中的js保存到本地,

如果本文对您有所帮助,请打赏给我吧,我先送个你也红包往下看,你可以把扫到红包打赏个我哦!
红包

本文标题:为网站加上live2d看板娘

文章作者:範範

发布时间:2019年08月14日 - 13:08

最后更新:2019年09月11日 - 15:09

原始链接:https://trhsy.github.io/live2d.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------The End-------------
範範 wechat
欢迎关注微信公众号,孬蛋等着你!
坚持原创技术分享,您的支持将鼓励我继续创作!