Skip to content
This repository has been archived by the owner on Jan 27, 2021. It is now read-only.

Commit

Permalink
docs: update document
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiazeyu
xiazeyu committed Feb 14, 2018
1 parent 5e39c6a commit 9cb1914
Show file tree
Hide file tree
Showing 2 changed files with 457 additions and 128 deletions.
256 changes: 128 additions & 128 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 hexo-helper-live2d@3.x` 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/live2d-widget@3.x/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/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](./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
Expand Down
Loading

0 comments on commit 9cb1914

Please sign in to comment.