'commit'

2025-08-22 14:06:19 +08:00
parent e725dc87ee
commit 9625fc5a24
2 changed files with 0 additions and 186 deletions
--- a/dsLightRag/Doc/12、L2Dwidget二次元看板娘的web用法.md
+++ b/dsLightRag/Doc/12、L2Dwidget二次元看板娘的web用法.md
@@ -0,0 +1,131 @@
+### 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)
+
+![](https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/BlogImages/%7Byear%7D/%7Bmonth%7D/%7Bmd5%7D.%7BextName%7D/20250822072335174.png)
+
+[看板娘git](https://github.com/raoenhui/live2d-example)
+
+```http
+https://github.com/raoenhui/live2d-example
+```
+
+![](https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/BlogImages/%7Byear%7D/%7Bmonth%7D/%7Bmd5%7D.%7BextName%7D/20250822072429553.png)
+
+[看板娘文档](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)
+
+![](https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/BlogImages/%7Byear%7D/%7Bmonth%7D/%7Bmd5%7D.%7BextName%7D/20250822072525772.png)
+
+#### 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
+```
+
+
+
+![](https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/BlogImages/%7Byear%7D/%7Bmonth%7D/%7Bmd5%7D.%7BextName%7D/20250822072551308.png)
+
+
+
+```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>
+```
+