前言

各位看官或许已经注意到，在我的博客右侧有一个萌萌哒看板娘。能在自己的博客上放上自己喜欢的动漫人物是不是很振奋人心呢！其实，这个看板娘利用了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.ejs或layout/_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文件

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

基础配置：

# 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

高级配置：
用户自定义设置，建议小白玩家可以不必理会，高玩请随意，官方API地址：L2Dwidget | live2d-widget.js

模型

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

使用自己下载的模型

方式一（推荐使用）：
- 在您博客根目录下创建一个 live2d_models 文件夹
- 在此文件夹内新建一个子文件夹
- 将你的 Live2D 模型复制到这个子文件夹中，自有模型应当有一个 .model.json 文件 (例如 mymiku.model.json)
- 将子文件夹的名称输入 _config.yml 的 model.use 中
方式二：
- 您可直接输入相对于博客根目录的自定义路径到 model.use 中
- 示例: ./wives/wanko

使用npm下载的模型

方式一：下载现有的npm资源
- 官方提供了多款精美的模型，[点击查看]( )
- 你需要先使用 npm install 模型的包名 来安装，然后将包名输入位于 _config.yml 的 model.use 中
方式二：发布你自己的模型包
- 新建一个目录, 用你的Node环境执行 npm init，我们推荐您使用 live2d-widget-model-xxx 的包名
- 再使用方式一来使用自己的模型