hexo之live2d打造萌萌宠物

技术背景

Live2D是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像,对于以动画风格为主的冒险游戏来说非常有用,缺点是Live 2D人物无法大幅度转身,开发商正设法让该技术可显示360度图像。---《百度百科》

起步

安装npm包

1
npm install --save hexo-helper-live2d

修改主题配置文件

layout/layout.ejs 或者 layout/_layout.swig文件中
<body>之前加入一段代码

  • 如果是ejs文件,代码为

    1
    <%- live2d() %>
  • 如果是swig文件,代码为

    1
    {{ live2d() }}

然后在 hexo 的配置文件 _config.yml中添加:

1
2
3
live2d:
model: haru01
bottom: -40

启动命令行并执行

1
2
hexo  clean
hexo g -d

就可以看到效果了,很简单的。
这样如果在手机上预览体验不是很好,可以配置成这样
在参数中加一句:

1
mobileShow: false

这样在手机上就不会显示了。

参数讲解

  • model是指live2d的2d模型,npm包默认安装了许多模型,可以自行更改。可以满足绝大多数人的需求。
    具体可以参考淘宝npm镜像官网中关于live2d的说明

  • bottom 是指底部偏移值,可以根据自己的实际情况更改

  • width 模型宽度 默认150
  • height 模型高度 默认300

说明

这只是初步搭建好了live2d效果,其实live2d有很多可以配置的东西。
那详细讲下去需要很多的篇幅(哈哈,其实我也不会更厉害的,在这里只做初级的入门。
如果想想要更多学习live2d的知识,请参考以下链接:

结尾容我矫情几句

我可能是中了hexo的魔法了,总是喜欢折腾来,折腾去,乐此不疲。因而浪费的很多时间,但同时学到了非常多的知识,也认识了一批有趣的小伙伴。
今天是2018年的第一天,希望2018年能够实现自己的一些小目标。
又老了一岁,岁月啊,真是无情。

那一天我二十一岁,在我一生的黄金时代,我有好多奢望。我想爱,想吃,还想在一瞬间变成天上半明半暗的云,后来我才知道,生活就是个缓慢受锤的过程,人一天天老下去,奢望也一天天消逝,最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去,什么也锤不了我。
——-王小波《黄金时代》