GithubHelp home page GithubHelp logo

sangjunke / hexo-helper-live2d Goto Github PK

View Code? Open in Web Editor NEW

This project forked from eyhn/hexo-helper-live2d

0.0 1.0 0.0 109.7 MB

Add the Sseexxyyy live2d to your hexo!

License: GNU General Public License v2.0

JavaScript 100.00%

hexo-helper-live2d's Introduction

hexo-helper-live2d

npm package dependencies devDependencies

downloads-total downloads-month

stars forks issues

commitizen PRs license

Backers on Open Collective Sponsors on Open Collective

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
  react:
    opacity: 0.7

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

Contributors

contributors

About me

author author QQ author email

collaborator0 collaborator0 QQ collaborator0 email

Imported

current-device


Open sourced under the GPL v2.0 license.

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

hexo-helper-live2d's People

Contributors

eyhn avatar gwzz avatar journey-ad avatar monkeywithacupcake avatar xiazeyu avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.