目錄
一、前言
最近逛博客園發現個很有意思的東西，查了一下原來叫看板娘，看板娘是一種職業和習慣稱呼，也是ACGN次文化中的萌屬性之一。簡而言之就是小店的女服務生，也有“吸引顧客，招攬生意，提高人氣”等作用類似品牌形象代言人的含義。
如果想在自己的博客上放一個呆萌的看板娘非常的簡單隻需要簡單的幾行代碼就能實現。不過CSDN貌似不支持這個玩意，只能在博客園玩一玩，或者個人網站的玩一下。
二、效果圖
可以到博主的小站查看效果圖
博客園：https://www.cnblogs.com/wjhsmart/
個人小站：http://wjhsmart.vip
三、資源準備
1、相關的資源，可以點擊下面的網盤鏈接直接下載
鏈接：https://pan.baidu.com/s/1mKMKMGuQkH_XouRHXYGLcQ
提取碼：m8x6
2、也可以通過下面的地址到Gitbuh中下載
Github地址：https://github.com/stevenjoezhang/live2d-widget.git
四、實現教程
1、個人小站實現教程
自己的網站要實現特別簡單，本插件需要 Font Awesome (v4 或 v5) 圖標支持，請確保相關樣式表已在頁面中加載。以 Font Awesome v4 爲例，請在 <head> 中加入：
Font Awesome (v4 or v5) is required for this plugin. Take Font Awesome v4 as an example, please add the following in <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
否則圖標將無法正常顯示。（如果網頁中已經加載了任何版本的 Font Awesome，就不要重複加載了）
導入了圖標之後，將這一行代碼加入 <head> 或 <body>，即可展現出效果：
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
如果網站啓用了 PJAX，由於看板娘不必每頁刷新，因此要注意將相關腳本放到 PJAX 刷新區域之外。
換句話說，如果你是小白，或者只需要最基礎的功能，就只用把這一行代碼，連同前面加載 Font Awesome 的一行代碼，一起放到 html 的 <head> 中即可。
2、博客園實現教程
博客園要實現這個，需要申請開通博客，然後找到設置，如下圖：
在頁面定製CSS代碼中加入以下代碼：
#live2dcanvas {
border: 0 !important;
}
在博客邊欄公告中加入以下代碼：
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget.init({"display": {
"superSample": 2,
"width": 200,
"height": 400,
"position": "left",
"hOffset": 0,
"vOffset": 0
}
});
</script>
如果還是不行，可能要申請一下JS權限。只需要把這兩個代碼分別複製到對應的地方，然後倒首頁刷新一下即可看到一個呆萌的看板娘了，是不是特別簡單。