添加看板娘

Posted 2022-01-30. 815 words. 5 min read. 0 views.

🌶 过期警告： 本页面距今已有 1183 天未更新，年久失修，内容可能有所偏颇，还请仔细甄别！

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

环境说明

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

1
# jsdelivr
2
<link
3
  rel="stylesheet"
4
  href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"
5
/>
6

7
# elemecdn
8
<link
9
  rel="stylesheet"
10
  href="https://npm.elemecdn.com/font-awesome@4.7.0/css/font-awesome.min.css"
11
/>

看板娘添加到网站

其他博客或者网站主题将这一行代码加入<head> 或 <body>就完事。
Handsome 主题直接在：设置外观-开发者设置-自定义输出body尾部的HTML代码

新版

1
<script src="https://api.itggg.cn/live2dnew/left/index.js"></script>
2
<script src="https://api.itggg.cn/live2dnew/right/index.js"></script>
3
#可选位置左右或右边

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

个性化参数

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

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

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

1
<style type="text/css">
2
    #waifu #live2d {
3 collapsed lines
3
        height: 500px!important;
4
        width: 500px!important;
5
    }
6
</style>

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

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

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

1
<style type="text/css">
2
  #waifu #live2d {
3
    height: 500px !important;
4
    width: 500px !important;
5
  }
6
  #waifu-tips {
7
    top: -60px;
8
    /*display:none !important;隐藏对话框*/
9
  }
10
</style>
11
<script>
12
  localStorage.setItem('modelId', '7')
13
  localStorage.setItem('modelTexturesId', '3')
14
</script>

插件版本

typecho 博客 Live2D 插件插件相对于 Paul 的 Pio 插件，简化了很多，并且自动在手机端隐藏

模型接口

换装的后端和模型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：新增模型，优化接口速度