Neptunian Parity Mnemonic

    hexo-helper-live2d

    3.1.1 • Public • Published

    hexo-helper-live2d

    npm package [dependencies][dependencies-url] [devDependencies][devDependencies-url]

    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 hexo-helper-live2d@3.x 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/live2d-widget@3.x/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/live2d-widget-model-wanko@1.0.5/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!🍺

    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.

    [dependencies-url]: javascript:void(0);

    [devDependencies-url]: javascript:void(0);

    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]

    Keywords

    none

    Install

    npm i hexo-helper-live2d

    DownloadsWeekly Downloads

    744

    Version

    3.1.1

    License

    GPL-2.0

    Unpacked Size

    164 kB

    Total Files

    27

    Last publish

    Collaborators

    • cn_eyhn
    • xiazeyu