Hexo博客添加live2d看板娘-可换装，增删模型

记录如何折腾左下角的看板娘，包括live2d_widget的使用，如何自己修改live2d_api中的模型并直接访问或上传到NPM上再通过CDN加速访问，以及如何调整模型的大小进行适配。

live2d_widget的使用

将stevenjoezhang/live2d-widget的项目通过git clone拷贝到主题的source目录下
在主题目录的layout文件夹中找到head文件并在其中添加代码(若有PJAX放到PJAX刷新区域外更好)
```
<script src="/live2d-widget/autoload.js"></script>
```
修改live2d_widget文件夹下的autoload.js文件，更换live2d_path为
```
const live2d_path = "/live2d-widget/";
```
在initWidget中，注释掉apiPath(原api地址已不可用)并修改cdnPath，原作者的cdn地址不能换装，可以用Live2d Widget | Akilarの糖果屋中的cdn地址(可换装且模型比较多，我也是在此基础上改的，我的live2d_api)
```
// 三个cdnPath选一个，分别是原作者，Akilar站长，我的
cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/"
cdnPath: "https://npm.elemecdn.com/akilar-live2dapi@latest/"
cdnPath: "https://gcore.jsdelivr.net/npm/yzs-live2d_src@1.1.0/"
```
或者使用本地的地址，将live2d_api放在博客的原网站下(反正免费的CDN加速在国内基本上不得行，基本上需要梯子，所以直接在网站内访问的速度也可以，如果有条件用gitee也可以直接用gitee，不过注意在tips下删掉一些句子)，具体操作见下文
```
cdnPath: "/live2d_api/"
```
修改完后deploy就可以用了
如果看板娘说的话太羞耻了，可以在waifu-tips.json中更改
如果被挡住的话是因为在插件的z-index默认为-1(修改为999就是最顶层，值越大所在的图层就越高)，在waifu.css文件中修改即可，调整插件大小也是在这个文件中，修改对应部分的width和height即可
```
#waifu {
    z-index: 999;
}
```

修改live2d_api

fork并克隆仓库到本地

先把live2d_api fork到自己的仓库里，可以fork我的也可以fork Akilarlxh/live2d_api
将自己的仓库git clone下来

如何增删模型即缩放调整

以下操作都在本地的live2d_api文件夹中进行操作

删除模型

在model_list.json中删除对应的models名称，messages对应的是更换看板娘时看板娘会说的话(跟models的顺序对应)
在model文件夹中删除对应名称的文件夹

增加模型

由于live2d_widget仅支持Cubism2.1，虽然issues上有兼容目前所有live2d格式的issues，但我目前没有尝试过(比较麻烦，暂时不想加新的模型，就这样吧)
如果只使用Cubism2.1，我个人推荐去看看xiazeyu/live2d-widget-models和xiaoski/live2d_models_collection，收录的不少而且都是可用的，在网上找的话Cubism2.1的模型已经不多了
在将上面两个项目中通过git clone或npm install后，把对应的模型文件夹拉到model文件夹下
修改模型文件夹中的那个指定各个文件路径的json文件为index.json，一般这个文件叫name.model.json，一般来说修改到这个步骤的模型文件就已经可用了
在model_list.json文件中的models中添加对应的文件夹名字并添加对应的messages即可

修改模型的大小与位置

由于一般拿到的模型可能大小不对，所以也给出了模型的位置及大小的方法
打开需要修改的模型的文件夹中的name.model.json文件，添加或修改layout部分
```
"layout": {
        "center_x": 0, // 模型中心对应的横坐标，默认为0
        "center_y": -0.2, // 模型中心对应的纵坐标，默认为0
        "width": 1.5 // 模型的大小，默认为2
    },
```
调整到自己需要的比例还挺麻烦的，上面的参数是xiaoski/live2d_models_collection中我调整康娜缩放及位置的参数，应该其他的模型也基本可用(我没试过)

修改完之后就是上传到博客或上传到npm了。

上传到博客上并访问

因为国内jsDelivr已经几乎不可用了，所以直接上传也是不错的选择(还不限大小)。

将修改后的live2d_api仓库拷贝到主题的source文件夹下(在博客根目录的source下会导致里面的很多文件会进行渲染)，修改live2d-widget中的autoload.js中的cdnPath：

cdnPath: "/live2d_api/"

NPM上传并通过CDN访问

为什么是npm，github打包之后发布release版本后，等待一段时间也可以通过cdn访问，可惜cdn访问github仓库，必须控制在50MB以内，而npm则可以到100MB，更不用说npm发布的包可以通过unpkg访问，就是我的仓库通过unpkg访问实在是太慢了，所以我还是用的cdn。

注册npm帐号

在npm官网注册帐号

在api文件夹下打开cmd

如果有使用过npm镜像请先关闭
输入命令登录
```
npm adduser
```
按照提示输入邮箱和密码
查看一下是否登录成功
```
npm whoami
```

如果提示网络错误可以设置代理

npm config set proxy http://127.0.0.1:port
npm config set https-proxy http://127.0.0.1:port

修改package.json的信息并发布

先初始化
```
npm init
```
修改api文件夹中的package.json的信息，将几处都换成你自己的链接，注意版本之后每一次发布都要比上一次更大
```
"name": "资源名，尽量不要包含数字，容易被ban",
"version": "你的版本",
"author": "你的npm用户名字",
```
发布资源(会比较久，看大小和网速)
```
npm publish --public
```

通过CDN或unpkg访问

一般上传到npm后基本能立刻通过CDN访问到(可以在浏览器打开查看)，但是不能超过100MB，格式如下(gcore的访问速度更好一点)
```
https://unpkg.com/资源名@版本/ 
https://fastly.jsdelivr.net/npm/资源名@版本/ 
https://gcore.jsdelivr.net/npm/资源名@版本/ 
```
unpkg也可以使用，就是收录速度实在太慢了，还经常内部的文件夹打不开，不过它确实能加载更大的项目，格式如下(饿了么的源好一点)
```
https://npm.elemecdn.com/资源名@版本/
https://unpkg.com/资源名@版本/
```