很多人对这个 Live2D 看板娘很感兴趣呢,不少博客都有自己的看板娘,下面我们来给自己博客添加一个 Live2D 看板娘吧~兼容 PJAX,支持无刷新加载哦~
完美适配 Sakura 主题,也可以用于其他主题但需要修改样式或用官方原版调用我的 Live2D API 即可。

欢迎使用本人制作的 少女前线的Live2D API 哦~

致谢项目



TaylorLottner 的项目,项目作者已删除

使用须知

需要 Font Awesome 4.7.0 支持,请确保相关样式表已在页面中加载,例如在 <head> 中加入

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

否则无法正常显示。(如果网页中已经加载了 Font Awesome ,就不要重复加载了,Sakura 主题自带此步请跳过

项目代码

开工

默认API版

  1. 如果你是小白,或者只需要最基础的功能,就只用把这一行代码,一般放到 html 的 </body> 标签之前即可:
<script src="https://cdn.jsdelivr.net/gh/Fog-Forest/live2d@1.0.2/live2d_load/autoload.js"></script>
  1. 如果你需要修改回复等设置,请下载上方 项目代码 v1.0.2 中的 live2d_load 目录到本地,修改 waifu-tips.json 文件触发内容,本地调用 autoload.js 即可。

  2. 演示图(内含多个模型)
    默认

少女前线API版

  1. 如果你是小白,或者只需要最基础的功能,请将上方 项目代码 下载下来【前面的 Font Awesome 的一行代码(看需求添加)】,将 live2d_api 目录放到你的站点根目录,新建一个 live2d 目录将项目的其他文件都放进去。

  2. 修改 autoload.js 文件中第37行的 apiPath 为你的 https://你的域名/live2d_api/, 第2行和第3行路径改为 https://你的域名/live2d/

  3. 然后在你主题的 footer.php 文件 </body> 标签之上引用即可

<script src="https://你的域名/live2d/autoload.js"></script>
  1. 如果你要修改更多请查看致谢的前两个项目的说明文档和上方默认 API 的说明

  2. 演示图(内含107个模型,见本站)
    少女前线

其他说明

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


Never give up your dreams.