刚把博客弄好,就开始各种折腾了,一直想加一个可以换装,可以对话的看板娘,于是看了各种教程,各种插件,添加看板娘,感觉都不太满意,自己动手。演示页
环境说明
- 需要 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>
插件版本
模型接口
换装的后端和模型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
280 comments
感谢分享!!!
非常感谢,参考参考
管他的俗话说深度
warning: call_user_func_array() expects parameter 1 to be a valid callback, class 'Live2D_Plugin' not found in /www/wwwroot/blog/var/Typecho/Plugin.php on line 446
报错
非常感谢,参考参考
非常感谢
客气客气!
向大佬学习
牛批啊,还得是大佬
你好啊
OωO 第N次来参考...
好的好的,随便多少次都行
向大佬学习
好
好
嗯
好
OωOOωOOωO
OωOOωOOωO
OωO
终于找到了,感谢分享。。
不客气 不客气 黑黑
OMO
OωO
OωO
再来看一次
好的好的
棒!!!
你也棒!
棒!!!
棒!!!
前来学习
拿走 感谢
OωO 客气客气
你好 想知道直接引入js文件后 不显示看板娘模型是什么情况呀
页面地址给一下,看看
弄好了 浏览器问题 给屏蔽了
噢噢 好的
发不出去 你评论过滤了 你扣扣多少 或者你加下我吧 就是评论扣扣
评论加了百度过滤的 (ノ°ο°)ノ
前来围观
康康 |´・ω・)ノ
好
证书过期了
啊啊啊 谢谢提醒,恢复了