Feel so lonely building your own blog? You can add a anime character on your blog!

Installation

1. Hexo Side

Install module:

1
2
3

npm install --save hexo-helper-live2d

try yarn add hexo-helper-live2d for better installation experience.
Yarn

2. Get your model

Install module:

1
2
3
4

$ npm install live2d-widget-model-hijiki --save


Config

Add configuration in hexo’s _config.yml file or theme’s _config.yml.

An Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  scriptFrom: jsdelivr # 默认
  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-hijiki # npm-module package name
      # use: hijiki # 博客根目录/live2d_models/ 下的目录名
      # use: ./wives/hijiki # 相对于博客根目录的路径
      # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json # 你的自定义 url
      scale: 1
      hHeadPos: 0.5
      vHeadPos: 0.618
  display:
      superSample: 2
      width: 125
      height: 125
      position: left
      hOffset: 30
      vOffset: -20
  mobile:
      show: false
      scale: 0.05
  react:
      opacityDefault: 1
      opacityOnHover: 0.2

Models

There are many ways to use different models:

a. live2d_models’s subfolder name

  1. Create a live2d_models folder at your blog’s root directory.

  2. Create a folder by the name of your model.

  3. Copy your model to this folder.

  4. Type the folder name into model.use in _config.yml.

An Example:

Your model is named mymiku.

Then, create a folder at / (Which should exists _config.yml, sources,
themes ) named mymiku.

Copy your model to /live2d_models/mymiku/.

Up to now, there should be an .model.json file (for example, mymiku.model.json)

in the directory of /live2d_models/mymiku/.

Type mymiku into model.use in _config.yml.

b. custom path relative to hexo base dir

You can just type your model folder’s path which is relative to hexo base dir.

An example: ./wives/wanko

c. npm module’s name

use exist ones

We alreday have tons of models, check this out

Click me if you are lazy
  • 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

You can use npm install {your model's package name} to install,

and type it into model.use in _config.yml to use it.

make your own ones

  • Create an folder, use your node environment run npm init, we recommend
    you to name it like

live2d-widget-model-xxx.

  • Create an assets folder in the folder you just created, copy your model
    files into it.

Here’s an example:

live2d-widget-model-wanko

  • Use npm publish to publish it.

  • Then use npm install --save live2d-widget-model-xxx,

and you can just type your package name(live2d-widget-model-wanko) into model.use

d. Your own CDN

If you are disappointed without CDN, you can just type your own .model.json
url into model.use.

Forked from hexo-helper-live2d
also from Here
Bonus: Hexo博客NexT主题美化之新增看板娘(能说话、能换装)