為博客園側邊欄設置看板娘
參考：https://www.cnblogs.com/hean/p/11167216.html
waifu.css在左邊
waifu1.css在右邊
waifu-tips.js是點擊看板娘或者其他動作，引發顯示文字，以及一些鏈接指向。因此此文件要用的時候需要修改一下。
22娘的模型ID是3，如果需要設置默認顯示的模型，切換到想設置的模型，在控制台查看log，然后修改waifu-tips.js文件中initModel函數中初始化首次加載的模型參數。
原作者使用說明博客：https://www.fghrsh.net/post/123.html
github地址：https://github.com/fghrsh/live2d_demo
(在HTML代碼中initModel方法前直接使用live2d_settings['canSwitchModel'] = true;設置似乎不管用，還會報錯，導致模型無法顯示。現在這個能將就着用，不用去設置成作者最新的)
博客園使用需要先在 管理，申請JS權限。
具體操作步驟：
- 個人中心-文件，上傳waifu-tips.js;waifu1.css(右邊);waifu.css;live2d.js;flat-ui.min.css;
- 個人中心-設置-博客側邊欄公告，申請JS權限。可能需要一個上午時間通過
- JS權限通過后，代碼如下：
<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/ygxddxc/waifu1.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/ygxddxc/live2d.js"></script>
<script src="https://blog-static.cnblogs.com/files/ygxddxc/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/ygxddxc/flat-ui.min.css"/>
-
注意鏈接地址替換；
注意文件名稱區別，如有無min；
可以修改waifu-tips.js文件，設置自己喜歡的模型和材質，而非每次進入隨機顯示 -
別的文件參考博客里有下載，這里放一個waifu-tips.js文件，修改了兩個地方，一是將默認模型設為22；二是將看板娘的返回首頁功能從調整博客園首頁換成切換默認模型和材質，因為有時候點了換裝想切換回來只有清除瀏覽器緩存了。
waifu-tips.js下載
看板貓
過了一天，我又發現有人的博客上有一只可愛的貓，左手貓，右手22，也太好看了，於是感覺查資料也添加上來。
最開始是看到這個博客里的貓：
白貓
之后搜索資料，發現只有這一個博客里有：
看板貓
不過上面這個博客里寫的非常詳細了。
通過博客和打開他們的控制台，查看具體代碼，我成功把貓顯示出來了。
效果如下：
接下來是具體步驟:
- 確定貓咪模型名稱叫tororo
- 引入JS文件
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
script標簽位置是放在上面waifu-tips.js引用的后面。
這里也可以自己進入這個地址，將代碼復制存入本地，然后將本地的這個L2Dwidget.min.js文件上傳到博客園，和上面看板娘一樣引用。
3. JS代碼：
<script type="text/javascript">
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-tororo/assets/tororo.model.json",
"scale": 1
},
"display": {
"position": "left", <!--設置看板娘的上下左右位置-->
"width": 100,
"height": 220,
"hOffset": 10,
"vOffset": -100 <!--這里想和22的位置保持對稱，但調到-100離底部距離還是高了點，可以試試-130-->
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.8, <!--設置透明度-->
"opacityOnHover": 0.2
}
});
</script>
<canvas id="live2dcanvas" width="200" height="440" style="position: fixed; opacity: 0.9; left: 10px; bottom: -100px; z-index: 99999; pointer-events: none;"></canvas>
放在initModel的script標簽后面即可。
可以根據自己喜好調整數值。
4. 其他模型：
參考第二個連接，除了貓之外，還有其他好幾種模型，不過這些模型長什么樣就需要自己去試了。
注意修改jsonPath鏈接。