刚把博客弄好，就开始各种折腾了，一直想加一个可以换装，可以对话的看板娘，于是看了各种教程，各种插件，添加看板娘，感觉都不太满意，自己动手。演示页

环境说明

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

 

看板娘添加

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

此处内容需要评论回复后（审核通过）方可阅读。

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

 

个性化参数

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

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

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

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

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

<style type="text/css">
    #waifu-tips {
        top: -60px;               #对话框高度
        display:none !important;  #隐藏对话框
    }
</style>
  • 个性化演示如下，修改大小并指定首次加载模型；
<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>

 

插件版本

typecho博客Live2D插件

 插件相对于Paul的Pio插件，简化了很多，并且自动在手机端隐藏（Live2D在手机端显示在百度站长移...

 

模型接口

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

 

移动端

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

 

更新记录

  • 2020-05-06：修复后端接口初始化，看板娘模型下方有1CM间隔
  • 2020-05-30：随着接口访问量日益巨大，截止5月底，已经请求了600万次了 服务器负载天天90%,为了满足大家的需要，现在把接口数据都缓存在百度云CDN的，刷新时间2h，缓存生效后可以达到毫秒换装，请自己体验
  • 2020-05-30：优化CND换装，重构前端模型，现在的模型看起来效果更精细
  • 2020-10-29：修复在某些博客隐藏看板娘后，左侧召唤按钮被遮挡的BUG
  • 2022-03-10：优化接口速度，精简代码
  • 2022-03-19：新增模型，优化接口速度

 

桌面版本

https://github.com/zenghongtu/PPet

这位大佬开发的桌面版本，WIN和MAC都有，Github上不去的可以在网盘ppet.zip下载，打开即用，模型链接已经配置好了。

接口模型json链接如下，模型会不定时更新~

模型JSON 

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
© Allow specification reprint
如果你想请我喝奶茶的话