This repository has been archived by the owner on Jan 27, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 471
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
457 additions
and
128 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,15 +17,15 @@ | |
|
||
# hexo-helper-live2d | ||
|
||
[简体中文文档](./README.zh-CN.md) | ||
Read this in other languages: [English](README.md), [简体中文](README.zh-CN.md). | ||
|
||
<br> | ||
|
||
Add the Sseexxyyy live2d to your hexo! | ||
|
||
Demo: [https://eyhn.in/hexo-helper-live2d/](https://xiazeyu.github.io/live2d-widget.js-doc/dev.html) | ||
Demo: [https://l2dwidget.js.org/dev.html](https://l2dwidget.js.org/dev.html) | ||
|
||
Author's Blog: [https://huaji8.top/post/live2d-plugin-2.0/](https://huaji8.top/post/live2d-plugin-2.0/) | ||
Author's original Blog: [https://huaji8.top/post/live2d-plugin-2.0/](https://huaji8.top/post/live2d-plugin-2.0/) | ||
|
||
|
||
## Installation | ||
|
@@ -38,221 +38,221 @@ Install module: | |
npm install --save hexo-helper-live2d | ||
``` | ||
|
||
<details><summary>Used legacy version before ?</summary><br> | ||
<details><summary>Still using legacy version?</summary><br> | ||
|
||
Please delete `{{ live2d() }}` or `<%- live2d() %>` before `</body>` in `layout/layout.ejs` or `layout/_layout.swig`. | ||
|
||
We recommend you to use `npm install --save [email protected]` to force install the latest version. | ||
|
||
</details> | ||
|
||
### Others, including webpack | ||
### Others, for jekyll, wordpress, etc. | ||
|
||
See [live2d-widget.js](https://github.com/xiazeyu/live2d-widget.js) | ||
See [live2d-widget.js](https://github.com/xiazeyu/live2d-widget.js) WIP. | ||
|
||
## Config | ||
|
||
Add configuration in hexo's `_config.yml` file. | ||
Add configuration in hexo's `_config.yml` file or theme's `_config.yml`. | ||
|
||
An Example: | ||
|
||
``` yml | ||
live2d: | ||
model: nipsilon | ||
enable: true | ||
scriptFrom: local | ||
model: | ||
use: live2d-widget-model-wanko | ||
display: | ||
position: right | ||
width: 150 | ||
height: 300 | ||
mobile: | ||
show: true | ||
``` | ||
## Settings | ||
## Detail settings | ||
Settings is divided into helper-specific ones and general ones, | ||
You can merge these two into your `_config.yml` file. | ||
|
||
### Helper-specific | ||
|
||
``` yml | ||
# Live2D | ||
## https://github.com/EYHN/hexo-helper-live2d | ||
live2d: | ||
enable: true | ||
scriptFrom: local # 'local'(1)||'jsdelivr'(2)||'unpkg'(3)||{Your own path, String}(4) | ||
# enable: false | ||
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 | ||
model: | ||
use: live2d-widget-model-miku # {npm-module name}(1)||{folder name in hexo.base_dir/live2d_models/}(2)||{folder name related to hexo.base_dir}(3)||{your own path of model.json, String}(4) | ||
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](./README.zh-CN.md). | ||
<details><summary>Current supported models:</summary><br> | ||
- `chitose` | ||
- `Epsilon2.1` | ||
- `Gantzert_Felixander` | ||
- `haru01` | ||
- `haru02` | ||
- `haruto` | ||
- `hibiki` | ||
- `hijiki` | ||
- `izumi` | ||
- `koharu` | ||
- `miku` | ||
- `nico` | ||
- `ni-j` | ||
- `nipsilon` | ||
- `nito` | ||
- `shizuku` | ||
- `tororo` | ||
- `tsumiki` | ||
- `Unitychan` | ||
- `wanko` | ||
- `z16` | ||
> To see Chinese explainations, please have a look at [Chinese document](README.zh-CN.md). | ||
|
||
</details> | ||
|
||
## Custom model | ||
### General Settings | ||
|
||
### a. live2d_models folder | ||
1. Create a `live2d_models` folder at your blog's root directory. | ||
Recentlly may changes quickly, but don't worry, it won't make huge changes. | ||
|
||
2. Create a folder by the name of your model. | ||
See [live2d-widget.js API](https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init) | ||
|
||
3. Copy your model to this folder. | ||
|
||
**Attention! The path of the model's json must be `/live2d_models/{name}/{name}.model.json`** | ||
|
||
<details><summary>An Example:</summary><br> | ||
|
||
Your model is named `mymiku`. | ||
|
||
Then, create a folder at `/` (Which should exists `_config.yml` 、`sources` 、 `themes` ) named `mymiku`. | ||
An example: | ||
|
||
Copy your model to `/live2d_models/mymiku/`. | ||
|
||
Up to now, there should be `mymiku.model.json` in the directory of `/live2d_models/mymiku/`. | ||
|
||
</details> | ||
|
||
### b. npm modules | ||
|
||
Release your package named like `live2d-widget-model-xxx`, and type it into `model.use` in `_config.yml` | ||
|
||
<br> | ||
```yml | ||
# 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 | ||
``` | ||
|
||
Enjoy!:beer: | ||
|
||
> This is my first hexo plugin, star :star: and watch :eyeglasses:, pull request is also welcomed. | ||
## Models | ||
|
||
Github: [https://github.com/EYHN/hexo-helper-live2d](https://github.com/EYHN/hexo-helper-live2d) | ||
There are many ways to use different models: | ||
|
||
issues: [https://github.com/EYHN/hexo-helper-live2d/issues](https://github.com/EYHN/hexo-helper-live2d/issues) | ||
### a. live2d_models's subfolder name | ||
|
||
1. Create a `live2d_models` folder at your blog's root directory. | ||
|
||
## Screenshots | ||
2. Create a folder by the name of your model. | ||
|
||
**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"** | ||
3. Copy your model to this folder. | ||
|
||
<details><summary>Epsilon2.1</summary><br> | ||
4. Type the folder name into `model.use` in `_config.yml`. | ||
|
||
![](https://huaji8.top/img/live2d/Epsilon2.1.gif) | ||
<details><summary>An Example:</summary><br> | ||
|
||
</details> | ||
<details><summary>Gantzert_Felixander</summary><br> | ||
Your model is named `mymiku`. | ||
|
||
![](https://huaji8.top/img/live2d/Gantzert_Felixander.gif) | ||
Then, create a folder at `/` (Which should exists `_config.yml` 、`sources` 、 `themes` ) named `mymiku`. | ||
|
||
</details> | ||
<details><summary>haru</summary><br> | ||
Copy your model to `/live2d_models/mymiku/`. | ||
|
||
![](https://huaji8.top/img/live2d/haru.gif) | ||
Up to now, there should be an `.model.json` file (for example, `mymiku.model.json`) | ||
|
||
</details> | ||
<details><summary>miku</summary><br> | ||
in the directory of `/live2d_models/mymiku/`. | ||
|
||
![](https://huaji8.top/img/live2d/miku.gif) | ||
Type `mymiku` into `model.use` in `_config.yml`. | ||
|
||
</details> | ||
<details><summary>ni-j</summary><br> | ||
|
||
![](https://huaji8.top/img/live2d/ni-j.gif) | ||
|
||
</details> | ||
<details><summary>nico</summary><br> | ||
### b. custom path relative to hexo base dir | ||
|
||
![](https://huaji8.top/img/live2d/nico.gif) | ||
You can just type your model folder's path which is **relative to hexo base dir**. | ||
|
||
</details> | ||
<details><summary>nietzche</summary><br> | ||
An example: `./wives/wanko` | ||
|
||
![](https://huaji8.top/img/live2d/nietzche.gif) | ||
### c. npm module's name | ||
|
||
</details> | ||
<details><summary>nipsilon</summary><br> | ||
#### use exist ones | ||
|
||
![](https://huaji8.top/img/live2d/nipsilon.gif) | ||
We alreday have tons of models, [check this out](https://github.com/xiazeyu/live2d-widget-models) | ||
|
||
</details> | ||
<details><summary>nito</summary><br> | ||
<details><summary>Click me if you are lazy</summary><br> | ||
|
||
![](https://huaji8.top/img/live2d/nito.gif) | ||
- `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` | ||
|
||
</details> | ||
<details><summary>shizuku</summary><br> | ||
|
||
![](https://huaji8.top/img/live2d/shizuku.gif) | ||
|
||
</details> | ||
<details><summary>tsumiki</summary><br> | ||
You can use `npm install {your model's package name}` to install, | ||
|
||
![](https://huaji8.top/img/live2d/tsumiki.gif) | ||
and type it into `model.use` in `_config.yml` to use it. | ||
|
||
</details> | ||
<details><summary>wanko</summary><br> | ||
#### make your own ones | ||
|
||
![](https://huaji8.top/img/live2d/wanko.gif) | ||
1. Create an folder, use your node environment run `npm init`, we recommend you to name it like | ||
|
||
</details> | ||
<details><summary>z16</summary><br> | ||
`live2d-widget-model-xxx`. | ||
|
||
![](https://huaji8.top/img/live2d/z16.gif) | ||
2. Create an `assets` folder in the folder you just created, copy your model files into it. | ||
|
||
</details> | ||
<details><summary>hibiki</summary><br> | ||
Here's an example: | ||
|
||
![](https://huaji8.top/img/live2d/hibiki.gif) | ||
[live2d-widget-model-wanko](https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko) | ||
|
||
</details> | ||
<details><summary>koharu</summary><br> | ||
3. Use `npm publish` to publish it. | ||
|
||
![](https://huaji8.top/img/live2d/koharu.gif) | ||
4. Then use `npm install --save live2d-widget-model-xxx`, | ||
|
||
</details> | ||
<details><summary>haruto</summary><br> | ||
and you can just type your package name(`live2d-widget-model-wanko`) into `model.use` | ||
|
||
![](https://huaji8.top/img/live2d/haruto.gif) | ||
### d. Your own CDN | ||
|
||
</details> | ||
<details><summary>Unitychan</summary><br> | ||
If you are disappointed without CDN, you can just type your own `.model.json` url into `model.use`. | ||
|
||
![](https://huaji8.top/img/live2d/Unitychan.gif) | ||
<br> | ||
|
||
</details> | ||
<details><summary>tororo</summary><br> | ||
Enjoy!:beer: | ||
|
||
![](https://huaji8.top/img/live2d/tororo.gif) | ||
Cheer for the 3.0 version and the new year!~ | ||
|
||
</details> | ||
<details><summary>hijiki</summary><br> | ||
> This is my first hexo plugin, star :star: and watch :eyeglasses:, pull request is also welcomed. | ||
|
||
![](https://huaji8.top/img/live2d/hijiki.gif) | ||
## Screenshots | ||
|
||
</details> | ||
[TBD.](https://huaji8.top/post/live2d-plugin-2.0/) | ||
|
||
## 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](./CONTRIBUTING.md) | ||
|
||
## Releated projects | ||
|
||
- [live2d-widget.js](https://github.com/xiazeyu/live2d-widget.js) | ||
|
||
- [Cubism SDK WebGL 2.1](http://sites.cybernoids.jp/cubism-sdk2_e/webgl2-1) | ||
|
||
- [pixi-live2d](https://github.com/avgjs/pixi-live2d) | ||
- [live2d-widget-models](https://github.com/xiazeyu/live2d-widget-models) | ||
|
||
- [CubismJsComponents](https://github.com/Live2D/CubismJsComponents) | ||
- [Cubism SDK WebGL 2.1](http://sites.cybernoids.jp/cubism-sdk2_e/webgl2-1) | ||
|
||
|
||
## About me | ||
|
Oops, something went wrong.