在网页上加入live2d

RandomEnch2022-05-252024-07-18

项目地址

我的Fork: https://github.com/RandomEnch/live2d-widget
原地址: https://github.com/stevenjoezhang/live2d-widget
修改于: https://github.com/fghrsh/live2d_demo
API: https://github.com/fghrsh/live2d_api

特点

在网页中添加 Live2D 看板娘。兼容 PJAX，支持无刷新加载。
警告：本项目使用了大量 ES6 语法，不支持 IE 11 等老旧浏览器。

示例

在PC端博客的右下角可查看效果。

依赖

插件需要 Font Awesome 图标支持，请确保相关样式表已在页面中加载。以 Font Awesome v6 为例，请在 <head> 中导入 all.min.css 。
建议保存到本地后导入

1	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/RandomEnch/live2d-widget/all.min.css">

使用

将这一行代码加入<head>或<body>，即可展现出效果：

1	<script src="https://cdn.jsdelivr.net/gh/RandomEnch/live2d-widget/autoload.js"></script>

如果网站启用了 PJAX，由于看板娘不必每页刷新，因此要注意将相关脚本放到 PJAX 刷新区域之外。

换句话说，如果你是小白，或者只需要最基础的功能，就只用把这一行代码，连同前面加载 Font Awesome 的一行代码，一起放到 html 的 <head> 中即可。
对于用各种模版引擎（例如 Nunjucks，Jinja 或者 PHP）生成的页面，也要自行修改，方法类似，只是可能略为麻烦。

但是！我们强烈推荐自己进行配置，否则很多功能是不完整的，并且可能产生问题！
如果你有兴趣自己折腾的话，请看下面的详细说明。

自定义配置

原来的项目使用了jsdeliver，而此处使用的是我自己构建的版本。
如果想自己修改使用，请自行clone原项目仓库。

1	git clone https://github.com/stevenjoezhang/live2d-widget.git

原项目部分内容已失效，如不想更改，可clone我的fork仓库。

1	git clone https://github.com/RandomEnch/live2d-widget.git

修改

修改autoload.js第34行后部分为：

initWidget({
	waifuPath: live2d_path + "waifu-tips.json",
	apiPath: "你的自建api地址(可本地，可链接)",
	// 或者直接使用CDN的api
	//cdnPath: "https://npm.elemecdn.com/akilar-live2dapi@latest/"
});

API

initWidget 方法接受名为 apiPath 和 cdnPath 的参数，两者设置其中一项即可。其中 apiPath 为后端 API 的 URL，可以自行搭建，并增加模型。

1	git clone https://github.com/fghrsh/live2d_demo.git

将api放在网站目录中即可本地引用api，autoload.js格式为：

initWidget({
	waifuPath: live2d_path + "waifu-tips.json",
	apiPath: "/live2d_demo/",
	//cdnPath: "https://npm.elemecdn.com/akilar-live2dapi@latest/"
});