原文链接←还有其他的next美化

live2d是这几年比较火热的一门技术，是应用于游戏中的一种绘图渲染，近几年广泛应用于手游中（作为看板）。
很意外的，它也很适用于博客中。
虽然本身的功能不大，但是作为美化来说还是十分可爱的。

虽然有朋友在研究这项技术，但由于我本身的画图技术不强，对于live2d的制作就不讲了，只说如何放上一个live2d。

简易版

如果对于看板娘的要求不是特别高，只是需要放在那里卖个萌就行，建议用简易版的就ok。比较常见于各个博客的看板娘类型。

安装插件：

npm install --save hexo-helper-live2d

安装模型（模型的样式可以参考这里，把packagename的名字换成自己喜欢的模型名即可）：

npm install packagename

当然你也可以用自己制作的模型和网上下载的，一些详细的设置可以参考作者文档。

中级版

比起简易版添加了对话框功能。

长这样（↓）

1.jpg

首先下载大佬的github代码，把下载下来的文件更名为live2d，然后放到themes\next\source文件里。

打开\themes\next\layout下的_layout.swig，在body标签内添加：




    
    
    隐藏

如要修改模型，修改上面代码的loadlive2d路径即可。

如要修改点击时看板娘或者鼠标放在某个元素上的对话，打开live2d文件中的message.json进行修改。

1.gif

拥有换装、换人、飞机大战小游戏等功能的看板娘（也就是我现在正在用的。）

首先下载大佬的github文件，修改好名字放置于\themes\next\source下（当然你也可以选择直接fork仓库，如果你不想下载文件的话就直接跳过这一段吧）。

打开_layout.swig文件，先在head标签下添加依赖，否则无法正常显示：

然后再在footer标签下添加：

打开live2d文件下的autoloads.js文件，修改绝对路径：

const live2d_path = "/live2d/";

其他的就按照自己的需求修改。

例如waifu.css修改看板的大小和位置，waifu-tips.json修改对话。

screenshot.1.jpg

总之，更多的内容就自己摸索吧！

其实不用下下来文件也可以直接用，用法是添加在添加依赖后直接添加一行代码在footer标签。

这个是直接用的大佬的仓库，你可以选择把仓库fork下来，然后自行修改（如下，修改username为你的github名称）。

无论是用fork仓库的方法还是下载文件，都是无法改变模型的，如果想要改变模型，就需要自建api（详情参考这里）。

——————————————————————————————
这里是soya
邮箱：[email protected]
个人博客地址：https://soyawww.github.io
欢迎各位交流探讨哦！