Live2D看板娘可以給你的網(wǎng)站添加一個(gè)動(dòng)態(tài)的可愛小人，讓你的網(wǎng)站更加生動(dòng)有趣。
其他參考：
Github
原項(xiàng)目出自一個(gè)大佬的博客，貓與向日葵。閱讀原文
本文對(duì)于原文和原作有刪改。 ?
嘛，不少人對(duì)這個(gè) Live2D 看板娘很感興趣呢！ 紛紛讓我寫文章，而學(xué)長(zhǎng)也是懶癌晚期，一直拖到現(xiàn)在 ~
好了，還是準(zhǔn)備開始我們的教程吧！ 俗話說：“授人以魚不如授人以漁”，但是說這個(gè)“漁”比較難教，還是給條“魚”你完事了。
準(zhǔn)備工作
首先到我的?Github?去下載整理后的 Live2D 代碼，畢竟整理后的話好下手 ~
下載后解壓代碼到你的博客網(wǎng)站根目錄去。（目錄位置可以自定義）
然后把解壓出來的文件夾改名為：live2d 。
正式開工
在你博客程序頭部文件（header）引入界面樣式，在 head 標(biāo)簽內(nèi)插入如下代碼：
<link rel="stylesheet" href="/live2d/css/live2d.css" />
在 body 標(biāo)簽內(nèi)合適的位置插入 Live2D 看板娘的元素，按照 Html 書寫規(guī)范寫 ~
<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>
在你博客程序頁腳文件（footer）引入腳本，在 body 標(biāo)簽結(jié)束前插入如下代碼：
<script type="text/javascript">
var message_Path = '/live2d/'
var home_Path = 'https://haremu.com/' //此處修改為你的域名，必須帶斜杠
</script>
<script type="text/javascript" src="/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/live2d/js/message.js"></script>
<script type="text/javascript">
loadlive2d("live2d", "/live2d/model/tia/model.json");
</script>
鼠標(biāo)放在頁面某個(gè)元素上時(shí)，需要 Live2D 看板娘提示的請(qǐng)修改 message.json 文件。
示例：
{
"mouseover": [
{
"selector": ".title a", //此處修改為你頁面元素的標(biāo)簽名
"text": ["要看看 {text} 么？"] //此處修改為你需要提示的文字
},
{
"selector": "#searchbox",
"text": ["在找什么東西呢，需要幫忙嗎？"]
}
],
"click": [ //此處是 Live2D 看板娘的觸摸事件提示
{
"selector": "#landlord #live2d",
"text": ["不要?jiǎng)邮謩?dòng)腳的！快把手拿開~~", "真…真的是不知羞恥！","Hentai！", "再摸的話我可要報(bào)警了！?●﹏●?", "110嗎，這里有個(gè)變態(tài)一直在摸我(ó﹏ò?)"]
}
]
}
然后，刷新你的博客頁面，看看效果吧！
注意路徑別弄錯(cuò)了噢 ~
PHP 程序推薦使用主題函數(shù)獲取絕對(duì)路徑。
問：“為什么這個(gè) Live2D 沒有換裝功能哎？”
答：“自己研究去。”
其實(shí)，就是動(dòng)態(tài)改變 model.json 內(nèi)的服裝字段，達(dá)到隨機(jī)服裝的效果……
模型說明
Live2D 并不是一種先進(jìn)的技術(shù)，它產(chǎn)生的效果，都是用基本的平移、旋轉(zhuǎn)、透明、曲面變形等操作實(shí)現(xiàn)的。 最終的效果與貼圖關(guān)系很大，而每一個(gè)動(dòng)作，都需要制作師的精細(xì)調(diào)整。 這是一個(gè)需要消耗大量時(shí)間精力的過程，因此質(zhì)量好的模型并不多，質(zhì)量好的也一般是在游戲中，版權(quán)受到保護(hù)，不能隨意使用。
本文章中所用模型解包自?藥水制作師?手機(jī)游戲，版權(quán)歸該官方所有。
（沒錯(cuò)，我也安利下這款?蘿莉控?游戲。啪！）
更新日志
2017.12.30
- 主程序更新至原博主 v1.0.4 版本，添加了跨域畫布支持；服裝字段支持使用絕對(duì)地址，服裝可以使用外部地址了，比如 CDN ，支持 SSL鏈接 。
- 消息提示程序一些細(xì)節(jié)修改，一言 API 修改為?http://hitokoto.cn?官方。
- 添加一個(gè) Live2D 元素的隱藏按鈕，隱藏后，需要刷新頁面才能出現(xiàn)，因?yàn)榘粹o也被隱藏了 ~
2018.08.10
- 主程序更新至原博主 v1.0.5 版本。
- 修正一言 API 的 URL 地址。
