给网站添加live2d看板娘
给网站添加live2d看板娘
参考文献：
- stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform
- Eikanya/Live2d-model: Live2d model collection
- zenghongtu/live2d-model-assets
前言
网站环境如下，文章也主要记录在这个环境下的配置过程。
- wordpress搭建
- Sakurairo主题
网站引入看板娘需要两个东西：
-
live2d组件：stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform -
live2d模型：- Eikanya/Live2d-model: Live2d model collection
- zenghongtu/live2d-model-assets
引入看板娘
引入方式有两种，一种是将资源放在网上通过网络引入，第二种是将资源放在本地。
网络引入
最简单的方式是一行代码：
<script src="https://fastly.jsdelivr.net/npm/live2d-widgets@1.0.0-rc.4/dist/autoload.js"></script>
官方教程提示需要放在html 页面的 head 或 body 中。经测试在Sakurairo主题中在iro主题设置->全局设置->页尾设置->页尾附加代码中添加上述代码即可。
可能的问题
如果添加后刷新网页，没有看板娘。可能的原因如下：
-
看板娘模型加载需要一定时间可以等待半分钟。
-
cdn域名无法访问
上面的js代码使用了基于
jsdelivr的cdn加速，但是jsdelivr的部分加速域名被墙了，国内可能无法访问。可以直接在浏览器网址栏，输入https://fastly.jsdelivr.net/npm/live2d-widgets@1.0.0-rc.4/dist/autoload.js，如果不能访问，就说明被墙了。如果被墙可以更换其他加速域名，只需替换网址中的
fastly.jsdelivr.net即可。其他可用域名可参考博客：jsdelivr npm 国内加速CDN节点
其实我们还可以直接把资源放在本地，好处是：
- 不会有网络问题
- 可以自己添加、删去模型
- 可以深度定制模型，如定制看板娘聊天语句、自定义看板娘右侧功能按钮等。
本地引入
如果想要深度定制需要参考stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform 官方文档的开发章节重新进行build。
如果只需要本地引入，增加或删减模型等功能，是不需要进行本地构建的。
将仓库上传到wordpress的根目录：
确保https://XXXX.com/live2d-widget/dist/autoload.js可以正常访问。
然后修改live2d-widget/dist/autoload.js文件（8-9行）。修改live2d_path为自己的网址路径。
//const live2d_path = 'https://fastly.jsdelivr.net/npm/live2d-widgets@1.0.0-rc.3/dist/';
const live2d_path = 'https://XXXX.com/live2d-widget/dist/';
最后在主题的页尾附加代码中添加下面的代码即可：
<!-- Live2D看板娘 -->
<script type="text/javascript" src="https://XXXX.com/live2d-widget/dist/autoload.js"></script>
注意：XXXX.com请替换成自己的域名
增加模型
需要修改文件live2d-widget/dist/waifu-tips.json，在文件最后仿照前面的格式，即可添加模型。示例如下：
{"name": "TEST","paths": ["https://fastly.jsdelivr.net/gh/Eikanya/Live2d-model@v1.0.0/%E5%B4%A9%E5%9D%8F%E5%AD%A6%E5%9B%AD2/BYC/model.json"],"message": "正在测试"}, {"name": "TEST","paths": ["https://raw.githubusercontent.com/zenghongtu/live2d-model-assets/master/assets/moc3/lafei/lafei.model3.json"],"message": "正在测试"}
比较关键的是paths这个需要是模型model.json或model3.json路径。
其他可用模型可参考：
- Eikanya/Live2d-model: Live2d model collection
- zenghongtu/live2d-model-assets
使用jsdelivr给模型加速
使用如下格式即可加速
https://cdn.jsdelivr.net/gh/用户名/仓库名@版本号/文件路径/文件名
或省略版本号（版本号就是仓库的tag）
https://cdn.jsdelivr.net/gh/lzxjack/cdn/json/emoji.json