【源码】基于 JavaScript 和 HTML 的 Live2D 看板娘插件

项目简介

本项目是一个基于 JavaScript 和 HTML 的 Live2D 看板娘插件，能轻松在网页中添加 Live2D 看板娘，增强用户与网页的交互体验。同时，该插件兼容 PJAX，支持无刷新加载。

项目的主要特性和功能

1. 便捷集成：在 HTML 页面的 head 或 body 中添加一行代码，即可快速加载看板娘，适配不同网站构建方式。
2. 高度可配置：提供丰富配置选项，如看板娘资源路径、API 路径、CDN 路径、加载的小工具按钮等，满足多样化需求。
3. 自定义灵活：可对按钮和对话框逻辑、触发条件和显示文字、看板娘样式表等进行自定义修改，适配不同网页。
4. PJAX 兼容：支持 PJAX，实现无刷新加载，避免看板娘在页面切换时重复刷新。
5. 多方式部署：支持通过 CDN 加载，也可将文件直接部署在服务器上使用。

安装使用步骤

基础使用

若只需最基础的功能，将以下代码加入 HTML 页面的 head 或 body 中即可加载看板娘： ```xml

``` 添加代码的位置取决于网站的构建方式。若网站启用了 PJAX，需将该脚本放到 PJAX 刷新区域之外。

自定义配置

若想自己配置，可对照 autoload.js 的源码查看可选的配置项目。autoload.js 会自动加载 waifu.css、live2d.min.js 和 waifu-tips.js，waifu-tips.js 中的 initWidget 函数是加载看板娘的主函数，接收一个 Object 类型的参数作为配置，具体配置选项如下： | 选项 | 类型 | 默认值 | 说明 | | - | - | - | - | | waifuPath | string | https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/waifu-tips.json | 看板娘资源路径，可自行修改 | | apiPath | string | https://live2d.fghrsh.net/api/ | API 路径，可选参数 | | cdnPath | string | https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/ | CDN 路径，可选参数 | | tools | string[] | 见 autoload.js | 加载的小工具按钮，可选参数 |

其中，apiPath 和 cdnPath 两个参数设置其中一项即可。

本地开发测试环境部署

若要在本地部署开发测试环境，需要安装 Node.js 和 npm，然后执行以下命令： bash npm install npm run build

部署上线

使用 CDN

自定义内容时，可 Fork 本仓库，将修改后的内容通过 git push 到自己的仓库中，使用方法变为： ```xml

```

自行托管

可以直接把文件放到服务器上，根据主机情况选择不同的上传方式： - 能通过 ssh 连接主机，复制 Fork 并修改后的代码仓库到服务器。 - 主机无法用 ssh 连接，在本地修改好代码后，通过 ftp 等方式将文件上传到主机的网站目录下。 - 若通过 Hexo 等工具部署静态博客，将项目代码放在博客源文件目录下，重新部署博客时相关文件会自动上传，可能需设置 skip_render。

上传后，确认能正常通过浏览器打开 autoload.js 和 live2d.min.js 等文件且内容完整正确，然后修改 autoload.js 中的常量 live2d_path 为 live2d-widget 目录的 URL，最后在要添加看板娘的界面加入对应路径的 autoload.js 脚本即可加载。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】