Loading... > 刚把博客弄好,就开始各种折腾了,一直想加一个可以换装,可以对话的看板娘,于是看了各种教程,各种插件,添加看板娘,感觉都不太满意,自己动手。[演示页](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"> ``` ## 看板娘添加 - 您可以添加至看板娘到任何页面,只需要引入一个 `JS` 即可 - 其他博客或者网站主题将这一行代码加入` <head>` 或 `<body> `就完事。 - Handsome主题直接在:设置外观-开发者设置-自定义输出<code>body</code>尾部的<code>HTML</code>代码 <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> **注意**:如果网站启用了 `PJAX`,看板娘不必每页刷新,因此要注意将相关脚本放到 `PJAX` 刷新区域之外。 ## 个性化参数 **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> ``` ## 插件版本 <div class="preview"> <div class="post-inser post box-shadow-wrap-normal"> <a href="https://www.itggg.cn/fx/458.html" target="_blank" class="post_inser_a no-external-link no-underline-link"> <div class="inner-image bg" style="background-image: url(https://img-1259793745.itggg.cn/20201222210927.jpeg);background-size: cover;"></div> <div class="inner-content" > <p class="inser-title">typecho博客Live2D插件</p> <div class="inster-summary text-muted"> 插件相对于Paul的Pio插件,简化了很多,并且自动在手机端隐藏(Live2D在手机端显示在百度站长移... </div> </div> </a> <!-- .inner-content #####--> </div> <!-- .post-inser ####--> </div> ## 模型接口 换装的后端和模型<code>API</code>接口由我这边提供, ## 移动端 移动端默认隐藏,有些手机加载卡的一匹,设备宽度低于`768PX`时,自动隐藏 ## 更新记录 - `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`:新增模型,优化接口速度 ## 桌面版本 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 ``` <p></p></div></div></div> Last modification:April 4, 2022 © Allow specification reprint Support Appreciate the author AliPayWeChat Like 6 如果你想请我喝奶茶的话
235 comments
证书过期了
啊啊啊 谢谢提醒,恢复了
大佬,证书过期了
感谢提醒,已经恢复了ヾ(≧∇≦*)ゝ
前来围观
牛
(ノ°ο°)ノ看看
楼主威武!
我来看看φ( ̄∇ ̄o)
一行代码,看板娘抱回家(☆ω☆)
要看隐藏的东西
好的呢
|´・ω・)ノ谢谢分享(☆ω☆)
客气客气 ୧(๑•̀⌄•́๑)૭
OωO
想要
想要OωO
想要OωO
来看看
怎么放到左边捏
left
right
不是写了吗🌚
怎么放到左边捏
tql
|´・ω・)ノ谢谢分享
学习新知识!
感谢大佬!
ganxiefenxiang
⌇●﹏●⌇ 来看看作业~
大佬,牛啊
OωO抄作业抄作业
66666
1
牛蛙牛蛙
不错不错
大佬🐮🍺