欢迎Shizuku入住博客

368 2
Hexo live2D Shizuku
  1. 前言
  2. 安装live2D
  3. 配置_config.yml
  4. 迎接Shizuku
  5. 效果展示

生活不易，至少还有Shizuku：
玩Hexo博客还在热恋期，干货没有，瞎鼓捣的导倒是不少。今天给大家带来的是我博客中唯一的女生——Shizuku。

前言

首先欢迎Shizuku！

……没了？

安装live2D

1
$ npm install hexo-helper-live2d --save

可以说这个插件就是她妈，没有她妈就没她啊（举手，表示没骂人，真的）

配置_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: // 这里是我的Shizuku的小窝
  display:
    position: left
    width: 60
    height: 120
    hOffset: 65
    vOffset: 0
  mobile:
    show: true
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

迎接Shizuku

1
$ npm install live2d-widget-model-shizuku --save

并在_config.yml中的小窝旁边写下Shizuku的大名：

1
2
3
4
5
6
7
……
debug: false
model:
  use: live2d-widget-model-shizuku // Shizuku的大名
display:
  position: left
……

大家根据自己的博客布局和喜好对Shizuku进行位置调整

1
2
3
4
5
6
display:
  position: left
  width: 60
  height: 120
  hOffset: 65
  vOffset: 0

不懂这些参数什么意思不重要，不要恐惧，先尝试改些参数，看Shizuku往哪边移动，然后再进行定向的调整。

效果展示

1
$ hexo clean && hexo g && hexo s

然后在浏览器中打开http://localhost:4000，在左下角就能看到可爱的Shizuku了。

Shizuku

如果有想拥有自己Shizuku的小伙伴，希望大家通过我的笔记也能顺利迎来属于自己的Shizuku。


关注公众号

当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器