博客園添加Live2d看板娘

最近給自己的博客添加了個動態的小蘿莉，給大家分享一下，效果請見我的博客左下角：

（當然你也可以在自己的html頁面引入下面的js來添加小蘿莉）

 1.首先最重要的一點你要申請一個博客園賬號。

 2.其次申請js權限，找到管理--》設置》--》js權限申請（博客園為了防止大家隨便引入js，申請時要說明自己的用途喲，大概一天時間會通過）。

 3.權限通過之后，然后在【頁腳html代碼】編輯器中插入如下代碼

   引入live2d的相關js：

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

　初始化js加載我們可愛的小蘿莉：

<script>
    L2Dwidget.init({
        "model": {
　　　　　　　//jsonpath控制顯示那個小蘿莉模型，下面這個就是我覺得最可愛的小蘿莉模型
            jsonPath: "https://unpkg.com/live2d-widget-model-chitose@latest/assets/chitose.model.json",
            "scale": 1
        },
        "display": {
            "position": "right", //看板娘的表現位置
            "width": 150,  //小蘿莉的寬度
            "height": 300, //小蘿莉的高度
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>

 保存成功后刷新頁面就可以看到我們可愛的小蘿莉了~~~~~~~~~~~

當然你可以通過修改模型切換顯示不同的小蘿莉，以下是模型列表：

通過替換上面jsonPath中的live2d-widget-model-chitose和chitose.model.json中的chitose來修改小蘿莉，

替換的小蘿莉效果可以參考這里，點我（引用下大佬的鏈接，筆芯）

• live2d-widget-model-chitose
• live2d-widget-model-epsilon2_1
• live2d-widget-model-gf
• live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
• live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
• live2d-widget-model-haruto
• live2d-widget-model-hibiki
• live2d-widget-model-hijiki
• live2d-widget-model-izumi
• live2d-widget-model-koharu
• live2d-widget-model-miku
• live2d-widget-model-ni-j
• live2d-widget-model-nico
• live2d-widget-model-nietzsche
• live2d-widget-model-nipsilon
• live2d-widget-model-nito
• live2d-widget-model-shizuku
• live2d-widget-model-tororo
• live2d-widget-model-tsumiki
• live2d-widget-model-unitychan
• live2d-widget-model-wanko
• live2d-widget-model-z16