如何给你的Jekyll博客添加可爱的二次元看板娘(Live2D)

有朋友问这个右下角的小东西是怎么弄出来的,今天就手把手教你。请往下看:

Live2D

Add the Sseexxyyy live2d to your webpages! 1 点击查看作者博客和看板娘效果

给你的博客一个萌(超)萌(性)哒(感)的二次元看板娘!

可惜作者并没有直接提供Jekyll的安装方式,要我们用Jekyll的怎么活呢?

在Jekyll上安装

本人比较懒,也懒得研究里面的原理,所以这里就提供一个简单的“笨办法”。

既然作者提供了Hexo博客的安装方式,为什么不将计就计,用Hexo把看板娘引出来~~~。想来无论是Jekyll还是Hexo,最后都是静态的对吧?那就一定可以揪出那段代码。

事不宜迟,赶紧动手来做。重点在如何获取那段代码,其他的细节如果有疑问请留下评论。

安装Hexo

按照默认的方式安装Hexo。

$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

有关Hexo的细节,详见Hexo官网,这里不再赘述。

安装后应该如下图所示:

安装Live2D

先安装hexo-helper-live2d,见该项目

经测试我使用npm install --save hexo-helper-live2d并没有安装成功,所以可以用yarn add hexo-helper-live2d来安装。

将下面的代码添加到Hexo博客的配置文件_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-models

直接把这个项目下载下来,这里包含了所有的看板娘资源。下面以live2d-widget-model-wanko(也就是本站所用的)为例。

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

注意_config.xml中的model下面的uselive2d_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>

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

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

大功告成!

  1. 大神链接:https://github.com/xiazeyu/live2d-widget.js 

「觉得本文有用请点击」

蛋萌 Done.moe

0%