博客园为看板娘加上CDN加速

  • A+
所属分类:Web前端
摘要

这也算是笔者自己折腾的经历,发出来和大家一起分享。 嘿嘿就是这只啦,只是刷新的比较慢,大概需要好几秒才能刷出来。使用CDN加速后,可以在1秒内刷出来,速度快了不少。

这也算是笔者自己折腾的经历,发出来和大家一起分享。

博客园为看板娘加上CDN加速

 

嘿嘿就是这只啦,只是刷新的比较慢,大概需要好几秒才能刷出来。使用CDN加速后,可以在1秒内刷出来,速度快了不少。

库用的是这里的:live2d-widget

模型是用的这里的:shizuku

库只用到了两个文件L2Dwidget.min.jsL2Dwidget.0.min.js。不用管具体的实现原理,只需要把这两个文件加载好就行了。

在博客园JS代码中将加载的地址改为速度较快的CDN,我这里是用了jsdelivr中本来就有的L2Dwidget.min.jsL2Dwidget.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/[email protected]/lib/L2Dwidget.0.min.js"> </script> <script charset="utf-8" src="https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.min.js"> </script> <script>     L2Dwidget.init({         "model": {             jsonPath: "https://cdn.jsdelivr.net/gh/cn-night-ray/[email protected]/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>