Live2D in Hexo
Feel so lonely building your own blog? You can add a anime character on your blog!
Installation
1. Hexo Side
Install module:
1 |
|
try
yarn add hexo-helper-live2d
for better installation experience.
Yarn
2. Get your model
Install module:
1 |
|
Config
Add configuration in hexo’s _config.yml
file or theme’s _config.yml
.
An Example:
1 | # Live2D |
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
.
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
(usenpm install --save live2d-widget-model-haru
)live2d-widget-model-haru/02
(usenpm 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:
-
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
.
Forked from hexo-helper-live2d
also from Here
Bonus: Hexo博客NexT主题美化之新增看板娘(能说话、能换装)