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

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.

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

Gantzert_Felixander

haru

miku

ni-j

nico

nietzche

nipsilon

nito

shizuku

tsumiki

wanko

z16

hibiki

koharu

haruto

Unitychan

tororo

hijiki

Contribute

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

CONTRIBUTING

Releated projects

• Cubism SDK WebGL 2.1

• pixi-live2d

• CubismJsComponents

About me

Imported

Open sourced under the GPL v2.0 license.