记录如何折腾左下角的看板娘,包括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/资源名@版本/