把live2D模型放上網頁

准備工作

首先到我的 Github 去下載整理后的 Live2D 代碼，畢竟整理后的話好下手 ~

下載后解壓代碼到你的博客網站根目錄去。（目錄位置可以自定義）

然后把解壓出來的文件夾改名為：live2d 。

1.在你博客程序頭部文件（header）引入界面樣式，在 head 標簽內插入如下代碼：

<link rel="stylesheet" href="/live2d/css/live2d.css" />

2.在 body 標簽內合適的位置插入 Live2D 看板娘的元素，按照 Html 書寫規范寫 ~

<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>

3.在你博客程序頁腳文件（footer）引入腳本，在 body 標簽結束前插入如下代碼：

<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>

4.鼠標放在頁面某個元素上時，需要 Live2D 看板娘提示的請修改 message.json 文件。

事例:

{
    "mouseover": [
        {
            "selector": ".title a",  //此處修改為你頁面元素的標簽名
            "text": ["要看看 {text} 么？"]  //此處修改為你需要提示的文字
        },
        {
            "selector": "#searchbox",
            "text": ["在找什么東西呢，需要幫忙嗎？"]
        }
    ],
    "click": [  //此處是 Live2D 看板娘的觸摸事件提示
        {
            "selector": "#landlord #live2d",
            "text": ["不要動手動腳的！快把手拿開~~", "真…真的是不知羞恥！","Hentai！", "再摸的話我可要報警了！⌇●﹏●⌇", "110嗎，這里有個變態一直在摸我(ó﹏ò｡)"]
        }
    ]
}

然后，刷新你的博客頁面，看看效果吧！

注意路徑別弄錯了噢 ~
PHP 程序推薦使用主題函數獲取絕對路徑。