一、看板娘介紹
基礎版看板娘
| 名字（代號） | 人物形象 |
|---|---|
| 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接口