自定义Live2D插件配置并加载CDN数据

0

修复博客问题的时候，发现加载Live2D的模型报了一堆错误。仔细看，是由于看板娘的动作文件出错了，而且居然是大小写的问题，想必windows服务器就不会出现这个问题，所以模型的作者并没有发现。

既然都在批量修复问题了，那把这个问题一并处理掉吧。

更换插件

本来想着应该是个很快的过程，找到问题所在，如果可以修复，我也想继续使用这个模型。或者不可以，那我就换个模型继续用。

但是访问hexo-helper-live2d- https://github.com/EYHN/hexo-helper-live2d 时，顶部黄条让我心头一颤，接着在 Readme 看到一条让人遗憾的说明。

This repository has been archived by the owner before Nov 9, 2022. It is now read-only.

The project is not actively maintained. Please try similar projects stevenjoezhang/live2d-widget

emmm……看最近更新确实都是3年前了。于是循着他的推荐，我去访问了Live2D Widget- https://github.com/stevenjoezhang/live2d-widget 这个项目。

该项目并不是hexo的特有插件，所以看起来自定义集成会比之前的插件略微麻烦。当然，如果只需要最基本的功能，则比之前还简单。只用将下面这一行代码加入html页面的head或body中，即可加载看板娘：

1

我以上方式尝试了一下，得到了下图的结果。

然而，我希望博客上的看板娘插件能干干净净的，不说废话，不用换人换装，更不用各种乱七八糟的功能。很明显这并不是我想要的。

略微纠结了一会要不要换回以前的插件，然后打定主意还是要更换为新的，毕竟有维护更新还是更有保障一些。

本地部署

对于线上托管版本，其实项目已经提供了一些可选配置。项目中的autoload.js文件也大致都列出来了可选配置。autoload.js会自动加载三个文件：waifu.css，live2d.min.js和waifu-tips.js。waifu-tips.js会创建initWidget函数，这就是加载看板娘的主函数。initWidget函数接收一个 Object 类型的参数，作为看板娘的配置。

选项类型默认值说明waifuPathstringhttps://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/waifu-tips.json看板娘资源路径，可自行修改apiPathstringhttps://live2d.fghrsh.net/api/API 路径，可选参数cdnPathstringhttps://fastly.jsdelivr.net/gh/fghrsh/live2d_api/CDN 路径，可选参数toolsstring[]autoload.js加载的小工具按钮，可选参数

这些配置确实能够解决不要显示小工具的问题，但是自己说话的问题（原来的文本实在是太那个了，都不敢让我孩子看见），以及指定角色和服装，在这里并不能解决。

于是我还是走上了进阶道路——自定义配置。

首先当然是把项目克隆到本地：

1

git clone https://github.com/stevenjoezhang/live2d-widget.git

直接把整个目录复制到source文件夹下面就可以。依赖就不用安装了，毕竟我是要在自己的Hexo博客里运行。

试试引入

1

部署运行没有问题，那么剩下就是真正的自定义阶段了。

自定义配置

要干活首先得安排好要干什么活儿，所以先分析一波它的demo，其中一个是基础例子，不管它，我们来看另外一个login.html。

live2d-widget│ live2d.min.js 查看原文：https://www.gsgundam.com/2022/2022-12-16-z11-live2d-update-customize-config-with-cdn/

特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

/阅读下一篇/ 返回网易首页 下载网易新闻客户端