给网站添加live2d看板娘

给网站添加live2d看板娘

参考文献：

1. stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform
2. Eikanya/Live2d-model: Live2d model collection
3. 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​路径。

其他可用模型可参考：

1. Eikanya/Live2d-model: Live2d model collection
2. zenghongtu/live2d-model-assets

使用jsdelivr​给模型加速

使用如下格式即可加速

https://cdn.jsdelivr.net/gh/用户名/仓库名@版本号/文件路径/文件名

或省略版本号（版本号就是仓库的tag）

https://cdn.jsdelivr.net/gh/lzxjack/cdn/json/emoji.json

‍