前言

各位看官或许已经注意到,在我的博客右侧有一个萌萌哒看板娘。能在自己的博客上放上自己喜欢的动漫人物是不是很振奋人心呢!其实,这个看板娘利用了live2d技术,这项技术现在广泛应用于手游,桌面壁纸等领域,各大博客系统也都纷纷推出了或是第三方插件适配了live2d,本文给各位介绍下如何在Hexo博客里安装live2d插件,并展示看板娘。


插件地址

EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo!


安装

进入hexo博客根目录,使用以下命令安装hexo-helper-live2d插件:

npm install --save hexo-helper-live2d

试试 yarn add hexo-helper-live2d, 据说高能的yarn会比垃圾npm少很多麻烦呢。 Yarn


配置

配置页面

仍在使用老版本?

  • 如果您想使用最近的注入模式(将会在每个页面上显示):
    请从layout/layout.ejslayout/_layout.swig中删掉</body>前的{{ live2d() }}<%- live2d() %>
  • 如果您想使用旧的标签模式(仅替换 live2d 标签):
    请保留{{ live2d() }}<%- live2d() %>, 并将tagMode设置为true

我们推荐您使用npm install --save hexo-helper-live2d@3.x来强制安装最新版本。


标签模式


请在您想插入的页面的</body>前插入{{ live2d() }}(swig)或<%- live2d() %>(ejs)。将tagMode设置为true, 然后插件将只会在拥有live2d标签的页面出现。

配置_config.yml文件

  1. 配置内容可以直接配置在Hexo的配置文件 _config.yml 中,也可以配置在主题的 Hexo根目录/themes/主题目录/_config.yml 文件中,但推荐配置在Hexo的配置文件中,防止更换主题后live2d失效。
  2. 基础配置:

    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
      enable: true # 开启live2d
      # enable: false
      scriptFrom: local # 默认
      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 # 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
  3. 高级配置:
    用户自定义设置,建议小白玩家可以不必理会,高玩请随意,官方API地址:L2Dwidget | live2d-widget.js

模型

有许多方法来使用不同的模型

使用自己下载的模型

  1. 方式一(推荐使用):

    • 在您博客根目录下创建一个 live2d_models 文件夹
    • 在此文件夹内新建一个子文件夹
    • 将你的 Live2D 模型复制到这个子文件夹中,自有模型应当有一个 .model.json 文件 (例如 mymiku.model.json)
    • 将子文件夹的名称输入 _config.ymlmodel.use
  2. 方式二:

    • 您可直接输入相对于博客根目录的自定义路径到 model.use
    • 示例: ./wives/wanko

使用npm下载的模型

  1. 方式一:下载现有的npm资源

    • 官方提供了多款精美的模型,[点击查看]( )
    • 你需要先使用 npm install 模型的包名 来安装,然后将包名输入位于 _config.ymlmodel.use
  2. 方式二:发布你自己的模型包

    • 新建一个目录, 用你的Node环境执行 npm init,我们推荐您使用 live2d-widget-model-xxx 的包名
    • 再使用方式一来使用自己的模型

更多模型下载

本猿正在快马加鞭的整理优质资源中,敬请期待

最后修改:2021 年 02 月 01 日 11 : 27 AM
如果觉得我的文章对你有用,请随意赞赏