前言

使用自己的Live2d看板娘

每次看别人博客或者网站的时候,别人网站都有好看的看板娘,即使安装了helper-live2d但提供的Live2d太少了
那么如何使用自定义的Live2d呢?
看网上很多教程都是乱七八糟的,看也看不懂,自己研究了一下,成功了!
分享出来,让更多人少踩坑,这里我以紫罗兰永恒花园薇尔莉特·伊芙加登小姐姐的Live2d模型作为演示,结束后会奉上几个好看的模型
如果你有好看的模型可以与我分享(好东西要学会分享)嘻嘻

安装

使用helper-live2d的Live2d插件https://github.com/EYHN/hexo-helper-live2d

1
npm install --save hexo-helper-live2d

配置

安装成功后,在hexo根目录的_config.yml添加如下配置(可以写在主题配置文件里)

  1. 基础配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
    enable: true # 开启live2d
    # enable: false
    scriptFrom: local # 默认
    pluginRootPath: live2d/ # 插件在站点上的根目录(相对路径)
    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 # npm-module package name
    # 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
  2. 进阶配置
    看如下配置在基础配置的基础上进行添加相应的配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    live2d:
    enable: true # 是否开启live2d
    scriptFrom: local ## 脚本从本地引入
    pluginRootPath: live2dw/ # 模型根目录(指hexo g后生成public\live2dw文件名)
    pluginJsPath: lib/ # 依赖js的文件夹名(public\live2dw\lib)
    pluginModelPath: assets/ # 模型存放目录(public\live2dw\assets)
    tagMode: false # 标记模式(未知)
    log: false # 日志
    model: # 模型
    use: live2d-widget-model-wanko # 使用的模型名称
    display: # 显示
    position: right # 显示在右边(left显示在左边)
    width: 150 # 宽度
    height: 300 # 高度
    mobile:
    show: true # 手机端是否显示
    react:
    opacity: 0.7 # 透明度

    下面是我在基础配置的基础上添加的几个属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
    enable: true # 开启live2d
    # enable: false
    scriptFrom: local # 默认
    pluginRootPath: live2d/ # 插件在站点上的根目录(相对路径)
    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 # 调试, 是否在控制台输出日志
    display:
    position: left
    mobile:
    show: false
    model:
    scale: 1.2
    use: weier
  3. 高级配置
    建议小白可以不必理会,高玩请随意,官方 API 地址:L2Dwidget | live2d-widget.js

使用模型

  1. 自定义模型
    使用自己下载好的模型
    在hexo根目录新建live2d_models文件夹,然后把模型放进去,最后在live2d配置里的model:下的use:输入模型文件夹名
    在我提供的live2d的压缩包里有几个模型,这里我以薇尔莉特·伊芙加登进行演示

    薇尔莉特·伊芙加登复制到刚从新建的live2d_models文件夹内,然后重命名为weier(当然这个名字是你自定义的),然后进入weier文件夹,里面有个14.json文件,将他重命名为weier.model.json其他文件无需修改,最后在live2d配置里的model:下的use:输入模型文件夹名(weier)

    1
    2
    model:
    use: weier
  2. 使用 npm install {packagename} 安装模型如下

    1
    npm install live2d-widget-model-wanko

    目前有如下模型模型样式
    live2d-widget-model-chitose
    live2d-widget-model-epsilon2_1
    live2d-widget-model-gf
    live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
    live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
    live2d-widget-model-haruto
    live2d-widget-model-hibiki
    live2d-widget-model-hijiki
    live2d-widget-model-izumi
    live2d-widget-model-koharu
    live2d-widget-model-miku
    live2d-widget-model-ni-j
    live2d-widget-model-nico
    live2d-widget-model-nietzsche
    live2d-widget-model-nipsilon
    live2d-widget-model-nito
    live2d-widget-model-shizuku
    live2d-widget-model-tororo
    live2d-widget-model-tsumiki
    live2d-widget-model-unitychan
    live2d-widget-model-wanko
    live2d-widget-model-z16

模型下载地址

https://656e-env-jxscvzag-1301289878.tcb.qcloud.la/live2dModel.zip