【Hugo】Live2d-widget 给博客引入萌萌的看板娘

1. 基础引入

【Live2d-widget文档】
（1）查看官方文档，引入对应的js脚本到layouts\partials\footer\custom.html中(详情看引入音乐播放器的文章)

1
2


<!-- 【custom.html】 -->
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

（2）成功在左下角引入了live2d看板娘

2. 自定义适配

注释

看板娘是已经引入好了，但是显示在左下角，跟我当前的主题非常的不搭，需要对看板娘进行自定义，来适配主题

2.1 抽离autoload.js

(1) 前往【Live2d-widget文档】，把 waifu-tips.json 和 waifu.css下载，并放到assets/waifu文件夹中(自己新建)

(2) 把之前引入的 autoload.js 删掉，把下面代码引入到 custom.html 中

 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>

2.2 调整css样式

(1) 修改assets/waifu/waifu.css，将看板娘移动到右侧，更加适配Stack主题

 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;
}

(2) 这样看板娘就成功移动到右下角了

2.3 调整看板娘提示语

(1) 修改assets/waifu/waifu-tips.json，修改里面的css选择器，来适配页面内容元素，这边以复制按钮为例
(2) 查看复制按钮的元素，属性为class="copyCodeButton"

(3) 修改assets/waifu/waifu-tips.json，新增or修改对应的文本，修改对应的css选择器

(4) 这样当我们鼠标移动到对应的元素之后，看板娘就会有对应的提示语

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

(5) github新建一个公有(public)仓库，将代码上传到仓库上，打标签(Tags)并发布(Releases)一个版本

(6) 修改layouts/partials/footer/custom.html文件中的cdnPath

 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>

(7) 这样就成功通过cdn的形式引入自己的live2d模型文件

2.4.2 bug修复

信息

如果你 model_list.json 中的 live2d模型分组 只有一组的时候，会存在bug，导致加载不出模型，需要进行修复

(1) 前往【Live2d-widget】，下载 waifu-tips.js，并放到assets/waifu文件夹下，修改 custom.html 来引入

 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>

(2) 修改 waifu-tips.js 文件，全局搜索e=1,o=53，将内容改为e=0,o=0，这两个值是默认模型和默认皮肤，所以一旦模型分组小于2的时候，就会找不到模型(代码顺序从0开始数)

(3) 打开浏览器，按F12打开控制台，清理 localStorage(本地存储) 中的数据

(4) 这样加载模型默认加载第0个模型，bug就修复了

3 优化

3.1 多皮肤切换修复

（1）某些模型是具有多皮肤的(例如22, 33之类的)，但切换皮肤按钮不生效，是因为cdn形式引入是不适配皮肤切换的
（2）这边对cdn引入方式的皮肤切换功能做了适配，下载我修改过的 live2d.min.js ，放到assets/waifu下，通过本地的形式引入
- live2d.min.js（Ctrl+S保存）

 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>

(3) 这样就能切换这些看板娘的皮肤了

3.2 拖拽看板娘

(1) 有时候看板娘在右下角可能有点碍事，阻碍到我们点击一些页面内容，给看板娘添加拖拽功能，将她拖走
(2) 将下面的代码复制进layouts\partials\footer\custom.html

 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>

(3) 这样就可以随意拖拽看板娘了（如果是没有腿的模型，建议把y轴移动的代码注释掉）