给hexo博客添加Live2d小人

我们在观看别人的博客的时候有时就会发现他们的博客里面有个很可爱的小人，那么如何在自己的hexo博客中添加小人呢?
有两种方法：

1. 安装 hexo-helper-live2d 模块

安装模块

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

然后再博客根目录的 _config.yml 添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# live2d
live2d:
  enable: true  # 是否启动
  scriptFrom: local # 默认
  pluginRootPath: live2dw/  # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/  # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/  # 模型文件相对与插件根目录路径
  tagMode: false  # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false  # 调试, 是否在控制台输出日志
  model:
    use: nepmaid  ## 模型文件
  display:
    position: right # 定位方向 left right top bottom
    width: 150  # 小人宽度
    height: 300 #  小人高度
    hOffset: -15  # 向 偏移
    vOffset: -15  # 像 偏移
  mobile:
    show: false  # 手机端是否显示
  react:
    opacity: 0.7  # 模型透明度

注意缩进，否则配置无效
然后 下载好 live2d 模型

1
git clone https://github.com/summerscar/live2dDemo

接下来在博客根目录新建一个 live2d_models 目录
在 live2dDemo/assets/ 目录里找到你需要的模型目录 并把他们整个复制到 live2d_models 目录中

1
2
3
规则：live2d_models/<模块名>

比如: live2d_models/nepmaid

有些模型的配置文件命名可能不规范需要自行修改文件名
打开模块文件夹 找到 mode.json 或者其他 改名为 <模块名>.mode.json

最后修改 _config.yml 里面刚刚添加的 live2d 配置条目里面的:

1
2
model:
  use: nepmaid  ## 模型文件

大功告成 最后输入 

1
2
3
hexo clean
hexo generate
hexo server

然后清除一下浏览器缓存，打开后就可以发现我们添加的小人已经在你的博客里面看着你了

2.使用 live2d-widget 项目
github 地址: https://github.com/stevenjoezhang/live2d-widget
这个比较复杂 需要一定的代码基础

如果你是小白，或者只需要最基础的功能，那么只用将这一行代码加入到你主题文件夹里面的布局文件 找到带有 head 或 body 标签的布局文件中 

1
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

更多请参考官方文档 https://github.com/stevenjoezhang/live2d-widget/blob/master/README.md
或者 https://www.bilibili.com/read/cv18133283/

效果演示

hexo-helper-live2d

live2d-widget