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
190 comments
￣﹃￣ 研究研究
哈哈，随便研究
太顶了
进来学习一下看板娘的设置
学习，鼓励学习。
过来瞅瞅 ,这个怎么用,正好用的这个主题
给我网站也整上
大佬太强了
测评评论
tqltql
啥意思 哈哈
1
2
大佬tql
大佬，真的tqlψ(°Д°)ψ 麻麻他开挂了！
我这里js文件获取超时是为啥啊
超时？ 你服务器是哪里的？
就是本地，然后引入的时候加载文件响应太久失败了
那不会啊，只要你的浏览器可以访问，都是可以加载的。
嗯嗯，蟹蟹回答，我在//api前加https:就可以啦
(ノ°ο°)ノ前方高能预警
日常来访
感谢来访，已回访
太强了太强了
大佬请问博客左侧你的头像为什么那么大 那个是怎么设置的 初始的就好小
修改头像的大小就可以了，F12看CSS样式，想改多大就多大。
很强很强 和插件版本的有什么不一样吗
没啥不一样，对PJAX的优化好一点
tql
我看懂了
好无聊，我看了300遍就关了(｡•ˇ‸ˇ•｡)૭
tqltql
嘛玩意儿？ ::QQ:qq-14::
太强了
测试回复
噢，我擦 哈哈 ::aru:aru135::
很棒
博主厉害，膜拜
谢谢夸奖 老哥 ！
经验+15 金币+15
博主厉害了
插件版本体验下 ::QQ:qq-4::
冲冲冲，博主，加油！
有插件版本的了，要不要体验下 ::QQ:qq-15::
辛苦大大了~
哈哈 ，客气撒花！✿✿ヽ(ﾟ▽ﾟ)ノ✿
多读书，多看报，少吃零时，多睡觉 ::QQ:qq-4:: 我来白嫖了
属实牛逼，想问下博主多大了，什么时候我才能这么牛逼φ(￣∇￣o)
哈哈，过奖了，大学毕业而已
多读书，多看报，少吃零时，多睡觉。 ::QQ:qq-36::
俺来白嫖了～～
有咩有可以指定最先加载的接口呢？
可不可以把你的js压缩下吗，我感觉网络加载有延迟。
cdn是百度云的，不需要压缩，你可以ping一下地址 api.itggg.cn 。中国地区延迟不超过20ms
接口就一个
嗯好的，我想说的是最先加载的看板娘模型是否可以由接口指定。
最先加载的模型在前端模型的JS里面设置的和默认加载顺序，换装是随机请求的接口
好的，谢谢博主。
cdn地址是哪个啊？