Loading... ## 前言 刚把博客弄好,就开始各种折腾了,一直想加一个可以换装,可以对话的看板娘,于是看了各种教程,各种插件,添加看板娘,感觉都不太满意,我是属于能不用插件就绝对不用插件的。没办法,自己动手丰衣足食,你打开这篇文章的时候相信已经看到右下角的<code>pio酱</code>了。从<code>github</code>髖来了源码,自己整合了一下,实现无插件添加,只用引入一个`JS`即可,纯小白也可以看得懂。 [演示页][1] ## 环境需求 <div class="tip inlineBlock warning"> **环境提示** </div> **1** .需要<code>FontAwesome 4.7.0</code>支持,确保相关样式表已在页面中加载,否则换装隐藏等按钮无法正常显示,如果你不想要这些按钮就不用引入了。(如果网页中已经加载了任何版本的<code>Font Awesome</code>就不要重复加载了) **2** .其他博客或者网站主题将这一行代码加入` <head> `或 `<body> `就完事 **3** .<code>Handsome</code>主题直接在:设置外观-开发者设置-自定义输出<code>header</code>头部的<code>HTML</code>代码 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">  ## 添加到网站 <div class="tip inlineBlock info"> **食用姿势** </div> **1**.其他博客或者网站主题将这一行代码加入` <head>` 或 `<body> `就完事。 **2**.<code>Handsome</code>主题直接在:设置外观-开发者设置-自定义输出<code>body</code>尾部的<code>HTML</code>代码 <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> **注意**:如果网站启用了 `PJAX`,看板娘不必每页刷新,因此要注意将相关脚本放到 PJAX 刷新区域之外。 <div class="tip inlineBlock success"> 这样就已经添加上了,是不是非常简单,刷新看效果吧☺,下面是接口的所有模型展示 </div> ## 接口 换装的后端和模型<code>API</code>接口由我这边提供,有兴趣你也可以自己研究下模型,需要修改的内容比较多,此处不再赘述,给出链接自己看看。 [https://github.com/xiazeyu/live2d-widget-models][2] [https://github.com/xiaoski/live2d_models_collection][3] ## 移动端 <div class="tip inlineBlock warning"> 移动端默认隐藏,有些手机加载卡的一匹,设备宽度低于768PX时,自动隐藏 </div> ## 更新记录 **1**.`2020-05-06`:修复后端接口初始化,看板娘模型下方有`1CM`间隔 **2**.`2020-05-30`:随着接口访问量日益巨大,截止<code>5</code>月底,已经请求了<code>600</code>万次了 <img src="https://www.itggg.cn/usr/themes/handsome/assets/img/emotion/aru/dead.png" class="emotion-aru"> 服务器负载天天<code>90%</code>,为了满足大家的需要,现在把接口数据都缓存在百度云`CDN`的,刷新时间`2h`,缓存生效后可以达到毫秒换装,请自己体验  **3**.`2020-05-30`:优化CND换装,重构前端模型,现在的模型看起来效果更精细 **4**.`2020-10-29`:修复在某些博客隐藏看板娘后,左侧召唤按钮被遮挡的`BUG` ## 桌面版本 https://github.com/amorist/platelet https://github.com/akiroz/Live2D-Widget https://github.com/zenghongtu/PPet https://github.com/LikeNeko/L2dPetForMac ## 结语 自己乐于建造稳定可靠的服务给大家用,只要博客还在,后端接口和前端模型应该会一直提供下去 [1]: https://api.itggg.cn/live2d.html [2]: https://github.com/xiazeyu/live2d-widget-models [3]: https://github.com/xiaoski/live2d_models_collection Last modification:December 22nd, 2020 at 06:27 pm © 允许规范转载 Support 如果你想请我喝奶茶的话 ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat
(ノ°ο°)ノ前方高能预警
日常来访
感谢来访,已回访
太强了太强了
大佬请问博客左侧你的头像为什么那么大 那个是怎么设置的 初始的就好小
修改头像的大小就可以了,F12看CSS样式,想改多大就多大。
很强很强 和插件版本的有什么不一样吗
没啥不一样,对PJAX的优化好一点
tql
我看懂了
好无聊,我看了300遍就关了(。•ˇ‸ˇ•。)૭
tqltql
嘛玩意儿?
太强了
测试回复
噢,我擦 哈哈
很棒
博主厉害,膜拜
谢谢夸奖 老哥 !
经验+15 金币+15
博主厉害了
插件版本体验下
冲冲冲,博主,加油!
有插件版本的了,要不要体验下
辛苦大大了~
哈哈 ,客气撒花!✿✿ヽ(゚▽゚)ノ✿
多读书,多看报,少吃零时,多睡觉
我来白嫖了
属实牛逼,想问下博主多大了,什么时候我才能这么牛逼φ( ̄∇ ̄o)
哈哈,过奖了,大学毕业而已
多读书,多看报,少吃零时,多睡觉。
俺来白嫖了~~
有咩有可以指定最先加载的接口呢?
可不可以把你的js压缩下吗,我感觉网络加载有延迟。
cdn是百度云的,不需要压缩,你可以ping一下地址 api.itggg.cn 。中国地区延迟不超过20ms
接口就一个
嗯好的,我想说的是最先加载的看板娘模型是否可以由接口指定。
最先加载的模型在前端模型的JS里面设置的和默认加载顺序,换装是随机请求的接口
好的,谢谢博主。
cdn地址是哪个啊?
搞丢了,再来嫖一下
随便嫖
(ノ°ο°)ノ前方高能预警)
拿走了,感谢博主!!
看上就带走
撒花!✿✿ヽ(゚▽゚)ノ✿
厉害啊,博主,加油!
不客气经验+15 金币+15
我来白嫖了= =
我想要板娘
拿走就是
o(////▽////)q
拿走
厉害厉害!!!!!!!!
欢迎白嫖
来了哦
来了噢
白嫖
欢迎白嫖和推荐给朋友!
来嫖一下
欢迎白嫖和推荐给朋友!
看看
OωO谢谢博主୧(๑•̀⌄•́๑)૭
哈哈,不客气啊|´・ω・)ノ
学习一波~
欢迎学习 ヾ(≧∇≦*)ゝ
白嫖一波
Rabbitmq
有点意思
学习一波
又来学习,欢迎
感谢大佬,正在研究如何在博客上展示自己的LIVE2D模型
直接引入这个JS就完事
主要是想自定义展示展示自己的live2d模型,但找不到支持moc3的插件
如此,那后端接口需要自己搞搞了。
学习一波
欢迎学习
我来折腾一下,学习一波
欢迎学习
来学习学习~
欢迎学习 老哥
我又来了阿哈哈哈哈哈
欢迎欢迎
博主大大的回复邮箱提醒是怎么弄的呀?好高级
自己写的样式
大佬牛批!!
哈哈 ,过奖过奖,兄弟
白嫖一个
footer呢
啥footer?
白嫖一个OωO
欢迎白嫖
白嫖!
感谢作者分享
欢迎白嫖
再次来访,嘿嘿
欢迎欢迎
欢迎到来
留名留名
来,come on
学习一下,折腾折腾
欢迎学习
学习学习
欢迎学习