用原作者的话说就是：一直想加一个可以换装，可以对话的看板娘，于是看了各种教程，各种插件，添加看板娘，感觉都不太满意，自己动手。 演示页1，演示页2点击演示页即可查看演示.
搭建环境说明
- 需要 Font Awesome - 中文网 支持，确保相关样式表已在页面中加载，否则换装等按钮不显示，如果不想要这些按钮就不用引入了（如果网页中已经加载了任何版本的
Font Awesome就不要重复加载了） - 博客或者网站主题将这一行代码加入
<head>或<body>即可。 有后台的博客/网站 可以在后台自定义头部内输入,
Cuteen主题用户直接在：进入后台-控制台-外观-设置外观-增强设置-头部自定义内容输入需要引入的HTML代码Handsome主题用户直接在：设置外观-开发者设置-自定义输出header头部的HTML代码
- 原本是放在
jsdelivr来着,但是现在jsdelivr在国内速度已经不行啦,现推荐一些其他的,速度也很快,当然了你也可以放在本地. - 看到
看板娘使用的是Font Awesome 4.7.0版本,有点久远啦,想使用图标的话有些图标已经更新了很多无法使用,下面更新一条新版的Font Awesome也可以使用Font Awesome 6 Pro的内容,喜欢用`Font Awesome图标的用户可以使用下面6pro版本的链接.
<!-- 1 jsdelivr 的 -- 不推荐使用 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<!-- 2 npm-elemecdn -- 推荐使用 -->
<!--Font Awesome 4.7.0,单纯使用看板娘的可以选择这个-->
<link rel="stylesheet" href="https://npm.elemecdn.com/font-awesome@4.7.0/css/font-awesome.min.css">
<!-- 3 tianli jsdelivr npm(腾讯云cdn) -- "备选使用1"-->
<!--Font Awesome 6 pro,喜欢用FontAwesome图标的可以选择第五个-->
<!--因为tianli 腾讯云CDN限制package≥100M 无法使用6pro模式-->
<link rel="stylesheet" href="https://cdn1.tianli0.top/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<!-- 4 jsdelivr.io -- "备选使用2"-->
<!--Font Awesome 6 pro,喜欢用FontAwesome图标的可以选择第五个-->
<!--因为CDN限制package≥100M 无法使用6pro模式-->
<link rel="stylesheet" href="https://jsdelivr.panbaidu.cn/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<!-- 5 npm-elemecdn -- 推荐使用-->
<!--Font Awesome 6 pro,喜欢用FontAwesome图标的可以选择这个-->
<link rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.0.1/css/fontawesome.min.css">
<!-- ------------------------------------------------------ -->
<!-- 6 unpkgcdn -- "备选使用"-->
<!--Font Awesome 6 pro,喜欢用FontAwesome图标的可以选择第四个-->
<link rel="stylesheet" href="https://unpkg.com/font6pro@6.0.1/css/fontawesome.min.css">
看板娘添加到网站
- 其他博客或者网站主题将这一行代码加入
<head>或<body>就完事。 Cuteen主题用户直接在：进入后台-控制台-外观-设置外观-增强设置-底部自定义内容输入需要引入的HTML代码Handsome主题直接在：设置外观-开发者设置-自定义输出body尾部的HTML代码
<!--作者提供的-->
<!--看板娘位置左边--><script src="https://api.itggg.cn/live2dnew/left/index.js"></script>
<!--看板娘位置右边--><script src="https://api.itggg.cn/live2dnew/right/index.js"></script>
<!--使用npm加速-->
<!--看板娘位置左边--><script src="https://npm.elemecdn.com/live2dnew@1.0.1/live2dnew/left/index.js"></script>
<!--看板娘位置右边--><script src="https://npm.elemecdn.com/live2dnew@1.0.1/live2dnew/right/index.js"></script>注意：如果网站启用了 PJAX，看板娘不必每页刷新，因此要注意将相关脚本放到 PJAX 刷新区域之外。
个性化参数
1、指定首次加载的模型和皮肤 , JS 传参即可，modelId 是模型 ，modelTexturesId 是模型皮肤，模型ID和皮肤ID，可以通过演示页面F12打开控制台日志查看。
<script>
localStorage.setItem('modelId', '7'); //ID:7 是模型,目前已知17种模型，后续更新请前往作者
localStorage.setItem('modelTexturesId', '3'); //ID:3 是皮肤，因为每个模型的皮肤种类不同请自行调试.
</script>
上图展示的是13号模型2号皮肤,如果你想第一次加载展示出这个模型皮肤的话上面那个的7和3就要改成13和2啦,具体自己调试吧.
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>- 个性化演示如下，修改大小为"500px",并指定首次加载使用‘7号’模型‘3号’皮肤；
<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>typecho博客Live2D插件版
由于未更新,版本较低,就暂时不推荐使用 插件版 啦,其实手动添加也不难,就复制几次的事情,自己动动小手即可.
模型接口
换装的后端和模型API接口由Live2D作者提供.
移动端
移动端默认隐藏，有些手机加载卡的一匹，设备宽度低于768PX时，自动隐藏
