写在最前

最早的时候看别人的博客很多都有一个可爱的看板娘，然后就找了教程给自己也整了一个。因为找到的教程都是稂莠不齐的，原作者自己说的也略显含糊（其实是我自己看不懂）。总之秉承着一如既往的小白风格。把网上的教程做个整合。

效果

正式步骤

1.首先克隆仓库：

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

2.把下载的zip解压放到主题的assets\media，重命名为live2d-widget

3.找到路径assets\media\live2d-widget\autoload.js，打开autoload.js，修改内容：

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

+ const live2d_path = "/media/live2d-widget/";

此处引用一下参考教程原话：autoload.js中的注释的绝对地址指的是，将资源打包放到theme/next/source中后，以/theme/next/source为根目录（/）的绝对路径。

4.引入Font Awesome

将以下代码粘贴到网页HTML代码的部分.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

5.在footer引入JS

<script defer src="/media/live2d-widget/autoload.js"></script>

完成

本地化API配置

有读者反映使用张书樵大神的魔改方案时，Pio酱和Tia酱的模型不能像在其他网站看到的那样可以换装。这里主要是因为张书樵大神的魔改方案使用的CDN路径是通过接入的live2d_api仓库的jedelivrCDN链接，根据该项目的model_list.json和指向的model文件夹内的模型的index.json来确定模型资源。而Pio酱和Tia酱的模型装配是配合有后端服务器的API装配方式，依赖于后端生成的textures.cache来获取模型资源。解决方案是将模型装配模式由单模型多组皮肤转换为同分组多个模型。

1.懒人配置方案:修改张书樵大神的项目内的~\live2d-widget\autoload.js,将模型资源由cdnPath改为apiPath。

  // 加载 waifu.css live2d.min.js waifu-tips.js

  if (screen.width >= 768) {

  	Promise.all([

  		loadExternalResource(live2d_path + "waifu.css", "css"),

  		loadExternalResource(live2d_path + "live2d.min.js", "js"),

  		loadExternalResource(live2d_path + "waifu-tips.js", "js")

  	]).then(() => {

  		initWidget({

  			waifuPath: live2d_path + "waifu-tips.json",

- 			//apiPath: "https://live2d.fghrsh.net/api/",

-  			cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"

+ 			apiPath: "https://live2d.fghrsh.net/api/",

+  			//cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"

  		});

  	});

  }

这个apiPath就是live2d_widget的原作者@fghrsh搭建的。但是这个API纯粹是用爱发电的产物，随时可能到期，虽然已经喊了三年了。。。详见Live2D 看板娘 API 迁移公告，所以最好还是采用自建api的方式。

模型配置方案更改

上面已经说到过，张书樵大神的魔改方案其实已经实现了本地化API，只是因为模型配置路径不同才导致无法换装的。所以其实只要注意配置模型时，保证每个可以展示的模型都有相应的index.json并且在model_list.json里有相应的模型路径就可以了。

这里读者可以直接使用我配置好的本地化项目的路径：

修改张书樵大神的项目内的~\live2d-widget\autoload.js,修改cdnPath

  // 加载 waifu.css live2d.min.js waifu-tips.js

  if (screen.width >= 768) {

  	Promise.all([

  		loadExternalResource(live2d_path + "waifu.css", "css"),

  		loadExternalResource(live2d_path + "live2d.min.js", "js"),

  		loadExternalResource(live2d_path + "waifu-tips.js", "js")

  	]).then(() => {

  		initWidget({

  			waifuPath: live2d_path + "waifu-tips.json",

  			//apiPath: "https://live2d.fghrsh.net/api/",

-  			cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"

+  			cdnPath: "https://npm.elemecdn.com/akilar-live2dapi@latest/"

//因为jsdelivr不支持50MB以上的包的加速，可能报403错误，所以用的vercel的CDN服务。

//可以考虑clone我配置好的live2d_api仓库自己部署到其他更快的cdn服务上。

  		});

  	});

  }

除了让原有模型换装可用化以为，还顺便添加了亚丝娜、和泉纱雾，血小板、土间埋（干物妹小埋）和香风智乃的模型哦。

巴特西

Live2d Widget

写在最前

效果

正式步骤

本地化API配置

模型配置方案更改

最新文章

热门文章