添加看板娘

ChouCong ... 2022-01-30 日常
  • Live2d
大约 4 分钟

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

# 环境说明

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

# 看板娘添加到网站

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

警告

注:老版本,2022 年 5 月删除,请使用下方新版**

# 新版

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

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

# 个性化参数

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

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

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

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

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

<style type="text/css">
    #waifu-tips {
        top: -60px;               #对话框高度
        display:none !important;  #隐藏对话框
    }
</style>
1
2
3
4
5
6
  • 个性化演示如下,修改大小并指定首次加载模型;
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 插件版本

typecho 博客 Live2D 插件 插件相对于 Paul 的 Pio 插件,简化了很多,并且自动在手机端隐藏(Live2D 在手机端显示在百度站长移... (opens new window)

# 模型接口

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

# 移动端

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

# 更新记录

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

# 桌面版本

https://github.com/zenghongtu/PPet (opens new window)

这位大佬开发的桌面版本,WINMAC都有,Github上不去的可以在网盘ppet.zip (opens new window)下载,打开即用,模型链接已经配置好了。

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