博客园博客添加二次元小人

博文地址：https://www.cnblogs.com/imchentiefeng/articles/web-live2d-config.html

git地址：https://gitee.com/ichentiefeng/blogs/blob/master/web/博客园博客添加二次元小人.md

背景

多次在别人的博客页面看到二次元的卡通任务，感觉不错，最近开始在博客园写博客，自己网站也添加了一下，这里附加一下教程。

开始

1、先进入博客的管理页面，地址是：https://i.cnblogs.com/settings

2、点击【设置】

3、在【页脚HTML代码】框中加入以下代码：

        <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
        <script>
            //二次源动画
            var config = {
                model: {
                    jsonPath: 'https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json', // xxx.model.json 的路径
                },
                display: {
                    position: 'right', // 显示位置：左或右
                    superSample: 1, // 超采样等级
                    width: 300, // canvas的宽度
                    height: 300, // canvas的高度
                    hOffset: 0, // canvas水平偏移
                    vOffset: 20, // canvas垂直偏移
                },
                mobile: {
                    show: true, // 是否在移动设备上显示
                    scale: 1, // 移动设备上的缩放
                    motion: true, // 移动设备是否开启重力感应
                },
                react: {
                    opacityDefault: 0.9, // 默认透明度
                    opacityOnHover: 1, // 鼠标移上透明度
                },
            };
            L2Dwidget.init(config);
        </script>

4、点击【保存】，然后到自己的博客首页，刷新页面，就可以看到了。