为你的博客添加一个萌萌哒的看板娘吧

Author：爆胎
发布时间：March 13, 2020
23723views
200 comments
1994 words
Categories：分享

## 前言

刚把博客弄好，就开始各种折腾了，一直想加一个可以换装，可以对话的看板娘，于是看了各种教程，各种插件，添加看板娘，感觉都不太满意，我是属于能不用插件就绝对不用插件的。没办法，自己动手丰衣足食，你打开这篇文章的时候相信已经看到右下角的<code>pio酱</code>了。从<code>github</code>髖来了源码，自己整合了一下，实现无插件添加，只用引入一个`JS`即可，纯小白也可以看得懂。

[演示页][1]

&nbsp;

## 环境需求

**环境提示**
</div>

**1** .需要<code>FontAwesome 4.7.0</code>支持，确保相关样式表已在页面中加载，否则换装隐藏等按钮无法正常显示，如果你不想要这些按钮就不用引入了。（如果网页中已经加载了任何版本的<code>Font Awesome</code>就不要重复加载了）

&nbsp;
**2** .其他博客或者网站主题将这一行代码加入` <head> `或 `<body> `就完事

&nbsp;
**3** .<code>Handsome</code>主题直接在：设置外观-开发者设置-自定义输出<code>header</code>头部的<code>HTML</code>代码
&nbsp;

![](https://img-1259793745.itggg.cn/20201222182659.jpg)

&nbsp;

## 添加到网站

**食用姿势**
</div>

**1**.其他博客或者网站主题将这一行代码加入` <head>` 或 `<body> `就完事。

&nbsp;
**2**.<code>Handsome</code>主题直接在：设置外观-开发者设置-自定义输出<code>body</code>尾部的<code>HTML</code>代码

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

**注意**：如果网站启用了 `PJAX`，看板娘不必每页刷新，因此要注意将相关脚本放到 PJAX 刷新区域之外。
&nbsp;
<div class="tip inlineBlock success">

这样就已经添加上了，是不是非常简单，刷新看效果吧☺，下面是接口的所有模型展示
</div>

&nbsp;

## 接口

换装的后端和模型<code>API</code>接口由我这边提供，有兴趣你也可以自己研究下模型，需要修改的内容比较多，此处不再赘述，给出链接自己看看。
&nbsp;
[https://github.com/xiazeyu/live2d-widget-models][2]
&nbsp;
[https://github.com/xiaoski/live2d_models_collection][3]

&nbsp;

## 移动端

移动端默认隐藏，有些手机加载卡的一匹，设备宽度低于768PX时，自动隐藏
</div>

&nbsp;

## 更新记录

**1**.`2020-05-06`：修复后端接口初始化，看板娘模型下方有`1CM`间隔
&nbsp;
**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`，缓存生效后可以达到毫秒换装，请自己体验

![](https://img-1259793745.itggg.cn/20201222182700.jpg)
&nbsp;
**3**.`2020-05-30`：优化CND换装，重构前端模型，现在的模型看起来效果更精细
&nbsp;
**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

&nbsp;

## 结语

自己乐于建造稳定可靠的服务给大家用，只要博客还在，后端接口和前端模型应该会一直提供下去

[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

如果你想请我喝奶茶的话

200 comments

noob
1 Mouth Ago

大佬🐮🍺

Reply
菜狗
1 Mouth Ago

芜湖

Reply
1. 爆胎
  1 Mouth Ago
  
  @菜狗
  
  起飞！⌇●﹏●⌇
  
  Reply
小有名气的男士
3 Mouths Ago

OωO

Reply
1. 爆胎
  3 Mouths Ago
  
  @小有名气的男士
  
  66666
  
  Reply
小有名气的道士
3 Mouths Ago

学习学习

Reply
1. 爆胎
  3 Mouths Ago
  
  @小有名气的道士
  
  天天向上 (๑•̀ㅁ•́ฅ)
  
  Reply
Owen
3 Mouths Ago

谢谢啦

Reply
1. 爆胎
  3 Mouths Ago
  
  @Owen
  
  啊哈哈不客气噢！
  
  Reply
祥云瑞雪
4 Mouths Ago

瞧瞧( ๑´•ω•) "(ㆆᴗㆆ)

Reply
神月夜
5 Mouths Ago

￣﹃￣研究研究

Reply
1. 爆胎
  4 Mouths Ago
  
  @神月夜
  
  哈哈，随便研究
  
  Reply
cx
5 Mouths Ago

太顶了

Reply
橙橙橙子哥_
5 Mouths Ago

进来学习一下看板娘的设置

Reply
1. 爆胎
  5 Mouths Ago
  
  @橙橙橙子哥_
  
  学习，鼓励学习。
  
  Reply
yuanbaoc
5 Mouths Ago

过来瞅瞅 ,这个怎么用,正好用的这个主题

Reply
AnNing
5 Mouths Ago

给我网站也整上

Reply
pppoe
5 Mouths Ago

大佬太强了

Reply
热心网友
6 Mouths Ago

测评评论

Reply
dio
6 Mouths Ago

tqltql

Reply
1. 爆胎
  6 Mouths Ago
  
  @dio
  
  啥意思哈哈
  
  Reply
1
6 Mouths Ago

1

Reply
1. 爆胎
  6 Mouths Ago
  
  @1
  
  2
  
  Reply
Sprout
6 Mouths Ago

大佬tql

Reply
龙
6 Mouths Ago

大佬，真的tqlψ(°Д°)ψ 麻麻他开挂了！

Reply
1. 龙
  6 Mouths Ago
  
  @龙
  
  我这里js文件获取超时是为啥啊
  
  Reply
  1. 爆胎
    6 Mouths Ago
    
    @龙
    
    超时？你服务器是哪里的？
    
    Reply
    
    龙
    6 Mouths Ago
    
    @爆胎
    
    就是本地，然后引入的时候加载文件响应太久失败了
    
    Reply
    
    爆胎
    6 Mouths Ago
    
    @龙
    
    那不会啊，只要你的浏览器可以访问，都是可以加载的。
    
    Reply
    
    龙
    6 Mouths Ago
    
    @爆胎
    
    嗯嗯，蟹蟹回答，我在//api前加https:就可以啦
    
    Reply
南瓜奶酪
6 Mouths Ago

该评论仅登录用户及评论双方可见

Reply
1. 爆胎
  6 Mouths Ago
  
  @南瓜奶酪
  
  该评论仅登录用户及评论双方可见
  
  Reply
花里胡哨
7 Mouths Ago

(ノ°ο°)ノ前方高能预警

Reply
南瓜奶酪
7 Mouths Ago

日常来访

Reply
1. 爆胎
  7 Mouths Ago
  
  @南瓜奶酪
  
  感谢来访，已回访
  
  Reply
啊啊啊
8 Mouths Ago

太强了太强了

Reply
张团
8 Mouths Ago

大佬请问博客左侧你的头像为什么那么大那个是怎么设置的初始的就好小

Reply
1. 爆胎
  8 Mouths Ago
  
  @张团
  
  修改头像的大小就可以了，F12看CSS样式，想改多大就多大。
  
  Reply
张团
8 Mouths Ago

很强很强和插件版本的有什么不一样吗

Reply
1. 爆胎
  8 Mouths Ago
  
  @张团
  
  没啥不一样，对PJAX的优化好一点
  
  Reply
南瓜奶酪
8 Mouths Ago

tql

Reply
1. 爆胎
  8 Mouths Ago
  
  @南瓜奶酪
  
  我看懂了
  好无聊，我看了300遍就关了(｡•ˇ‸ˇ•｡)૭
  
  Reply
gyrojeff
10 Mouths Ago

tqltql

Reply
1. 爆胎
  9 Mouths Ago
  
  @gyrojeff
  
  嘛玩意儿？ ::QQ:qq-14::
  
  Reply
  1. wibus
    9 Mouths Ago
    
    @爆胎
    
    太强了
    
    Reply
    
    爆胎
    9 Mouths Ago
    
    @wibus
    
    测试回复
    
    Reply
    
    爆胎
    9 Mouths Ago
    
    @wibus
    
    噢，我擦哈哈 ::aru:aru135::
    
    Reply
偷得浮生半日闲
10 Mouths Ago

很棒

Reply
偷得浮生半日闲
10 Mouths Ago

博主厉害，膜拜

Reply
1. 爆胎
  10 Mouths Ago
  
  @偷得浮生半日闲
  
  谢谢夸奖老哥！
  经验+15 金币+15
  
  Reply
bba
10 Mouths Ago

博主厉害了

Reply
1. 爆胎
  10 Mouths Ago
  
  @bba
  
  插件版本体验下 ::QQ:qq-4::
  
  Reply
凉心
11 Mouths Ago

冲冲冲，博主，加油！

Reply
1. 爆胎
  11 Mouths Ago
  
  @凉心
  
  有插件版本的了，要不要体验下 ::QQ:qq-15::
  
  Reply
五月竺葵
11 Mouths Ago

辛苦大大了~

Reply
1. 爆胎
  11 Mouths Ago
  
  @五月竺葵
  
  哈哈，客气撒花！✿✿ヽ(ﾟ▽ﾟ)ノ✿
  
  Reply