synchronization

2025-08-25 16:02:49 +08:00
commit d12a206210
28 changed files with 877 additions and 0 deletions
--- a/前端/Hexo/Hexo添加看板娘.md
+++ b/前端/Hexo/Hexo添加看板娘.md
@@ -0,0 +1,93 @@
+> 本文作者：丁辉
+
+# Hexo添加看板娘
+
+## 方法一
+
+1. 安装 NPM 包
+
+   ```bash
+   npm install --save hexo-helper-live2d
+   ```
+
+2. 下载模型
+
+   [小模型](https://github.com/EYHN/hexo-helper-live2d)
+
+   [大模型](https://github.com/summerscar/live2dDemo)
+
+3. 改名模型目录名为 `live2d_models/` 在 Hexo 工作目录下
+
+4. 编辑配置文件
+
+   ```bash
+   vi _config.yml
+   ```
+
+   内容如下
+
+   ```yaml
+   live2d:
+     enable: true
+     scriptFrom: local # 主目录
+     pluginRootPath: live2d_models/ # 模型目录
+     pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
+     pluginModelPath: assets/ # 模型文件相对与插件根目录路径
+     # scriptFrom: jsdelivr # jsdelivr CDN
+     # scriptFrom: unpkg # unpkg CDN
+     # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
+     tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
+     debug: false # 调试, 是否在控制台输出日志
+     model:
+       use: live2d-widget-model-koharu # 对应的模型名称
+       # use: wanko # 博客根目录/live2d_models/ 下的目录名
+       # use: ./wives/wanko # 相对于博客根目录的路径
+       # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
+     display:
+       position: left # 居右
+       width: 80 # 宽度
+       height: 120 # 高度
+     mobile:
+       show: true # 移动端是否显示
+     react:
+       opacity: 0.7 # 模型透明度
+       
+       
+   live2d:
+     enable: true  # 是否启动
+     scriptFrom: local # 默认
+     pluginRootPath: live2dw/  # 插件在站点上的根目录(相对路径)
+     pluginJsPath: lib/  # 脚本文件相对与插件根目录路径
+     pluginModelPath: assets/  # 模型文件相对与插件根目录路径
+     tagMode: false  # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
+     debug: false  # 调试, 是否在控制台输出日志
+     model:
+       use: live2d-widget  ## 模型文件
+     display:
+       position: right # 定位方向 left right top bottom
+       width: 150  # 小人宽度
+       height: 300 #  小人高度
+       hOffset: -15  # 向👇偏移
+       vOffset: -15  # 像👈偏移
+     mobile:
+       show: true  # 手机端是否显示
+     react:
+       opacity: 0.7  # 模型透明度
+   
+   作者：船过水无痕
+   链接：https://juejin.cn/post/6925325394820202510
+   来源：稀土掘金
+   著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
+   ```
+
+## 方法二
+
+[Github仓库](https://github.com/stevenjoezhang/live2d-widget)
+
+在 `<head>` 中加入
+
+```bash
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
+<script src="https://cdn.jsdelivr.net/gh/17lai/live2d-widget@latest/autoload.js"></script>
+```
+