添加双重 Live2D 看板娘

开通博客园的初心就是这个hhh！！

添加了两位 Live2D 看板娘。左右护法！！

是二维动画。最开始以为是三渲二的。效果好就是硬道理。

 

首先要申请JS权限。

进入博客园设置-基本设置-JS权限

申请后等待审批，需要几个小时，大概吧。

申请了两次，第一次被拒，可能理由不靠谱。第二次终于给过了，感谢管理员！

 代码都是搜来的。感谢原作者们。

地址如下：

3行代码 为网站添加萌萌哒看板娘

网站添加live2d看板娘网页特效

 

代码如下，进入博客园设置-页首/页脚HTML代码，左边的代码放侧边栏，右边的代码放页脚，保存就可以了。

两个看板娘用的不同来源，鲁棒性应该不错吧。

两段代码理论上应该也可以放一起，不过试了下，不是每次都成功就算了。

进一步实验，如果代码放侧边栏的话，电脑能看，手机浏览器看不到。

<!-- 左边的 -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

<!-- 右边的 -->
<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
<script type="text/javascript">
    L2Dwidget
    .on('*', (name) => {
    console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')
    })
    .init({
        display: {
            // 居左
            "position": "right",
            // 宽度
            "width": 200,
            // 高度
            "height": 400,
            // 距左右
            "hOffset": 35,
            // 距下
            "vOffset": -20
        },
 
        mobile: {
            // 移动端，false为关闭
            "show": true,
            "scale": 0.5
        },
 
        dialog: {
        // 开启对话框，false为关闭
            enable: true,
            script: {
                // 每空闲 10 秒钟，显示一条一言
                'every idle 10s': '$hitokoto$',
                // 当触摸到角色身体
                'tap body': '哎呀！别碰我！',
                // 当触摸到角色头部
                'tap face': '人家已经不是小孩子了！'
            }
        }
    });
</script>

 

瞟了一眼进一步定制的可能性（角色、动作、服装 etc...)

Live2D官网

Live2D中文网

显然需要的美术技能和工作量直扑天际，告辞。