给博客添加看板娘

( ̄︶ ̄*))

下载代码:https://pan.baidu.com/s/11snLOkzXL79jNXY0GvSFGQ   提取码是:y96h
解压,取出其中的model文件夹
将文件夹放到博客的某个目录下
在自己主题的footer.php中加入以下代码

<div id="landlord">
    <canvas id="live2d" width="280" height="360" class="live2d"></canvas>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
       //jsonpath控制显示模型
            jsonPath: "http://www.reclusiveone.com/wp-content/model/ShizukuTalk/shizuku-48/index.json",
        },
        "display": {
            "position": "right", //看板娘的表现位置
            "width": 400,  //宽度
            "height": 700, //高度
            "hOffset": -50,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
        },
        "react": {
            "opacityDefault": 1,//不透明度,可调
            "opacityOnHover": 0.2
        }
    });
</script>

其中jsonpath按照model下模型的路径,找到index.json即可.

粘贴的位置可以放在footer.php最下方的div之下即可.可以直接访问地址,看浏览器中是否能够输出json字符串来验证到底路径设置的是否正确.

刷新页面,可以看到简单的看板娘了.

posted @ 2021-04-30 16:18  Monstro  阅读(125)  评论(0)    收藏  举报