一、添加

从GitHub上下载张书樵大佬的live2d-widget ,保存到 ./themes/next/source 文件夹下,也可以直接在博客文件夹执行

1
$ git clone https://github.com/stevenjoezhang/live2d-widget.git themes/next/source/live2d-widget

打开其中的 autoload.js 文件,将第一行

1
const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";

注释掉,将

1
//const live2d_path = "/live2d-widget/";

取消注释。

查找 apiPath ,将其取消注释,并将 cdnPath 一行注释掉

主题配置文件添加

1
2
3
# live2d
live2d:
enable: true

./themes/next/layout/_layout.swig 文件的 <head> 标签内添加

1
2
3
4
<!--看板娘-->
{% if theme.live2d.enable %}
<script src="/live2d-widget/autoload.js"></script>
{% endif %}

二、修改配置

1. 移到右侧

默认是在左侧,如果想要移到右侧,可以点击 右侧配置css 保存到本地 ./themes/next/source/live2d-widget 文件夹下,并将原来的 waifu.css 重命名为 waifu-left.css

autoload.js 文件中查找 waifu.css ,修改为 waifu-right.css 即可。

2. 修改其他的一些配置

张书樵大佬的配置本身已经不错了,但是有一些个人觉得不太好,于是稍作修改

1)修改默认模型和材质

waifu-tips.js 文件中找到以下内容

1
2
3
4
5
if (modelId === null) {
// 首次访问加载 指定模型 的 指定材质
modelId = 1; // 模型 ID
modelTexturesId = 53; // 材质 ID
}

修改编号为自己喜欢的模型和材质

2)删去”一言“的“来自”信息

因为这一句的显示很迷惑,连续点击几次“一言”按钮“来自”信息才慢慢出现,与前面的”一言“不匹配。

waifu-tips.js 文件中查找以下内容

1
2
3
4
5
6
7
8
9
10
// 增加 hitokoto.cn 的 API
fetch("https://v1.hitokoto.cn")
.then(response => response.json())
.then(result => {
let text = `这句一言来自 <span>「${result.from}」</span>,是 <span>${result.creator}</span> 在 hitokoto.cn 投稿的。`;
showMessage(result.hitokoto, 6000, 9);
setTimeout(() => {
showMessage(text, 4000, 9);
}, 6000);
});

将其中第5 7 8 9 行注释掉,如下

1
2
3
4
5
6
7
8
9
10
// 增加 hitokoto.cn 的 API
fetch("https://v1.hitokoto.cn")
.then(response => response.json())
.then(result => {
//let text = `这句一言来自 <span>「${result.from}」</span>,是 <span>${result.creator}</span> 在 hitokoto.cn 投稿的。`;
showMessage(result.hitokoto, 6000, 9);
//setTimeout(() => {
// showMessage(text, 4000, 9);
//}, 6000);
});

最终效果与本站相同