hexo-helper-live2d

Read this in other languages: English, 简体中文.

Add the Sseexxyyy live2d to your hexo!

Demo: https://l2dwidget.js.org/dev.html

Author's original Blog: https://huaji8.top/post/live2d-plugin-2.0/

Installation

Hexo

Install module:

npm install --save hexo-helper-live2d

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

Still using legacy version?

• If you want to use new injector, which will inject to all pages:

Please delete {{ live2d() }} or <%- live2d() %> before </body> in layout/layout.ejs or layout/_layout.swig.

• If you want to use the old replace mode, which only replace live2d tag:

Keep {{ live2d() }} or <%- live2d() %>, and turn the tagMode config to true.

We recommend you to use npm install --save [email protected] to force install the latest version.

Tag mode

Please insert {{ live2d() }}(swig) or <%- live2d() %>(ejs) before </body> in whichever pages you want to insert. And turn tagMode config to true, and then live2dwidget will only be on those who have live2d tag.

Others, for jekyll, wordpress, etc

See live2d-widget.js WIP.

Config

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

An Example:

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

Detail settings

Settings is divided into helper-specific ones and general ones, You can merge these two into your _config.yml file.

Helper-specific

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  pluginRootPath: live2dw/ # Root path of plugin to be on the site (Relative)
  pluginJsPath: lib/ # JavaScript path related to plugin's root (Relative)
  pluginModelPath: assets/ # Relative model path related to plugin's root (Relative)
  scriptFrom: local # Default
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.min.js # Your custom url
  tagMode: false # Whether only to replace live2d tag instead of inject to all pages
  log: false # Whether to show logs in console
  model:
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # folder name in (hexo base dir)/live2d_models/
    # use: ./wives/wanko # folder path relative to hexo base dir
    # use: https://cdn.jsdelivr.net/npm/[email protected]/assets/wanko.model.json # Your custom url

To see Chinese explainations, please have a look at Chinese document.

General Settings

Recentlly may changes quickly, but don't worry, it won't make huge changes.

See live2d-widget.js API

An example:

# 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

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.

Enjoy!:beer:

Cheer for the 3.0 version and the new year!~

This is my first hexo plugin, star ⭐ and watch 👓, pull request is also welcomed.

Screenshots

TBD.

Contribute

Please pay enough attention to this document if you want to commit your changes or submit issues

This may help you a lot. All kinds of contributions are welcome.

CONTRIBUTING

Releated projects

• live2d-widget.js

• live2d-widget-models

• Cubism SDK WebGL 2.1

About me

Imported

Open sourced under the GPL v2.0 license.