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

Author：爆胎
发布时间：March 13, 2020
41467 views
235 comments
8750 words
Categories：分享

> 刚把博客弄好，就开始各种折腾了，一直想加一个可以换装，可以对话的看板娘，于是看了各种教程，各种插件，添加看板娘，感觉都不太满意，自己动手。[演示页](https://api.itggg.cn/dome.html)

## 环境说明

- 需要  [Font Awesome ](http://www.fontawesome.com.cn/) 支持，确保相关样式表已在页面中加载，否则换装等按钮不显示，如果不想要这些按钮就不用引入了（如果网页中已经加载了任何版本的 `Font Awesome` 就不要重复加载了）
- 其他博客或者网站主题将这一行代码加入`<head>`或 `<body> `即可。
- `Handsome`用户直接在：设置外观-开发者设置-自定义输出<code>header</code>头部的<code>HTML</code>代码
- 最近 `jsdelivr `的国内速度已经不行了，elemecdn 的可以选择，当然也可以下载放在本地，看各位喜好 ([font-awesome-4.7.0.zip](https://p.tiax.cn/ALIYUN/font-awesome-4.7.0.zip))

```html
# jsdelivr 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

# elemecdn
<link rel="stylesheet" href="https://npm.elemecdn.com/font-awesome@4.7.0/css/font-awesome.min.css">
```

&nbsp;

## 看板娘添加
- 您可以添加至看板娘到任何页面，只需要引入一个 `JS` 即可
- 其他博客或者网站主题将这一行代码加入` <head>` 或 `<body> `就完事。
- Handsome主题直接在：设置外观-开发者设置-自定义输出<code>body</code>尾部的<code>HTML</code>代码

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

**注意**：如果网站启用了 `PJAX`，看板娘不必每页刷新，因此要注意将相关脚本放到 `PJAX` 刷新区域之外。

&nbsp;

## 个性化参数

**1、指定首次加载的模型和皮肤** , `JS` 传参即可，`modelId `是模型 ，`modelTexturesId` 是模型皮肤，模型ID和皮肤ID，可以通过演示页面`F12`打开控制台日志查看。

```html
localStorage.setItem('modelId', '7');
localStorage.setItem('modelTexturesId', '3');
```

**2、自定义看板娘大小**，`CSS` 自定义即可，类名称 `#waifu #live2d`  ，示例如下；  注意高度和宽度需要一样，因为容器是个正方形，不一致会变形。

```css
<style type="text/css">
    #waifu #live2d {
        height: 500px!important;
        width: 500px!important;
    }
</style>
```

**3、隐藏对话框和对话框高度**，`CSS` 自定义即可，类名称 `#waifu-tips`  ，示例如下；

```css
<style type="text/css">
    #waifu-tips {
        top: -60px;               #对话框高度
        display:none !important;  #隐藏对话框
    }
</style>
```

- 个性化演示如下，修改大小并指定首次加载模型；

```html
<style type="text/css">
    #waifu #live2d {
        height: 500px!important;
        width: 500px!important;
    }
    #waifu-tips {
        top: -60px;
        /*display:none !important;隐藏对话框*/
    }
</style>
<script>
    localStorage.setItem('modelId', '7');
    localStorage.setItem('modelTexturesId', '3');
</script>
```

&nbsp;

## 插件版本

<div class="inner-content" >
<p class="inser-title">typecho博客Live2D插件</p>
<div class="inster-summary text-muted">
&nbsp;插件相对于Paul的Pio插件，简化了很多，并且自动在手机端隐藏（Live2D在手机端显示在百度站长移...
</div>
</div>
</a>

</div>

</div>

&nbsp;

## 模型接口

换装的后端和模型<code>API</code>接口由我这边提供，

&nbsp;

## 移动端

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

&nbsp;

## 更新记录

- `2020-05-06`：修复后端接口初始化，看板娘模型下方有`1CM`间隔
- `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`，缓存生效后可以达到毫秒换装，请自己体验
- `2020-05-30`：优化CND换装，重构前端模型，现在的模型看起来效果更精细
- `2020-10-29`：修复在某些博客隐藏看板娘后，左侧召唤按钮被遮挡的`BUG`
- `2022-03-10`：优化接口速度，精简代码
- `2022-03-19`：新增模型，优化接口速度

&nbsp;

## 桌面版本

https://github.com/zenghongtu/PPet

这位大佬开发的桌面版本，`WIN`和`MAC`都有，`Github`上不去的可以在网盘[ppet.zip](https://p.tiax.cn/ALIYUN/ppet.zip)下载，打开即用，模型链接已经配置好了。

接口模型`json`链接如下，模型会不定时更新~
<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0868dd2ac2fb515d994c2324c80375f220" aria-expanded="true"><div class="accordion-toggle"><span>模型JSON</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-0868dd2ac2fb515d994c2324c80375f220" class="collapse collapse-content"><p></p>

```html
https://api.itggg.cn/live2d_api/model/benghuai/rest (1)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (10)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (11)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (12)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (13)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (14)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (16)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (17)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (18)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (19)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (2)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (3)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (4)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (5)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (6)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (7)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (8)/index.json
https://api.itggg.cn/live2d_api/model/benghuai/rest (9)/index.json
https://api.itggg.cn/live2d_api/model/bilibili-live/22/index.json
https://api.itggg.cn/live2d_api/model/bilibili-live/33/index.json
https://api.itggg.cn/live2d_api/model/dandumoxing/illyasviel/index.json
https://api.itggg.cn/live2d_api/model/dandumoxing/liang/index.json
https://api.itggg.cn/live2d_api/model/dandumoxing/live_uu/index.json
https://api.itggg.cn/live2d_api/model/dandumoxing/sagiri/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn/22_high/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn/33_high/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn/hibiki/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn3/armor1/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn3/armor2/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn3/armor3/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn3/armor4/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn3/armor5/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn4/golden/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn4/golden1/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn4/golden2/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn5/shield/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn5/shield1/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn5/shield2/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn6/date_16/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn6/hallo_16/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn6/haru01/index.json
https://api.itggg.cn/live2d_api/model/itggg_cn6/haru02/index.json
https://api.itggg.cn/live2d_api/model/jidongzhangdou/leila/index.json
https://api.itggg.cn/live2d_api/model/jidongzhangdou/madierda/index.json
https://api.itggg.cn/live2d_api/model/jidongzhangdou/siluokayi/index.json
https://api.itggg.cn/live2d_api/model/jidongzhangdou/xinxiya/index.json
https://api.itggg.cn/live2d_api/model/Potion-Maker/Pio/index.json
https://api.itggg.cn/live2d_api/model/Potion-Maker/Tia/index.json
https://api.itggg.cn/live2d_api/model/rest/1/index.json
https://api.itggg.cn/live2d_api/model/rest/2/index.json
https://api.itggg.cn/live2d_api/model/rest1/1/index.json
https://api.itggg.cn/live2d_api/model/rest1/2/index.json
https://api.itggg.cn/live2d_api/model/rest10/1/index.json
https://api.itggg.cn/live2d_api/model/rest10/2/index.json
https://api.itggg.cn/live2d_api/model/rest11/1/index.json
https://api.itggg.cn/live2d_api/model/rest11/2/index.json
https://api.itggg.cn/live2d_api/model/rest11/3/index.json
https://api.itggg.cn/live2d_api/model/rest12/destroy/index.json
https://api.itggg.cn/live2d_api/model/rest12/normal/index.json
https://api.itggg.cn/live2d_api/model/rest13/destroy/index.json
https://api.itggg.cn/live2d_api/model/rest13/normal/index.json
https://api.itggg.cn/live2d_api/model/rest14/destroy/index.json
https://api.itggg.cn/live2d_api/model/rest14/normal/index.json
https://api.itggg.cn/live2d_api/model/rest15/destroy/index.json
https://api.itggg.cn/live2d_api/model/rest15/normal/index.json
https://api.itggg.cn/live2d_api/model/rest16/destroy/index.json
https://api.itggg.cn/live2d_api/model/rest16/normal/index.json
https://api.itggg.cn/live2d_api/model/rest17/destroy/index.json
https://api.itggg.cn/live2d_api/model/rest17/normal/index.json
https://api.itggg.cn/live2d_api/model/rest2/1/index.json
https://api.itggg.cn/live2d_api/model/rest2/2/index.json
https://api.itggg.cn/live2d_api/model/rest2/3/index.json
https://api.itggg.cn/live2d_api/model/rest3/1/index.json
https://api.itggg.cn/live2d_api/model/rest3/2/index.json
https://api.itggg.cn/live2d_api/model/rest4/1/index.json
https://api.itggg.cn/live2d_api/model/rest4/2/index.json
https://api.itggg.cn/live2d_api/model/rest5/1/index.json
https://api.itggg.cn/live2d_api/model/rest5/2/index.json
https://api.itggg.cn/live2d_api/model/rest6/1/index.json
https://api.itggg.cn/live2d_api/model/rest6/2/index.json
https://api.itggg.cn/live2d_api/model/rest7/1/index.json
https://api.itggg.cn/live2d_api/model/rest7/2/index.json
https://api.itggg.cn/live2d_api/model/rest8/1/index.json
https://api.itggg.cn/live2d_api/model/rest8/2/index.json
https://api.itggg.cn/live2d_api/model/rest9/1/index.json
https://api.itggg.cn/live2d_api/model/rest9/2/index.json
https://api.itggg.cn/live2d_api/model/ShizukuTalk/shizuku-48/index.json
https://api.itggg.cn/live2d_api/model/ShizukuTalk/shizuku-pajama/index.json
https://api.itggg.cn/live2d_api/model/VenusScramble/rest (1)/live2d/index.json
https://api.itggg.cn/live2d_api/model/VenusScramble/rest (14)/live2d/index.json
https://api.itggg.cn/live2d_api/model/VenusScramble/rest (15)/live2d/index.json
https://api.itggg.cn/live2d_api/model/VenusScramble/rest (16)/live2d/index.json
https://api.itggg.cn/live2d_api/model/VenusScramble/rest (18)/live2d/index.json
https://api.itggg.cn/live2d_api/model/VenusScramble/rest (2)/live2d/index.json
```

Last modification：April 4, 2022

如果你想请我喝奶茶的话

235 comments

brokenpoems
3 Weeks Ago

证书过期了

Reply
1. 爆胎
  3 Weeks Ago
  
  @brokenpoems
  
  啊啊啊谢谢提醒，恢复了
  
  Reply
yoke
3 Weeks Ago

大佬，证书过期了

Reply
1. 爆胎
  3 Weeks Ago
  
  @yoke
  
  感谢提醒，已经恢复了ヾ(≧∇≦*)ゝ
  
  Reply
浮生若梦
4 Weeks Ago

前来围观

Reply
小贤
4 Weeks Ago

牛

Reply
brokenpoems
4 Weeks Ago

(ノ°ο°)ノ看看

Reply
艾尼 1
1 Mouth Ago

楼主威武！

Reply
Grape
1 Mouth Ago

我来看看φ(￣∇￣o)

Reply
1. 爆胎
  1 Mouth Ago
  
  @Grape
  
  一行代码，看板娘抱回家(☆ω☆)
  
  Reply
110怕不怕
1 Mouth Ago

要看隐藏的东西

Reply
1. 爆胎
  1 Mouth Ago
  
  @110怕不怕
  
  好的呢
  
  Reply
小羊睡着了
1 Mouth Ago

|´・ω・)ノ谢谢分享(☆ω☆)

Reply
1. 爆胎
  1 Mouth Ago
  
  @小羊睡着了
  
  客气客气 ୧(๑•̀⌄•́๑)૭
  
  Reply
A
1 Mouth Ago

OωO

Reply
A
1 Mouth Ago

想要

Reply
A
1 Mouth Ago

想要OωO

Reply
11
1 Mouth Ago

想要OωO

Reply
大名鼎鼎的大黄
1 Mouth Ago

来看看

Reply
知名的打工人
1 Mouth Ago

怎么放到左边捏

Reply
1. 爆胎
  1 Mouth Ago
  
  @知名的打工人
  
  left
  right
  不是写了吗🌚
  
  Reply
知名的打工人
1 Mouth Ago

怎么放到左边捏

Reply
松鼠
2 Mouths Ago

tql

Reply
白鸽
2 Mouths Ago

|´・ω・)ノ谢谢分享

Reply
大名鼎鼎的道士
2 Mouths Ago

学习新知识！

Reply
zc
2 Mouths Ago

感谢大佬！

Reply
kevin
2 Mouths Ago

ganxiefenxiang

Reply
安逸
2 Mouths Ago

⌇●﹏●⌇ 来看看作业~

Reply
yoke
2 Mouths Ago

大佬,牛啊

Reply
lnran
2 Mouths Ago

OωO抄作业抄作业

Reply
666
2 Mouths Ago

66666

Reply
彭于晏
3 Mouths Ago

不戳不戳

Reply
yddes
3 Mouths Ago

1

Reply
牛
6 Mouths Ago

牛蛙牛蛙

Reply
www.ghabk.cn
6 Mouths Ago

不错不错

Reply
noob
9 Mouths Ago

大佬🐮🍺

Reply

网易云日推
浏览次数: 54770
为你的博客添加一个萌萌哒的看板娘吧
浏览次数: 41468
氛围音乐
浏览次数: 37822
OneManager搭建网盘详细过程
浏览次数: 10567
渐变响应式 HTML5 导航页
浏览次数: 7770

挺胸的人士
不支持抖音，不知道是去掉了这个支持，还是rsshub 本身路由...
陶小桃Blog
打错字了，记得-->觉得有种
陶小桃Blog
我记得去打漂亮国官网啊，直接插上五星红旗得了，，，没啥高级技术...
小小
你好，公众号文章可以订阅吗？怎么订阅？谢谢。
等一只柴犬
我也返回存在恶意推广

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

爆胎 • 2020 年 03 月 13 日

## 环境说明

```html
# jsdelivr 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

# elemecdn
<link rel="stylesheet" href="https://npm.elemecdn.com/font-awesome@4.7.0/css/font-awesome.min.css">
```

&nbsp;

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

**注意**：如果网站启用了 `PJAX`，看板娘不必每页刷新，因此要注意将相关脚本放到 `PJAX` 刷新区域之外。

&nbsp;

## 个性化参数

```html
localStorage.setItem('modelId', '7');
localStorage.setItem('modelTexturesId', '3');
```

**2、自定义看板娘大小**，`CSS` 自定义即可，类名称 `#waifu #live2d`  ，示例如下；  注意高度和宽度需要一样，因为容器是个正方形，不一致会变形。

```css
<style type="text/css">
    #waifu #live2d {
        height: 500px!important;
        width: 500px!important;
    }
</style>
```

**3、隐藏对话框和对话框高度**，`CSS` 自定义即可，类名称 `#waifu-tips`  ，示例如下；

```css
<style type="text/css">
    #waifu-tips {
        top: -60px;               #对话框高度
        display:none !important;  #隐藏对话框
    }
</style>
```

- 个性化演示如下，修改大小并指定首次加载模型；

&nbsp;

## 插件版本

&nbsp;

## 模型接口

换装的后端和模型<code>API</code>接口由我这边提供，

&nbsp;

## 移动端

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

&nbsp;

## 更新记录

&nbsp;

## 桌面版本

https://github.com/zenghongtu/PPet

这位大佬开发的桌面版本，`WIN`和`MAC`都有，`Github`上不去的可以在网盘[ppet.zip](https://p.tiax.cn/ALIYUN/ppet.zip)下载，打开即用，模型链接已经配置好了。

接口模型`json`链接如下，模型会不定时更新~
<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ba88c99115c4f3b6d5c0583fe4e3a8a8100" aria-expanded="true"><div class="accordion-toggle"><span>模型JSON</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ba88c99115c4f3b6d5c0583fe4e3a8a8100" class="collapse collapse-content"><p></p>

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

Leave a Comment Cancel reply

235 comments

网易云日推

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

氛围音乐

OneManager搭建网盘详细过程

渐变响应式 HTML5 导航页

typecho博客Live2D插件

Windows最强终端 Terminal安装和美化

灵光一现的用正则表达式处理大规模代码

云雾森林

PostMan接口压力测试

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