不少人对这个 Live2D 看板娘感兴趣,很多博客都有看板娘,下面我们来给自己博客添加一个 Live2D 看板娘吧。兼容 PJAX,完美适配 Sakura 主题,也可以用于其他主题但可能需要修改样式。

准备

需要 Font Awesome 4.7.0 支持,请确保相关样式表已在页面中加载(如果网页中已经加载了 Font Awesome ,就不要重复加载了,Sakura 主题已自带请跳过),例如在 <head> 中加入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

项目

开工

默认版

  1. 下载项目代码,将 live2d_default 放到你的站点根目录,waifu-tips.json 中为触发内容可以修改,最后引用 autoload.js 即可,一般放到 footer.php 的 </body> 标签之前:
<script src="/live2d_load/autoload.js"></script>
  1. 预览

少女前线版

  1. 下载项目代码,除了 live2d_default 将其他目录放到你的站点根目录,waifu-tips.json 中为触发内容可以修改
  2. live2d/model_list.json 和 live2d/model 为加载的模型列表,可以自己精简
  3. 然后在你主题的 footer.php 文件 </body> 标签之前引用即可
<script src="/live2d_girls/autoload.js"></script>
  1. 如果你要修改更多请查看下面引用的前两个项目的说明文档
  2. 预览

补充

autoload.js 中的 apiPath: 为 live2d API 接口,默认即可,如果你有其他的也可以修改
autoload.js 中的 cdnPath: 为对象存储路径,注意跨域的问题,不使用请注释掉
Json配置(SDK 2):http://live2d.pavostudio.com/doc/zh-cn/live2d/model-config/

引用

Live2D API
Live2D Widget

不会的可以联系我