- A+
所属分类：Web前端
这也算是笔者自己折腾的经历，发出来和大家一起分享。
嘿嘿就是这只啦，只是刷新的比较慢，大概需要好几秒才能刷出来。使用CDN加速后，可以在1秒内刷出来，速度快了不少。
库用的是这里的：live2d-widget
模型是用的这里的：shizuku
库只用到了两个文件L2Dwidget.min.js和L2Dwidget.0.min.js。不用管具体的实现原理，只需要把这两个文件加载好就行了。
在博客园JS代码中将加载的地址改为速度较快的CDN，我这里是用了jsdelivr中本来就有的L2Dwidget.min.js和L2Dwidget.0.min.js（点开复制链接就行），或者说把文件上传到博客园再引用也行。
至于模型，有多个文件，并且文件之间是有一定的层级关系的，所以就不能全部上传到博客园了（博客园不支持层及目录），这里就需要CDN帮助加载，这里可以用我的CDN地址shizuku.model.json
当然也可以自己fork原作者一份再releases，以”https://cdn.jsdelivr.net/gh/用户名/仓库名“的格式找到CDN外链。
将模型中复制shizuku.model.json文件的外链，粘贴到博客园JS代码中，就实现了模型读取的CDN加速。下面是我的代码（红色连接为需要修改的地方，当然你不怕后面链接失效直接复制过去也可以）
<script charset="utf-8" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.0.min.js"> </script> <script charset="utf-8" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js"> </script> <script> L2Dwidget.init({ "model": { jsonPath: "https://cdn.jsdelivr.net/gh/cn-night-ray/live2d-widget-models@1.0/packages/live2d-widget-model-shizuku/assets/shizuku.model.json", scale: 1 }, "display": { "superSample": 1.2, "width": 200, "height": 380, "position": "right", "hOffset": 0, "vOffset": -32 } }); </script>
