一、添加

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

最终效果与本站相同