如何给博客园主页添加萌萌哒的2D模型

前言

无意中看到别人的博客园下方有一只萌萌哒的看板娘，瞬间喜上心头，于是自己也整一个养在博客里边，娱乐自己还装添了门面，岂不美哉？实现方法也很容易，引用live2d就能添加博客园上，此外也能用在自己的网站和个人博客上。

效果展示：

实现步骤

进入自己博客的管理界面，点击设置

找到下面的 博客侧边栏公告（初次使用需要申请JS权限，就在博客侧边栏公告旁边会有申请链接，填写完申请理由等待审核通过即可），然后粘贴如下代码：

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
 
<script>
    L2Dwidget.init({
        "model": {
           jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",
            "scale": 1
        },
        "display": {
            "position": "left",<!--设置看板娘的上下左右位置-->
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -150
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.9,<!--设置透明度-->
            "opacityOnHover": 0.2
        }
    });
</script>

可根据自己的需求修改上面的样式，控制模型出现的位置，也可以选择其他的模型：

复制替换jsonPath内地址即可
黑猫：https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
白猫：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
狗狗：https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
小可爱：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
小可爱：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json

补充：

jsonPath 的路径格式为：

https://unpkg.com/2D模型全名称@1.0.5/assets/模型.model.json

可替换的2D模型全名称：

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

最终效果

各个模型预览：hexo live2d
这是我博客园主页的效果：blog