Hexo添加看板娘

方法一

安装 NPM 包
```
npm install --save hexo-helper-live2d
```
下载模型

小模型

大模型
改名模型目录名为 live2d_models/ 在 Hexo 工作目录下

编辑配置文件

vi _config.yml

内容如下

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仓库

在 <head> 中加入

<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>

2.9 KiB Raw Blame History Unescape Escape

Hexo添加看板娘

方法一

方法二

2.9 KiB

Raw Blame History