live2d-widget 组件使用指南
前言
最近正在做学校实训的项目，在进行前端优化工作的时候，突发奇想想给网页端加一点二次元元素，想着来个看板娘好像挺不错的，遂在网上搜，发现了这个组件，Live2d-widght
刚开始使用的时候发现非常简单，觉得十分不错，但是想要更加契合自己网页做个性化修改的时候发现github中的使用文档写的比较含糊不清，网上也没有很多相关的资料参考，遂把自己琢磨过的结果整理成文档。
包括：个性化对话，添加工具接入大语言模型，vue中实现某些界面隐藏，更多配置。
本文章建立在使用vue3+vite构建的项目上，若为其他类型的项目，可能需要稍作修改。
简单使用
非常适合简单，如果只是接入博客网页，只需要加一行代码就行，甚至不需要做任何的下载操作。
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
加在哪都可以，body，head。因为是全局使用。
初步扩展
若是想要做简单的修改，可以clone下仓库后，将如下的五个文件复制到项目的/public/live2d-widget文件夹下。
下面简单介绍一下我们需要关注的文件。
waifu.css 看板娘的样式文件，大部分情况下不需要修改。
autoload.js 看板娘的加载文件。
waifu-tips.js 看板娘的打包配置文件，在需要深度修改时需要进行修改。
waifu-tips.json 看板娘的对话逻辑，可以自定义对话。
看板娘对话自定义
对话自定义的修改主要集中在waifu-tips.json文件中。
如下面这段
"mouseover": [{
"selector": "#live2d",
"text": ["干嘛呢你，快把手拿开～～", "鼠…鼠标放错地方了！", "你要干嘛呀？", "喵喵喵？", "怕怕(ノ≧∇≦)ノ", "非礼呀！救命！", "这样的话，只能使用武力了！", "我要生气了哦", "不要动手动脚的！", "真…真的是不知羞耻！", "Hentai！"]
}
“mouseover” 是事件，可以有"mouseover"(鼠标滑过), “click”(鼠标点击), “seasons”(特定时间) , “time”(一天中的时间段，在进入页面主页时调用) , “message”(其他)
“selector” 是选择器，类似css中的样式名，可以使用 “#a” , ".a"等。
“text” 是触发时显示的文本，随机显示。文本可以显示html文本。
其他的看看应该很好懂。主要看看下面这段：
"message": {
"default": ["好久不见，日子过得好快呢……", "大坏蛋！你都多久没理人家了呀，嘤嘤嘤～", "嗨～快来逗我玩吧！", "拿小拳拳锤你胸口！", "记得把小家加入收藏夹哦！"],
"console": "哈哈，你打开了控制台，是想要看看我的小秘密吗？",
"copy": "你都复制了些什么呀，转载要记得加上出处哦！",
"visibilitychange": "哇，你终于回来了～"
}
“default”： 默认随机显示的文本。会在浏览页面的时候随机出现。
“console”：打开控制台时触发
“copy”：复制文本时触发
“visibilitychange”：切屏时触发。
看板娘简单自定义
这部分主要集中在修改 autoload.js 文件
autoload.js中
if (screen.width >= 768) {
Promise.all([
loadExternalResource(live2d_path + "waifu.css", "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js")
]).then(() => {
// 配置选项的具体用法见 README.md
initWidget({
waifuPath: live2d_path + "waifu-tips.json",
//apiPath: "https://live2d.fghrsh.net/api/",
cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/",
tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
});
});
}
这个判断语句是判断看板娘的加载条件，可以自行修改。
最下面的tools是显示的工具图标，可以自行修改。如果有不需要的工具，可以删除，同样的，如果新增了工具，也需要在这里标注出来。
看板娘深度自定义
如果需要自定义工具，新增工具，调整动画效果和各种逻辑等更为复杂的操作，则需要clone下所有的仓库代码，如图所示。
因为很多逻辑都封装在waifu-tips.js中，所以需要对/src文件中的文件进行修改。
以下简述一下我在新增大语言模型问答工具的修改路径。
①在/src/tool.js 中新增函数实现大模型调用。
function askQwenTurbo() {
const question = prompt("哪里不理解呢？");
if (question) {
fetch(`http://localhost:8080/girl-keyword-explain?userInput=${question}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' }
})
.then(response => response.text())
.then(content => {
showMessage(content, 8000, 9);
})
.catch(error => {
console.error('Error:', error);
showMessage("啊……现在不太想回答问题呢……待会再问我试试看吧~", 4000, 9);
});
}
}
②在 const tools[]中 新增该工具，找到对应的icon（icon可以登陆对应的icon库找）
const tools = {
"ask-qwen": {
icon: fa_question_circle,
callback: askQwenTurbo
},
}
③通过命令打包src中的代码，导出成waifu-tips.js
命令行输入
npm run build
④把新生成的waifu-tips.js替换根目录中的同名文件。
⑤在autoload.js中的tools中加入定义的工具名。
大功告成！
看板娘部分页面隐藏。
因为我开发的网站有一些界面我并不想要显示看板娘，所以想要实现其在部分页面隐藏的功能。但是看板娘在vue3+vite的框架中，只要导入就是全局导入，所以只在对应界面的vue文件中是不可行的，需要使用路由守卫的功能。以下是一个简单的实例。
//main.ts
router.beforeEach((to, from, next) => {
const waifuElement = document.getElementById('waifu');
if (waifuElement) {
if (to.path === '/main') {
waifuElement.style.display = 'none';
}
}
next();
// 检查是否从 '/main' 路由跳转到其他路由
if (from.path === '/main' && to.path !== '/main') {
window.location.assign(to.fullPath); // 使用 window.location.assign 以保留历史记录
} else {
next(); // 继续路由跳转
}
});
简单来说，就是如果检测到特定路径，隐藏看板娘的元素。从特定路径出去后，再强制刷新。
其他你可能关注的地方
在 /src 中，utils.js, waifu-tips.js, message.js 大概率不需要动。
utils.js 定义了随机选择的方法， waifu-tips.js 定义了打包的入口，message.js 中定义了消息显示的逻辑。
model.js 中定义了模型切换相关的逻辑，在我的开发过程中并没有做更改。
index.js 定义了许多具体操作，比如，工具在网页中的名称为 “waifu-tool-{工具名}”，所以如果需要在waifu-tips.json中新增相关对话的话，需要注意。
其他的代码并不难懂，也有相关注释，读者可以自行阅读。
