1. 基础引入
1
2
| <!-- 【custom.html】 -->
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
|
Copy
2. 自定义适配
看板娘是已经引入好了，但是显示在左下角，跟我当前的主题非常的不搭，需要对看板娘进行自定义，来适配主题
2.1 抽离autoload.js
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
44
45
| <!-- 【custom.html】 -->
<script>
// 获取博客本地资源地址
const cssPath = {{ (resources.Get "waifu/waifu.css").Permalink }}
const tipsJsonPath = {{ (resources.Get "waifu/waifu-tips.json").Permalink }}
// live2d_path 参数建议使用绝对路径
const live2d_path = "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
// 封装异步加载资源的方法
function loadExternalResource(url, type) {
return new Promise((resolve, reject) => {
let tag;
if (type === "css") {
tag = document.createElement("link");
tag.rel = "stylesheet";
tag.href = url;
}
else if (type === "js") {
tag = document.createElement("script");
tag.src = url;
}
if (tag) {
tag.onload = () => resolve(url);
tag.onerror = () => reject(url);
document.head.appendChild(tag);
}
});
}
// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
Promise.all([
loadExternalResource(cssPath, "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js")
]).then(() => {
// 配置选项的具体用法见 README.md
initWidget({
waifuPath: tipsJsonPath,
cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/",
tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
});
});
}
</script>
|
Copy
2.2 调整css样式
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
| /* 【waifu.css】 */
#waifu-toggle {
...
/* left: 0; */
right: 0;
/* margin-left: -100px; */
margin-right: -90px;
/* writing-mode: vertical-rl; */
writing-mode: vertical-lr;
}
#waifu-toggle.waifu-toggle-active {
/* margin-left: -50px; */
margin-right: -40px;
}
#waifu-toggle.waifu-toggle-active:hover {
/* margin-left: -30px; */
margin-right: -20px;
}
#waifu {
...
/* left: 0; */
right: 10px;
}
#waifu-tool {
...
/* right: -10px; */
margin-left: 260px;
}
|
Copy
2.3 调整看板娘提示语
2.4 自定义模型
2.4.1 引入cdn
(1) 前往【live2d_api】，下载代码，这仓库中的文件就是 live2d-widget 的所使用的模型
(2) 修改model_list.json文件，来添加or删除live2d模型（若有属于自己的live2d模型，请将模型放到model文件夹下）
(3) 引入live2d文件可以本地引入(具体看音乐播放器文章)，这次演示用cdn的形式引入，cdn使用的是【jsDelivr】
(4) cdn引入不需要php文件，将多余的php文件删掉，只保留 model 和 model_list.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script>
...
if (screen.width >= 768) {
Promise.all([
...
]).then(() => {
initWidget({
...
// 有文件夹就在后面拼文件夹路径
cdnPath: "https://cdn.jsdelivr.net/gh/{用户名}/{仓库名}@{标签名}/",
...
});
});
}
</script>
|
Copy
2.4.2 bug修复
如果你 model_list.json 中的 live2d模型分组 只有一组的时候，会存在bug，导致加载不出模型，需要进行修复
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!-- 【custom.html】 -->
<script>
...
const tipsJsPath = {{ (resources.Get "waifu/waifu-tips.js").Permalink }}
...
if (screen.width >= 768) {
Promise.all([
...
loadExternalResource(live2dJsPath, "js")
]).then(() => {
...
});
}
</script>
|
Copy
3 优化
3.1 多皮肤切换修复
（1）某些模型是具有多皮肤的(例如22, 33之类的)，但切换皮肤按钮不生效，是因为cdn形式引入是不适配皮肤切换的
（2）这边对cdn引入方式的皮肤切换功能做了适配，下载我修改过的 live2d.min.js ，放到assets/waifu下，通过本地的形式引入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!-- 【custom.html】 -->
<script>
...
const live2dJsPath = {{ (resources.Get "waifu/live2d.min.js").Permalink }}
...
if (screen.width >= 768) {
Promise.all([
...
loadExternalResource(live2dJsPath, "js"),
...
]).then(() => {
...
});
}
</script>
|
Copy
3.2 拖拽看板娘
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| <!-- 【custom.html】 -->
<script>
...
if (screen.width >= 768) {
Promise.all([
...
]).then(() => {
...
// 初始化看板娘鼠标监听事件
initWaifuMouseEvent();
});
}
function initWaifuMouseEvent() {
const waifu = document.getElementById("waifu");
let isDown = false;
let waifuLeft;
let mouseLeft;
let waifuTop;
let mouseTop;
// 鼠标点击监听
waifu.onmousedown = function (e) {
isDown = true;
// 记录x轴
waifuLeft = waifu.offsetLeft;
mouseLeft = e.clientX;
// 记录y轴
waifuTop = waifu.offsetTop;
mouseTop = e.clientY;
}
// 鼠标移动监听
window.onmousemove = function (e) {
if (!isDown) {
return;
}
// x轴移动
let currentLeft = waifuLeft + (e.clientX - mouseLeft);
if (currentLeft < 0) {
currentLeft = 0;
} else if (currentLeft > window.innerWidth - 300) {
currentLeft = window.innerWidth - 300;
}
waifu.style.left = currentLeft + "px";
// y轴移动
let currentTop = waifuTop + (e.clientY - mouseTop);
if (currentTop < 30) {
currentTop = 30
} else if (currentTop > window.innerHeight - 290) {
currentTop = window.innerHeight - 290
}
waifu.style.top = currentTop + "px";
}
// 鼠标点击松开监听
window.onmouseup = function (e) {
isDown = false;
}
}
</script>
|
Copy
