live2D看板娘,基于 live2d-widget 修改,专为自己博客使用,如果您有需要,也可以下载使用。
适应 hexo-theme-butterfly 主题,添加了B站图标,修改自定义内容。
在 <head>
中加入下面代码,因为需要Font Awesome v6支持,请确保相关样式表已在页面中加载,否则无法正常显示,如果网页中已经加载了 Font Awesome,就不要重复加载了。
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.1.1/css/fontawesome.min.css">
然后将这一行代码加入 <head>
或 <body>
,即可展现出效果:
<script src="https://npm.elemecdn.com/sarakale-live2dwidget@latest/autoload.js"></script>
一般在主题的"layout/_layout.swig"中修改,我是使用了hexo-theme-butterfly这个主题,所以要在 butterfly/_config.yml
文件的Inject
处添加,注意空格缩进:
inject:
head:
- <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.1.1/css/fontawesome.min.css">
bottom:
- <script src="https://npm.elemecdn.com/sarakale-live2dwidget@latest/autoload.js"></script>
最后在博客根目录下打开_config.yml
添加下面:
live2d:
enable: true
waifu-tips.js
是live2d主要文件,如果对javescript不熟悉建议不要贸然修改。waifu-tips.json
是显示的对话文字,可以修改为自己想要设定的内容。waifu.css
是看板娘的样式表,如要修改样式可在这里修改。
适应 hexo-theme-butterfly,如果是其他主题,可能需要自行相应修改。
waifu-tips.js
第17行到27行之间可以修改图标样式名,我这里删除了原来的fa-paper-plane,因为不需要这类所以改成了B站,也可以自行增添。
在59行修改为你的B站地址:
document.querySelector("#waifu-tool .fa-bilibili").addEventListener("click", () => {
open("改成你的B站地址");
});
第166行可以修改模型ID,ID的数字具体打开浏览器按F12看控制台输出的报告,或者可以看模型预览
// 首次访问加载指定模型和指定材质
modelId = 1; // 模型 ID
modelTexturesId = 0; // 材质 ID
waifu-tips.json
是触发的对话文字内容,可以修改自己设定的文字和你主题的样式图标,每对话中间要有逗号(英文状态下)隔开。
waifu.css
是看板娘的样式表,如果自己有CSS基础,可以自行修改,我这里新增了butterfly主题夜间模式适应。
也可以自己自定义内容,上传到自己的服务器,可以把当前仓库克隆下载,然后进行修改。
克隆仓库
git clone https://github.com/SaraKale/live2d-widget.git
然后别忘了在 autoload.js
修改live2d_path地址
const live2d_path = "https://fastly.jsdelivr.net/gh/username/live2d-widget@latest/";
将 username
替换为你的 GitHub 用户名即可。
也别忘了在<head>
或 <body>
加载autoload.js文件
<script src="https://fastly.jsdelivr.net/gh/username/live2d-widget@latest/autoload.js"></script>
在我的博客可以查看效果。
更多内容可以参考:
https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02
https://github.com/xiazeyu/live2d-widget.js
https://github.com/summerscar/live2dDemo
还可以自行搭建后端 API,并增加模型(需要修改的内容比较多,此处不再赘述):
https://github.com/fghrsh/live2d_api
https://github.com/xiazeyu/live2d-widget-models
https://github.com/xiaoski/live2d_models_collection