hexo-helper-live2d

v3.1.1

Published

2 years ago

Add the Sseexxyyy live2d to your hexo!

Downloads

2,939

0High
0Medium
0Low

cn_eyhn

xiazeyu

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

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.

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

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.
Type the folder name into model.use in _config.yml.

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

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