9 - fluid添加看板娘

参考：link

（1）

下载 张书樵大神的项目，解压到本地博客目录的 themes/fluid/source/alec_diy/ 下，修改文件夹名为 live2d-widget

（2）在主题配置文件的custom_js和custom_css中加入：

custom_js:
  # live2d的js文件（2）
  - /alec_diy/live2d-widget/autoload.js
  - //cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js

custom_css:
  # live2d的css文件（1）
  - //cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css

也可以将上面两个依赖文件下载到本地然后再引入

（3）

修改项目中的 autoload.js 文件，如下将：

const live2d_path = 'https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/'

改为

const live2d_path = '/alec_diy/live2d-widget/'

（4）

这里指定的是看板娘API的库

继续修改项目中的 autoload.js 文件，如下将：

在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/"

这里将看板娘api改为本文的话，需要下载对应的文件，做法为：

（1）fork并克隆仓库到本地

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

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

（2）删除模型

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

（3）增加模型

• 由于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即可

（4）修改模型的大小与位置

• 由于一般拿到的模型可能大小不对，所以也给出了模型的位置及大小的方法
• 打开需要修改的模型的文件夹中的name.model.json文件，添加或修改layout部分

"layout": {
        "center_x": 0, // 模型中心对应的横坐标，默认为0
        "center_y": -0.2, // 模型中心对应的纵坐标，默认为0
        "width": 1.5 // 模型的大小，默认为2
    },

调整到自己需要的比例还挺麻烦的，上面的参数是xiaoski/live2d_models_collection中我调整康娜缩放及位置的参数，应该其他的模型也基本可用(我没试过)

（5）在主题配置文件中,新增如下内容：

live2d: enable: true

（6）想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css

如果被挡住的话是因为在插件的z-index默认为-1(修改为999就是最顶层，值越大所在的图层就越高)，在waifu.css文件中修改即可，调整插件大小也是在这个文件中，修改对应部分的width和height即可

#waifu {
    z-index: 999;
}

（7）效果展示：