132 lines
3.8 KiB
Markdown
132 lines
3.8 KiB
Markdown
### L2Dwidget二次元看板娘的web用法
|
||
|
||
|
||
|
||
#### 一、看板娘 [hexo](https://so.csdn.net/so/search?q=hexo&spm=1001.2101.3001.7020) live2d 演示
|
||
|
||
[shizuku 看板娘](http://raoenhui.github.io/domes/live2d-example/index.html?id=shizuku)
|
||
|
||
|
||
|
||
[看板娘git](https://github.com/raoenhui/live2d-example)
|
||
|
||
```http
|
||
https://github.com/raoenhui/live2d-example
|
||
```
|
||
|
||
|
||
|
||
[看板娘文档](https://juejin.im/post/6844904032423641096)
|
||
|
||
```http
|
||
https://juejin.im/post/6844904032423641096
|
||
```
|
||
|
||
|
||
|
||
### 二、代码实现
|
||
|
||
#### 2.1 方式一：$cdn$
|
||
|
||
只需要在【页首html代码】中引入L2Dwidget.js即可
|
||
|
||
```html
|
||
<script src="https://l2dwidget.js.org/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>
|
||
```
|
||
|
||
[这里展示部分图：](http://raoenhui.github.io/domes/live2d-example/index.html?id=koharu)
|
||
|
||
|
||
|
||
#### 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
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
```html
|
||
<!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>
|
||
```
|
||
|