昨天整完的时候已经很晚了

就打算今天再来写了

Wordpress用户可用的直接做法

live2d插件byChiang Weifang

可以在官方插件市场里搜到，安装完就能正常使用

我目前也是直接插件，把模型api换成自己本地的在使用

没有框架的做法

参考大佬的文章：

小伟博客：给自己的网站加一个可爱的看板娘（血小板）

HCLonelyLive2dV3 支持moc3的源码

stevenjoezhang live2d-widget 看板娘前端源码1

fghrsh live2d\_demo 看板娘前端源码2

拿前端源码1举例（建议仔细阅读readme文档）

因为我是winserver用户（别骂了linux真没学可参考楼上大佬）

所以直接复制粘贴或者ftp把前端代码上传到根文件夹就行

因为这里你还没有对文件进行修改，所以默认用的是作者大大的api

在子主题的页脚文件添上代码（建议在后台主题编辑器编辑，如果主题有地方外挂自然更好）

<script src="根目录/你命名的存放前端源码文件夹/autoload.js"></script>
</body>
</html>

刷新一下看看看板娘是不是出来了

如果出来了第一步就完成了

这个时候打开autoload.js文件进行修改

// 注意：live2d\_path 参数应使用绝对路径
const live2d\_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
//const live2d\_path = "/live2d-widget/";

1~3行这里需要把路径替换成上面上传前端源码的路径（注意是绝对路径）

initWidget({
  waifuPath: live2d\_path + "waifu-tips.json",
  //apiPath: "https://live2d.fghrsh.net/api/",
  cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d\_api/"
  });
});
// initWidget 第一个参数为 waifu-tips.json 的路径，第二个参数为 API 地址
// API 后端可自行搭建，参考 https://github.com/fghrsh/live2d\_api
// 初始化看板娘会自动加载指定目录下的 waifu-tips.json

34行这里如果用的自建api的话，直接给cdnpath这行加//变注释

把上面api注释取消掉，地址改为api的地址

注意最后的/不能省略，小心逗号

本地自建api

fghrsh live2d\_api 看板娘后端api源码

下载并上传大佬的源码，建议和前端放一块

然后像前文把地址给替换掉再载入

进入网站右键检查，选择neiwork，勾上xhr

刷新一遍看看这几个文件的路径是不是自己上传的api路径

如果是基本就完成了

jsDelivr+Github存放api

https://blog.csdn.net/qq\_36759224/article/details/86936453

需要建立一个github仓库把api上传上去（需要学习git的用法）

具体做法可以参考上面

如果你不打算替换模型的话直接fork作者大大的就行

然后引用方式是这样的

https://cdn.jsdelivr.net/gh/用户名/仓库名@版本号/file

按照上文把autoload里的地方改一改就行，注意用的是cdnpath路径

替换模型

Live2d model资源下载（有的能用有的貌似不行）

xiaoskilive2d\_models\_collection资源下载（据说全能用）

fghrsh live2d\_api 看板娘后端api源码

建议仔细阅读作者大大的文档

里面写了你需要重命名文件的规范

记得修改的时候一定要注意逗号

我昨天看半天没整好多半是逗号的锅

拿单模型单皮肤举例

model.1024文件夹里存放texture文件

直接重命名文件夹为textures

然后把model.json重命名为index

进入里面把texture的路径也给修改成textures

{
    "version":"Sample 1.0.0",
    "model":"model.moc",
    "textures":\[
        "model.1024/texture\_00.png"//就是这里
    \],
    "motions":{
   //以下省略一般不用去动

之后修改model\_list.json

添加方法如下，用的是相对路径

{
    "models": \[
        "gf/zb26",
        "gf/hk416",
        "gf/dsr50"
    \],
    "messages": \[
        "指挥官,一起游泳吧",
        "指挥官,hk416前来报道",
        "指挥官,好久不见啊"
    \]
}

之后刷新网站试试，应该就可以正常使用了

几个需要注意的问题

jsdelivr支持的最大缓存貌似只有20M

不知道比较大的文件还能不能快速加载

放在本地的api加载比较慢，而且有泄露的风险

因为完全没加密啥的我又没学过web

所以我就不打算分享出来了（虽然审查元素还是能找得到的说）

最后感谢一下大佬的帮助

https://www.fghrsh.net

添加新评论