打工人的猎奇心:
发现某些blog网站左下方或者右下方出现的二次元卡通人物或萌萌阿猫,除了萌,还可以监听鼠标的行为,产生互动的现象。为探究竟,打工人开始了行动…
一、看板娘 hexo live2d 演示
-
https://github.com/raoenhui/live2d-example
-
https://juejin.im/post/6844904032423641096
二、代码实现
Talk is cheap. Show me the code.
2.1 方式一:cdn
只需要在【页首html代码】中引入L2Dwidget.js即可
<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
<!--<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-shizuku@1.0.5/assets/shizuku.model.json",
"scale": 1
},
"display": {
"position": "right",
"width": 150,
"height": 300,
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.8,
"opacityOnHover": 1
},
"dialog": {
"enable": true,
"script": {
'tap body': '哎呀!别碰我!',
'tap face': '人家是在认真写博客哦--前端妹子',
}
}
});
</script>
2.2 方式二:源码实现
npm install --save hexo-helper-live2d
# 博客文档
https://huaji8.top/post/live2d-plugin-2.0/
# git地址
https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md
2.3 demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Live2d Test Env</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<p>试试摸摸头和这颗星星会有不同的对话哦</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="190" height="180" class="star">
<polygon points="100,0 160,180 10,60 190,60 40,180" style="fill:yellow;stroke:yellow;stroke-width:1;"/>
</svg>
<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({
dialog: {
// 开启对话框
enable: true,
script: {
// 每空闲 10 秒钟,显示一条一言
'every idle 10s': '$hitokoto$',
// 当触摸到星星图案
'hover .star': '星星在天上而你在我心里 (*/ω\*)',
// 当触摸到角色身体
'tap body': '哎呀!别碰我!',
// 当触摸到角色头部
'tap face': '人家已经不是小孩子了!'
}
}
});
</script>
</body>
</html>