hexo-helper-live2d

Important! 3.0 is under developement, informations below CANNOT WORK PROPERLY. Please visit https://www.npmjs.com/package/hexo-helper-live2d for USEABLE VERSION.

Add the Sseexxyyy live2d to your hexo!

New web Demo and code generator: https://eyhn.in/hexo-helper-live2d/

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

Installation

Hexo

Install module:

npm install --save hexo-helper-live2d

Come across npm problem ?

Try to use npm cache verify or npm cache clean to fix it.

Used legacy version before ?

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

Webpack

Only when you want to do some further developement or advanced useage.

Install module:

npm install --save hexo-helper-live2d

Import module:

import loadlive2d from 'hexo-helper-live2d';

// TBD.

Config

Add configuration in hexo's _config.yml file.

An Example:

live2d:
  model: nipsilon

Settings

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  model: z16 # The model that you are willing to show. default: z16
  width: 150 # The width of your model. default: 150
  height: 300 # The height of your model. default: 300
  scaling: 1 # The scaling of the resolution. default: 2
  opacityDefault: 0.7 # The default opacity. default: 0.7
  opacityHover: 1 # The opacity when hover. default: 1
  mobileShow: true # Whether to show on mobile devices. default: true
  mobileScaling: 0.5 # The scaling on mobile. default: 0.5
  position: right # Which side the model is shown at. default: right
  horizontalOffset: 0 # The horizontal offset. default: 0
  verticalOffset: -20 # The offset of the bottom. default: -20
  id: live2dcanvas # The ID of the live2d element. default: live2dcanvas
  deviceJsSource: local # The source of the current-device script. default: local

To use settings in Chinese, please have a look at Chinese document.

OPTION	default value	Optional value	description
model	`z16`	limited string See below	The model that you are willing to show.
width	`150`	real	The width of your model.
height	`300`	real	The height of your model.
scaling	`2`	real 1 = 100%	The scaling of the resolution. The greater the value is setted, less mosaic it will be. Now have bug, see #32, not until the bug is solved, please set this value to 1.
opacityDefault	`0.7`	real 0 - 1	The default opacity. (Beta)
opacityHover	`1`	real 0 - 1	The opacity when hover. (Beta)
mobileShow	`true`	`true` / `false`	Whether to show on mobile devices.
mobileScaling	`0.5`	real 1 = 100%	The scaling on mobile.
position	`right`	`left` / `right`	`left` or `right` side the model is shown at.
horizontalOffset	`0`	real	The horizontal offset. Change this variable to adjust the position of model.
verticalOffset	`-20`	real	The offset of the bottom. Change this variable to adjust the position of model.
id	`live2dcanvas`	string	The ID of the `<canvas>` element.
deviceJsSource	`local`	`local` / `official` / `string`	The source of the current-device script. We have three options to choose: `local`: Default, highly recommended. Use the local version of script. Compressed using webpack. `official`: Use the official link. https://unpkg.com/current-device/umd/current-device.min.js `(your CDN url path)`: put your own CDN path here, must contain `.js`.

Current supported models:

chitose
Epsilon2.1
Gantzert_Felixander
haru01
haru02
haruto
hibiki
hijiki
izumi
koharu
miku
nico
ni-j
nipsilon
nito
shizuku
tororo
tsumiki
Unitychan
wanko
z16

Custom model

Create a live2d_models folder at your blog's root directory.
Create a folder by the name of your model.
Copy your model to this folder.

Attention! The path of the model's json must be /live2d_models/{name}/{name}.model.json

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 mymiku.model.json in the directory of /live2d_models/mymiku/.

~~The problem was once releated to (#22).~~

Enjoy!:beer:

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

Github: https://github.com/EYHN/hexo-helper-live2d

issues: https://github.com/EYHN/hexo-helper-live2d/issues

Screenshots

Attention! The name above the shown screenshoot may not be the true name of the model. Please go to the "Settings" to find the true value of "model"

Epsilon2.1