[部落格美化]給你部落格添加一個萌萌的看闆娘吧

部落格園看闆娘

文章釋出于800天前，可能有所發展或是改變

前言

一直有人問關于部落格園看闆娘的是如何加上去的，一開始的時候的确踩了很多坑，還有，這個美化部落格這個事情，大家還是時刻适可而止的好，不然永遠沒有盡頭，把自己的大好時光全都浪費（滑稽.jpg，用live2d 就可以很簡單的加到自己網站上或者個人部落格上。在自己個人部落格上确實可以很容易的添加，但是在部落格園就更簡單了（踩坑之後的悔悟）。下面看步驟。

前提

• 確定自己的部落格有

  js

  權限，沒有的話可以向官方大大申請。
• 知道如何引用樣式和js檔案。

效果預覽

• ElPsyCongroowx
• 紫陌紅塵丶

引入模型相關檔案

在文章末會給對外連結接

• 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

最新版：https://github.com/zenghongtu/PPet

功能

• 置頂；
• 忽略點選；
• 開機啟動；
• 小工具；
• 拖動（按住 Alt）；
• 放大縮小（ Ctrl / Cmd 和 +、-、0 控制）；
• 提醒休息（預設 25 分鐘）。

插件功能：

• 選詞翻譯；
• 換桌面；
• 記錄剪切闆；
• 日常清理；
• 自定義對話；
• 自定義以及更多的型号。

參考文獻

• 網頁添加 Live2D 看闆娘
• Add the Sseexxyyy live2d to your hexo!
• 把看闆娘添加到你的網頁上吧
• 在網頁中添加 Live2D 看闆娘