Jekyll 博客添加二次元看板娘（Live2D）

安装hexo

$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server
yarn add hexo-helper-live2d

添加配置

在配置文件 _config.xml 中添加

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

下载看板娘资源

看板娘资源 看板娘展示

直接把这个项目下载下来，这里包含了所有的看板娘资源。下面以 live2d-widget-model-wanko 为例。

找到项目里的live2d-widget-model-wanko文件夹，把里面assets里面的内容（不含assets文件夹），拷贝到Hexo的blog文件夹下新建一个live2d_models\wanko文件夹中。

注意_config.xml中的model下面的use和live2d_models下面的文件夹相对应。

运行 hexo serve， 右下角是否有 wanko了？

如果一切正常，hexo deploy 来编译 Hexo 博客了。执行后，你会欣喜的发现在public（Hexo编译后的网站静态文件）文件夹中，找到 live2dw 文件夹，这就是编译后的看板娘文件了。 然后打开 index.html，拉倒最底下，看到如下代码：

<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script>
<script>L2Dwidget.init({
  "pluginRootPath":"live2dw/",
  "pluginJsPath":"lib/",
  "pluginModelPath":"assets/",
  "tagMode":false,
  "debug":false,
  "model":{"jsonPath":"/live2dw/assets/wanko.model.json"},
  "display":{"position":"right","width":150,"height":300},
  "mobile":{"show":true},"log":false});</script>

恭喜你这就是召唤看板娘的代码了！其中 width 和 height 你可以根据看板娘的大小进行修改。

将 live2dw 文件夹复制到你的 jekyll 博客目录下，将上面的代码复制到 footer.html 模板或者想要的页面。

参考链接