在你的 Hexo 小站中放一只看板娘！

发表于 | 分类于 ， | 评论数：
本文字数： 2.1k | 阅读时长 ≈ 2 分钟

就是页面左下角的这只！

（爪机用户请移步桌面端查看）

GitHub 项目主页：EYHN/hexo-helper-live2d

安装

使用 npm 安装：

在 Hexo 项目的根目录运行命令：

npm install --save hexo-helper-live2d

用于 jekyll，wordpress 等平台的插件可参阅 live2d-widget.js，仍在编写中。

3.0.1 版本存在的 bug：

存在代码注入 bug，与 hexo-tag-dplayer 插件产生冲突，导致相关脚本无法加载。

解决方法：在项目中使用 npm 命令手动卸载 “hexo-tag-dplayer”: “^0.3.1”。

参阅 GitHub issue

配置

配置文件

在 Hexo 的 _config.yml 文件或主题的 _config.yml 文件中添加配置。需要将“helper 特定配置”与“live2d 一般配置”合并放到 _config.yml 中。

helper 特定配置：

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  scriptFrom: local # 默认
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  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

live2d 一般配置：

参阅 live2d-widget.js API

# Live2D
## https://github.com/xiazeyu/live2d-widget.js
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  model:
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 150
    height: 300
    position: right
    hOffset: 0
    vOffset: -20
  mobile:
    show: true
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

配置文件中 scale 属性失效：

Hexo 3.5，hexo-helper-live2d 3.0.1。在配置文件中修改模型的 scale 属性无效果，同时移动端模型显示未按设定值缩放。

暂无解决方法，可以关闭移动端模型显示。

添加模型

通过 live2d_models 文件夹的方式

  1. 在博客根目录下创建一个 live2d_models 文件夹.
  2. 在此文件夹内新建一个子文件夹，用于保存模型文件.
  3. 将你的 Live2D 模型复制到这个子文件夹中.
  4. 将子文件夹的名称填入 _config.yml 的 model.use 中.

模型文件夹的目录结构：

- moc\
	- *.1024\ (静画)
		- texture_*.png
	- *.moc
- mtn\
	- *.mtn
- *.model.json

经测试，发现似乎只有按照这样的目录结构添加模型相关文件，所有内容才能被完整拷贝到 Hexo 项目的 live2dw/assets 目录中。

通过安装 npm 模块的方式

需要先使用 npm install <模型的包名> 来安装。然后将包名输入位于 _config.yml 的 model.use 中。

  • 第三方模型：

B 站看板娘：52cik/bilibili-haruna

感觉动效比官方的细腻一些，所以在 plusxu.blog 上用了这个。需要手动修改模型文件夹的目录结构。