前言
一直有人問關於博客園看板娘的是如何加上去的，一開始的時候的確踩了很多坑，還有，這個美化博客這個事情，大家還是時刻適可而止的好，不然永遠沒有盡頭，把自己的大好時光全都浪費（滑稽.jpg，用live2d 就可以很簡單的加到自己網站上或者個人博客上。在自己個人博客上確實可以很容易的添加，但是在博客園就更簡單了（踩坑之后的悔悟）。下面看步驟。
前提
- 確保自己的博客有
js權限，沒有的話可以向官方大大申請。 - 知道如何引用樣式和js文件。
效果預覽
引入模型相關文件
在文章末會給出鏈接
- waifu.css
- waifu-tips.js
- live2d.js
- flat-ui.min.css//若不加菜單可以不引入
代碼實現
引入樣式文件(頁首)
<link rel="stylesheet" type="text/css" href="waifu.css"/>
整體結構(側邊欄)
<div class="waifu" id="waifu">
<div class="waifu-tips" style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="live2d.js"></script>
<script src="waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
說明
感謝FGHRSHd提供的api服務。原來的模型是要json格式中寫一些提示信息的，因為博客園不允許上傳此類型的文件，所以就json文件上傳到了自己的個人博客中，誰知道出現了跨域問題。導致的問題就是根本不會出現模型，還有看板娘所有的任務和裝扮都是引用的api，最后還是感謝@bndong把json寫到了js中，這個模型已經實現了api更換人物模型，和更換人物服裝，當然你也可以添加自己想要的功能。如果自己想要更換自己喜歡的人物或者皮膚，可以用自己的api。如果大家覺的還不錯的話，可以點點關注嘛(/▽＼=)。
添加菜單
這個是給看板娘添加菜單的，可加可不加，若要添加的話可以把這個層放在 <div class="waifu" id="waifu"></div> 之間。即：
<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://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="live2d.js"></script>
<script src="waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
字體文件是引入不進來的，因為博客園限制了此類文件的上傳。值得注意的是，只是這樣還不行，菜單會因為缺少字體文件顯示不出來，所以我們要把字體文件引入（當然了，也可以用別的，不用這個，但是要改js文件），為了簡單，直接引入css樣式就好。里面包含了字體樣式。其實這是一種偷懶的做法，如果有時間可以去除里面用不到的字體。
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>
相關文件下載
點下推薦才會下載哦，不然下載會出錯的emmmm
可能還要看下這個emmm
win版看板娘
如果你也想在自己的win 桌面上有一個看板娘的話 可以下載哦
鏈接: https://pan.baidu.com/s/1KpyQtxonRs7ue97ieAP62w 提取碼: yjgk
功能
- 置頂；
- 忽略點擊；
- 開機啟動；
- 小工具；
- 拖動（按住 Alt）；
- 放大縮小（ Ctrl / Cmd 和 +、-、0 控制）；
- 提醒休息（默認 25 分鍾）。
插件功能：
- 選詞翻譯；
- 換壁紙；
- 記錄剪切板；
- 日常清理；
- 自定義對話；
- 自定義以及更多的型號。