前言

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

配置

配置页面

[collapse title="仍在使用老版本？" status="false"]

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

我们推荐您使用npm install --save hexo-helper-live2d@3.x来强制安装最新版本。
[/collapse]
[collapse title="标签模式" status="false"]
请在您想插入的页面的</body>前插入{{ live2d() }}(swig)或<%- live2d() %>(ejs)。将tagMode设置为true, 然后插件将只会在拥有live2d标签的页面出现。
[/collapse]

配置_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.yml 的 model.use 中

2. 方式二：

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

使用npm下载的模型

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

   • 官方提供了多款精美的模型，[点击查看]( )
   • 你需要先使用 npm install 模型的包名 来安装，然后将包名输入位于 _config.yml 的 model.use 中

2. 方式二：发布你自己的模型包

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

更多模型下载

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