Live2D是一種應用於電子遊戲的繪圖渲染技術，技術由日本Cybernoids公司開發。通過一系列的連續圖像和人物建模來生成一種類似三維模型的二維圖像，對於以動畫風格爲主的冒險遊戲來說非常有用，缺點是Live 2D人物無法大幅度轉身，開發商正設法讓該技術可顯示360度圖像。---------------------------------百度百科
在開發個人博客網站時無意間發現了這個東西，彷彿打開了新世界，無論如何也要在自己的博客中加入live2d（以下稱看板娘）。在網上找了很久的接入教程，正巧發現了一篇基於django框架的看板娘接入教程（實際上和開發語言、後端框架沒有太大關係，但有些靜態文件設置還是有所區別）。當時忘記保存大佬的文章鏈接，以後找到的話會加到文章末尾。
接入看板娘之前需要先下載相關文件：
鏈接：https://pan.baidu.com/s/1SkMbm_Q8MAz9alF_fAD_Yw
提取碼：8k2s
如果本地沒有jquary文件的話將網盤中的jquery-2.2.0.min.js下載下來並放在js目錄中。
這裏還有一個重要的步驟，就是講live2d目錄下的message.json文件文件名改爲message.jsonmessage.json
目錄介紹：
css：這個不需要過多解釋，裏面存放的是看板娘需要的樣式文件。
js：這個也不需要過多解釋，很明顯這是劍聖
model：這個文件夾中存放看板孃的模型圖片，以及相關的動作、音頻文件。如果需要更換看板娘模型的話需要替換這個文件夾中的相關文件。
接入方法：
① 新建HTML頁面，引入live2d的css、js文件。
相關代碼：
<body>
<!--引入css文件-->
<link rel="stylesheet" href="{%static 'live2d/css/live2d.css'%}" />
<!--引入js文件-->
<script src="{%static 'live2d/js/jquery-2.2.0.min.js'%}"></script>
<script type="text/javascript">
var message_Path = '{%static 'live2d/message.json' %}';
var home_Path = 'https://www.jhxblog.cn/' //此處可以修改爲你的域名，必須帶斜槓
</script>
<script type="text/javascript" src="{%static 'live2d/js/live2d.js'%}"></script>
<script type="text/javascript" src="{%static 'live2d/js/message.js'%}"></script>
<script type="text/javascript">
loadlive2d("live2d", "{%static 'live2d/model/tia/model.json'%}");
</script>
</body>
由於django框架靜態文件的加載機制使文件URL格式爲{%static ‘xxx/xxx/xxx.xx’%},使用其他語言或框架時需要吧URL修改成相應的格式。
② 添加canvas
<div id="landlord">
<div class="message" style="opacity:0"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="hide-button">隱藏</div>
</div>
③ 啓動服務器，打開網頁查看效果。
文件修改
其實看板孃的接入到這裏已經完成了，但是如果人物模型上方的文字能DIY成自己的豈不美哉？這個可以有！首先，打開live2d目錄下的message.jsonmessage.json文件：
這裏面的行爲是與用戶交互時觸發的，比如click表示當你點擊看板娘時，她會隨機說一句text中的話，同理上面的mouseover表示鼠標操作，selector表示當你選中xxx時所觸發的行爲，後面表示的是相應標籤的類名。
打開live2d/js/message.js文件還可以更改進入頁面、複製文本時看板娘說的話。
關於更換看板娘模型方面需要替換model中的文件，具體如何操作在網上一搜一大把這裏就不做闡述了。
此接入方法django框架親測可用，其他語言或框架可能會出現一些bug，具體問題還需使用者根據具體情況分析解決。