Live2D Widget 使用说明

在网页中添加 Live2D 看板娘。兼容 PJAX，支持无刷新加载。 (注：已不再需要配置依赖 jQuery 和 Font Awesome)

代码： live2d-widget live2d_api

博文：
网页添加 Live2D 看板娘 Live2D 看板娘 API 迁移公告

1 简单配置

只需要最基础的功能，那么只用将这一行代码加入 html 页面的 head 或 body 中，即可加载看板娘：

<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

1. 添加代码的位置取决于你的网站的构建方式。例如，如果你使用的是 Hexo，那么需要在主题的模版文件中添加以上代码。对于用各种模版引擎生成的页面，修改方法类似。
   
2. 如果网站启用了 PJAX，由于看板娘不必每页刷新，需要注意将该脚本放到 PJAX 刷新区域之外。

2 进阶配置

2.1 修改autoload.js文件

下载live2d-widget源码，找到其中的autoload.js文件，修改其中的配置项。

autoload.js 会自动加载三个文件：waifu.css，live2d.min.js 和 waifu-tips.js。waifu-tips.js 会创建 initWidget 函数，这就是加载看板娘的主函数。initWidget 函数接收一个 Object 类型的参数，作为看板娘的配置。以下是配置选项：

1️⃣ live2d_path 是 live2d-widget 的资源路径，可以自行修改。

下载live2d-widget

1. 本地存放：将下载的仓库放在本地目录下，指向本地路径，例如 /assets/live2d-widget/。如hexo，放在博客源文件目录下（ source 目录），需要设置 skip_render。
2. 云端存放：将下载的仓库上传到云端，指向云端路径
   • github：使用 jsdelivr，例如 https://cdn.jsdelivr.net/gh/username/live2d-widget@latest/，需要创建新的 git tag 并推送至 GitHub 仓库中，否则此处的 @latest 仍然指向更新前的文件。
   • npm：使用 unpkg或者jsdelivr，例如 https://unpkg.com/[package_name]/@latest/ 或 https://cdn.jsdelivr.net/npm/[package_name]/@latest/
   • 云服务器: 新建静态项目，例如 https://example.com/path/to/live2d-widget/

2️⃣ apiPath 和 cdnPath 两个参数设置其中一项即可。

下载live2d_api

• apiPath 是后端 API 的 URL，可以自行搭建，并增加模型。
  • 需要支持 GET 请求，因此需要建站，以宝塔面板为例：
    • 首先，在宝塔面板创建新站点，设置好 PHP 版本（不是纯静态），并添加上 SSL 证书。
    • 然后，删去网站根目录 /www/wwwroot/api/ 下默认添加创建的所有文件。
    • 打开 SSH 终端，把 Live2D API 源代码放到网站 live2d/ 目录
• cdnPath 则是类似于 live2d_path 的路径，用于加载模型文件。
  • 本地存放和云端存放同上。

2.2 添加autoload.js文件

修改live2d_path后将这一行代码加入 html 页面的 head 或 body 中，即可加载看板娘：

<script src="{live2d_path}/autoload.js"></script>

2.3 测试

不妨试试能否正常地通过浏览器打开 autoload.js 和 live2d.min.js 等文件，并确认这些文件的内容是完整和正确的。

3 高级配置

修改样式和模型：自行查阅两个仓库的README.md文件和源码。