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

环境说明

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

# 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 即可，简单到你可以添加到任何页面上
• 其他博客或者网站主题将这一行代码加入 或 即可
• Handsome 用户在：设置外观-开发者设置-自定义输出 body 尾部的 HTML 代码

#可选位置左右或右边
<script src="https://api.tiax.cn/live2d/left/"></script>


<script src="https://api.tiax.cn/live2d/right/"></script>

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

互动按钮

看板娘 waifu-tool 工具栏 共有 6 个互动按钮，默认隐藏，鼠标移动到人物上显示，如果您有一些 CSS 基础则可以自定义显隐。

  调用一言 API，在头顶对话框随机发言 Hitokoto - 一言

   JavaScript 小游戏，页面弹出一个白色的小飞机，发射子弹消除当前页面上的元素，空格 发射子弹，⬆️ ⬇️ ⬅️ ➡️ 控制移动

  顺序切换人物模型，到最后一个模型就循环

  随机切换人物衣服，点了没反应就说明只有一套衣服哟

  拍照，截图当前人物后保存 png 格式图片，图片大小为当前的人物容器大小。

  隐藏看板娘，隐藏后可通过页面左下角按钮呼出。

个性化

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

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

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

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

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

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

✅ 个性化演示如下，修改看板娘大小并指定首次加载模型，如果您有一些 CSS 基础，那么可以高度个性化，这里只是一个简单的例子；

<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 接口由我这边提供，目前收集了大搞20多人物，170+衣服，您可以添加后自己换装看，或者下载这个演示页面，本地查看。演示页

移动端

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

更新记录

桌面版本

https://github.com/zenghongtu/PPet

这位大佬开发的桌面版本， WIN 和 MAC 都有，打开即用，模型链接已经配置好了。

3代模型预览

live2d，3代模型预览，3代模型大多都带了背景，不适用于直接添加到页面上，适合做单页使用

3代预览