前言

谁会不喜欢博客上可爱的Live2D呢?

关于Live2D可以看我Live2D入门1-1这篇文章的前言。

安装

打开你的Command/Terminal,键入npm install --save hexo-helper-live2d(P.S:npm国内速度较慢,建议使用cnpm)

配置

打开Hexo根目录下的_config.yml
在配置文件的最后粘贴以下内容,并进行修改

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  enable: true /是否启用Live2D插件
  scriptFrom: jsdelivr # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  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-wanko
    # use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/gh/xxxxxxxxxx@vx.x.x/xxxx.json # 你的自定义 url
  mobile:
    show: true # 是否在移动设备上显示
    scale: 0.3 # 移动设备上的缩放       
  react:
    opacityDefault: 0.7 # 默认透明度
    opacityOnHover: 0.8 # 移动状态的透明度
  display:
    position: right # 初始的位置
    width: 200 # Live2D块的宽度
    height: 300 # Live2D块的高度

然后进行hexo g&&hexo s并打开localhost:4000就可以在你的网站上看到你的Live2D了

结语

在文章的最后,我贴出几个我自己做的和搜集到的Live2D模型,如有侵袭请联系我修改

    # 凉风青叶: https://cdn.jsdelivr.net/gh/ssyximmlove/CDN@v1.4.2/models/aoba/2.json
    # 薇尔莉特: https://cdn.jsdelivr.net/gh/ssyximmlove/CDN@v1.4.2/models/violet/model.json
    # 雷姆: https://cdn.jsdelivr.net/gh/ssyximmlove/CDN@v1.4.2/models/rem/11.json//不显示
    # 玉藻前: https://cdn.jsdelivr.net/gh/ssyximmlove/CDN@v1.4.2/models/tamae/16.json//位置映射有问题
    # 未来: https://cdn.jsdelivr.net/gh/ssyximmlove/CDN@v1.4.2/models/miku/15.json 
    # 尼禄: https://cdn.jsdelivr.net/gh/ssyximmlove/CDN@v1.4.2/models/nero/17.json//位置映射有问题
最后修改:2020 年 05 月 13 日 02 : 49 PM
欢迎投食