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
学习一下，折腾折腾
欢迎学习
学习学习
欢迎学习