前言

不少人对这个 Live2D 看板娘很感兴趣呢,不少博客都有自己的看板娘,下面我们来给自己博客添加一个Live2D看板娘吧~兼容 PJAX,支持无刷新加载哦~
本教程 不仅仅 适用于Sakura博客主题,如果你用的其他主题可能需要修改样式【完美适配Sakura主题】
欢迎使用本人制作的 少女前线的live2d API 哦~
PS:本站的CDN已不再对外开放,如需使用可在此申请 对象存储 UFile

使用的开源项目



使用须知

需要 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. 如果你是小白,或者只需要最基础的功能,就只用把这一行代码,连同前面加载 Font Awesome 的一行代码(看需求添加),一起放到 html 的 <head> 中即可展现出效果:
<script src="https://cdn.jsdelivr.net/gh/Fog-Forest/live2d@1.0.2/live2d_load/autoload.js"></script>
  1. 如果你需要修改回复等设置请下载上方 整理好的项目代码 中的 live2d_load 目录,参照此项目说明修改即可https://github.com/stevenjoezhang/live2d-widget

  2. 演示图(内含多个模型不仅这一种)
    默认

少女前线API版

  1. 如果你是小白,或者只需要最基础的功能,清将上方 整理好的项目代码 下载下来【前面的 Font Awesome 的一行代码(看需求添加)】,将项目中的 live2d_apilive2d_load_own 两个目录上传到你的服务器

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

  3. 然后在你主题的 header.php 文件 <head> 中引用即可展现出效果:

<script src="https://你的域名/live2d_load_own/autoload.js"></script>
  1. 如果你要修改更多请查看我 整理好的项目代码 中的说明 和 上方默认API版的说明

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

其他说明

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


Never give up your dreams.