声明
欢迎来到这篇“狠实用”的教程。先说明一下：本文不是官方文档，而是基于作者本人在 WordPress 环境下“折腾”Live2D Widget（简称看板娘）并加速部署后的实战总结。如果你的网站环境略有不同，也没关系——只需根据思路稍作调整即可。准备好了吗？一起搞起来！
环境准备与整体思路
在开始之前，先明确一下整体流程：
引入 Live2D 的 “看板娘”组件和模型资源。
决定是网络方式加载还是本地方式部署。
如果存在访问慢、CDN 被墙、加载失败等问题，再做加速优化。
在我的环境中，使用的是 WordPress 搭建＋Agron主题。
在你自己的环境中：如果不是 WordPress，也可以，但本文以 WordPress 为例。
引入看板娘组件与模型资源
网络方式引入
这是最快捷的方法，只需在页面中加入一行 script 就行（对于WordPress，在主题的footer.php文件中添加即可，一般在</body>之前）。
<script src="https://fastly.jsdelivr.net/npm/live2d-widgets@1.0.0-rc.4/dist/autoload.js"></script>
注意：写这行，你的网站必须允许加载外部脚本。同时，如果你之前添加了其他的看板娘，请将之注释掉。
网络方式可能的问题
模型加载需要时间，等待半分钟是正常的。
CDN 域名可能被墙。 jsDelivr 的一部分加速域名在国内不可访问。
如果你发现看板娘不出现，建议打开浏览器输入<script>中的 URL，看看是否加载失败。
本地方式部署
如果你希望更稳定、可定制性更强，则推荐本地部署。步骤如下：
将
live2d-widget仓库下载之后上传到你网站的根目录（例如/www/wwwroot/example.com/live2d-widget/）确保
https://yourdomain.com/live2d-widget/dist/autoload.js可访问（直接在浏览器打开，看是否有显示文件内容）。打开
live2d-widget/dist/autoload.js，找到并修改（改为自己的路径）：
const live2d_path = 'https://example.com/live2d-widget/dist/';
4. 在主题页脚附加代码中加入：
<!-- Live2D 看板娘 -->
<script type="text/javascript" src="https://example.com/live2d-widget/dist/autoload.js"></script>
注意将
example.com替换成自己的域名。同时，如果你之前添加了其他的看板娘，请将之注释掉。
改变模型
可修改 live2d-widget/dist/waifu-tips.json。在末尾找到model字样，可添加以下模型进行测试：
{
"name": "prefer/hijiki",
"paths": ["https://raw.githubusercontent.com/zenghongtu/live2d-model-assets/master/assets/moc/hijiki/hijiki.model.json"],
"message": "hello"
}
其中的path就是模型的路径，可以在github网站里面选择模型，安装同样的方式更改路径即可，也可以自己将模型放在本地进行加载。
Github加载：在网页里面找到对应模型的路径即可（只需要更改后面部分）
https://raw.githubusercontent.com/zenghongtu/live2d-model-assets/master/assets/moc/hijiki/hijiki.model.json
本地加载模型（在Github下载模型文件，在本地网页路径里面live2d-widget/下面新建model文件夹，将模型文件放进去）（我在model下新建了一个prefer文件夹，里面放了我当前需要加载的模型）：
https://example.com/live2d-widget/model/prefer/hijiki/index.json
加速方案与优化操作
判断是否需要加速
如果你使用的是外部 CDN（如 jsDelivr），但在国内访问缓慢或加载失败，那么说明需要加速。
打开浏览器控制台，看网络请求是否出现 404 或超时／跨域被阻止。
如果模型／脚本加载正常但启动明显延迟，也可以考虑加速。
利用 jsDelivr “加速”模型资源
找到你模型所在的 GitHub 仓库地址。（没有就创建）
例如：https://github.com/yourname/Live2d-model。确定你要引用的模型路径。
替换成 jsDelivr 地址，格式如下：https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>@<版本号或commit>/文件路径，如：
https://cdn.jsdelivr.net/gh/yourname/Live2d-model@v1.0.0/model/prefer/hijiki/index.json（@版本号（例如@v1.0.0）是可选，但建议加上，这样缓存更稳定。不加就是默认最新版本）将这个地址填入你
waifu-tips.json的paths字段。在主题页脚附加代码中加入(具体路径自定义)：
https://cdn.jsdelivr.net/gh/yourname/live2d-widget/dist/autoload.js。保存并刷新页面，看看资源是否从 jsDelivr 成功加载（在网络标签里可以看到 cdn.jsdelivr.net 的请求）。
更新模型文件
只要你 push 新 commit，jsDelivr 会几分钟内自动同步。
想强制刷新 CDN 缓存：访问
https://www.jsdelivr.com/tools/purge
输入你的文件 URL（例如上面的 index.json），点击 Purge 即可。具体需要刷新的路径为：- 回到网站界面，按下F12打开开发者工具，然后点到网络选项，按下Ctrl+r，此时在网络选项里面出现的关于你的cdn的网站都要更新（可以在过滤器里面写入你的github仓库名字进行搜索）
- 回到网站界面，按下F12打开开发者工具，然后点到网络选项，按下Ctrl+r，此时在网络选项里面出现的关于你的cdn的网站都要更新（可以在过滤器里面写入你的github仓库名字进行搜索）
来自 fghrsh/live2d_api 的模型
原仓库作者在 README 里写明：
“本 API 所包含的模型版权归原作者所有，仅供学习使用，请勿商用。”
也就是说：
你可以 自用或研究（放在自己网站上给自己看）；
但不可以 重新分发公开提供下载（例如放到公开 GitHub 仓库给别人引用）。
因此，如果你要上传到 GitHub 公共仓库，请确保模型：
来源明确；
拥有可再分发授权（CC0、CC-BY、MIT 等），或
是你自己制作的。