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

TODO：bilibili视频（不摸的话）

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 自定义模型

(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模型文件