抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

我看了看手上的牌,明白自己无牌可出

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

评论