博客园美化-添加看板娘
一、看板娘介绍
基础版看板娘
| 名字（代号） | 人物形象 |
|---|---|
| koharu |  |
| shizuku |  |
| z16 |  |
| hijiki |  |
| tororo |  |
| wanko |  |
进阶版看板娘
| ID | 名字（代号） | 人物形象 |
|---|---|---|
| 1 | Pro酱 |  |
| 2 | Tra酱 |  |
| 3 | 22 |  |
| 4 | 33 |  |
| 5 | Shizuku | |
| 6 | 海王星 |  |
| 7 | 舰队 |  |
二、添加看板娘
基础版
基础版看板娘 只有基本的人物形象，不能进行交互、换装等功能。
1.在博客侧边公告栏输入如下代码：
注：需要申请开通JS权限
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
// 不同人物形象
// 黑猫
hijiki = "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json"
// 白猫
tororo = "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json"
// 狗狗
wanko = "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json"
// 人物
koharu = "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json"
shizuku = "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json"
z16 = "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json"
L2Dwidget.init({
"model": {
// 在这里使用上面的人物名称替换“shizuku”，可以切换人物形象
jsonPath: shizuku,
"scale": 1
},
"display": {
"position": "right",
"width": 120,
"height": 150,
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
2.保存，回到博客刷新，就可以了。
进阶版
进阶版看板娘 可以进行交互、切换人物形象和服装等功能
1.下载配置文件
| 文件名 | 作用 |
|---|---|
| waifu.css | 看板娘样式文件 |
| waifu-tips.js | 看板娘人物的初始化、语言设置等 |
| live2d.min.js | 看板娘交互动作 |
| flat-ui.min.css | 看板娘右边菜单项，与博客园的模板样式存在冲突（主要表现在导航菜单） |
| flat-ui.css | flat-ui.min.css删减版，只保留了与看板娘相关的样式（推荐使用这个样式） |
压缩包文件地址：
蓝奏云 密码:aboy
百度网盘 提取码: rcx1
2.在博客园后台 文件界面 上传文件
点击文件 即可查看文件的地址
3.在博客园后台 设置 界面 在底部找到页脚HTML，添加如下代码：
下面代码中 上传地址 需替换为是步骤2中文件的地址
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/博客文件地址/flat-ui.css"/>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/博客文件地址/waifu.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<div class="waifu" id="waifu">
<div class="waifu-tips" style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="https://blog-static.cnblogs.com/files/博客文件地址/live2d.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/博客文件地址/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
另注：在其他网页中添加看板娘 需要使用如下代码， 博客园平台可以跳过此部分
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D</title>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/文件地址/flat-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/文件地址/waifu.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="waifu" id="waifu">
<div class="waifu-tips" style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="https://blog-static.cnblogs.com/files/文件地址/live2d.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/文件地址/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
</body>
</html>
4.保存，回到博客刷新，就可以了。
5.设置看板娘位置
waifu.css 默认看板娘在右侧显示，具体代码如下
.waifu {
position:fixed;
bottom:0;
/* 设置右侧显示*/
right:0;
z-index:1;
font-size:0;
-webkit-transform:translateY(3px);
transform:translateY(3px)
}
如想要切换到左侧，修改如下：将waifu.css文件中第4行的right 改为left
.waifu {
position:fixed;
bottom:0;
/* 设置左侧显示*/
left:0;
z-index:1;
font-size:0;
-webkit-transform:translateY(3px);
transform:translateY(3px)
}
6.设置看板娘人物形象
可以在initModel()函数中修改对应的模型ID和材质ID，具体代码如下。
模型ID [1-7] 对应不同的人物形象
材质ID [0-60] 对应不同的服装，不同人物对应的服装数量不同
function initModel(){
waifuWelcome();
var modelId = localStorage.getItem('modelId');
var modelTexturesId = localStorage.getItem('modelTexturesId');
if (modelId == null) {
/* 首次访问加载 指定模型 的 指定材质 */
var modelId = 2; // 模型 ID
var modelTexturesId = 49; // 材质 ID
} loadModel(modelId, modelTexturesId);
感谢 Fghrsh提供的API接口
