【美化博客园样式历程】添加live2D看板娘
不知道该不该说二次元的力量是不是强大,有好多博客都写了相关的内容,非常可惜的是,我也是一名阿宅,不弄个看板娘说不过去。
代码
首先,需要申请博客园的 js 权限 ,步骤是:管理 -> 设置 -> js权限申请
接着就到页面html代码添加如下代码
- 引入 live2d 的 js:
要注意书写规范,同时奇怪的地方在于原来博客园默认的JS
也不是HTML5
中的type="text/javascript"
,没有这个玩意,我们是无法做到JSONP
跨域的
不然会报如下的错误:
Uncaught ReferenceError: L2Dwidget is not defined
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
- 初始化 js ,加载模型
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json",
"scale": 1
},
"display": {
"position": "right", //模型的表现位置
"width": 150, //模型的宽度
"height": 300, //模型的高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7, //模型默认透明度
"opacityOnHover": 0.2
}
});
</script>
换模型
假如希望换成其他的模型,可以修改 jsonPath 的路径,格式为:https://unpkg.com/2D模型全名称@1.0.5/assets/模型.model.json ,在github中可选的模型有~,当然也可以看参考链接。
另外在另一篇博客的也提供了一个各个live2d人物的显示效果的网站
最终效果
现在右下角就有那只白猫了
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版