在自己博客園添加live2d可愛卡通人物

在博客園刷文章的時候，偶然看到一個博客頁面上有個特別可愛的卡通萌妹子，而且妹子的目光可以隨着鼠標的移動而移動，斷定是canvas，好奇心（絕不是看妹子可愛）果斷F12查看代碼，頁面代碼最下方有個id為live2d-widget的div盒子，就是它了。

想看代碼或在其他地方使用點這里

博客園使用

直接將代碼復制到頁腳即可

    <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
    <script type="text/javascript">
        L2Dwidget.init();
    </script>

新注冊的用戶保存可能沒有開通js權限，保存代碼沒有效果，設置里開通權限即可

更多配置

    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json", // 卡通模型
            "scale": 1
        },
        "display": {
            "position": "right", // 定位位置（"left"/"right"/"top"/"bottom"）
            "width": 150, // 寬度
            "height": 300, // 高度
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": false,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1, // 透明度
            "opacityOnHover": 0.2
        }
    });

模型列表

更換模型修改jsonPath即可，https://unpkg.com/模型包@1.0.5/assets/卡通模型名.model.json

模型包：live2d-widget-model-卡通模型名

• 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