前段时间我的博客是用 Hexo 搭建的，当时我给我博客做了一个小猫咪的挂件，蛮有趣的。后来因为 Hexo 生成静态页面速度慢的问题我转向了 Hugo 来搭建我的个人博客，这个小猫咪也换成了看板娘，这些其实都是基于 Live2d 的，接下来我给大家说一下怎么给你的博客添加，无论你的博客是基于 WordPress 的还是基于 Hexo 的，或者和我一样是基于 Hugo 的都可以参考本文。
Live2d 是什么
Live2d 的官网地址：https://www.live2d.com/zh-CHS/
Live2d 是一种 2d 的绘图渲染技术，是由日本的一个叫 Cybernoids 的公司开发，通过一系列可以连续动画的的人物或者动物来建立模型，生成一种可以动的 2d 图形或者说二维模型。这种模型和二次元很接近，所以喜欢这种风格的人很多，但是也有它自身的缺陷那就是不容易商业化和更快的发展，例如现在的 3d 模型在游戏上和 VR 技术上有很大的发展空间，而 Live2d 至今还没有找到合适的契合点，但是这丝毫不影响宅男对这项技术的热爱。
Live2d 的制作过程
官网下载安装包直接安装可以得到两种软件，分别是 Cubism Modeler 和 Cubism Animator，最后我们还需要安装第三个软件 Viewer 用作预览调戏等。
由于还是由 2d 图形制作，所以对动画师要求比较高，除去原画绘制能力，动画师还需要具有一定三维空间感，以及复杂逻辑能力。制作过程大致如下：
- 使用
PhotoShop制作psd格式的原画切图。 - 导入
Cubism Modeler里蒙皮。 - 设置蒙皮。
- 导出到
Cubism Animator里面开始制作动画。 - 最后再导出文件就完成了。
引入看板娘博客挂件
第一步：依赖 Dependencies
你要确保你的页面中可以使用 font-awesome, 需要使用到，还有就是 jQuery 是否有添加。
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
如果你发现没有显示出来，检查一下你的 jQuery 是否正常引入了。
第二步：使用 Usage
你可以使用一行代码完成看板娘的引入，你只需要在你的 footer 中添加如下代码即可：
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
做完这两步你已经完成了，但是我们这样做还是不够的，例如我们想修改看板娘上面的提示文字和锚点，和自己的网站内容关联和呼应，这样就需要将下面这几个文件下载到本地静态文件夹即可。
这些文件你可以在原作者的 GitHub 上面下载，下载地址：https://github.com/stevenjoezhang/live2d-widget
接下来你只需要配置一下 autoload.js 里面的根目录即可，配置如下：
//注意：live2d_path 参数应使用绝对路径
const live2d_path = "/live2d/";
自定义 Live2d 看板娘
安装完成后我们可以对看板娘的样式和头顶的气泡消息自定义，这样可以做出和自己网站很契合的交互效果，使这个看板娘成为你网站上独一无二的。
Live2d 看板娘大小调整
调整看板娘的大小和上面气泡对话框的大小，还有侧边菜单的样式，是否显示等都可以在 waifu.css 样式文件中进行修改，我们只需要在浏览器中 F12 查看对应控件的名称即可，在样式文件中找到对应的元素标签进行修改即可。
当然，你也可以在浏览器中修改样式，这样可以一边修改一边查看效果，将有效果的修改结果更改到 waifu.css 文件中即可。
Live2d 自定义隐藏功能
我们如果想要隐藏组件中的某些地方，或者修改跳转链接，或者自定义显示按钮图标的样子都可以通过修改 waifu-tips.js 文件实现，例如我们要更改菜单的多少，可以这样修改：
$("body").append(`<div id="waifu">
<div id="waifu-tips"></div>
<canvas id="live2d" width="300" height="300"></canvas>
<div id="waifu-tool">
<span class="fa fa-lg fa-paper-plane"></span>
<span class="fa fa-lg fa-user-circle"></span>
<span class="fa fa-lg fa-street-view"></span>
<span class="fa fa-lg fa-camera-retro"></span>
<span class="fa fa-lg fa-times"></span>
</div>
</div>`);
只需要修改这里的标签，不需要的删除即可，如果要添加就追加一个，其他地方也是类似的设置，如果需要你可以查看该文件修改其他地方。
Live2d 看板娘对话自定义
我们的看板娘会时不时的和我们对话，而且你会发现当你的鼠标从某个标签或者链接上面移动过后，看板娘都会和你互动，而这个互动可能和我们的网站内容不契合，所以我们需要打开文件 waifu-tips.json 来进行修改，或者进行删除，当然也可以添加新的。
这个文件里面的内容大致结构如下：
{
"mouseover": [{
"selector": "#waifu #live2d",
"text": ["对话提示一", "对话提示二"]
}],
"click": [{
"selector": "#waifu #live2d",
"text": ["对话提示一", "对话提示二"]
}],
"seasons": [{
"date": "01/01",
"text": "对话提示"
}]
}
从上面的 json 结构中可以看出来，实际上对我们的事件响应做出三个分类，一种使鼠标移动事件，另一种使鼠标点击事件，还有一种使日期事件，我们可以给这些集合中添加我们想绑定的事件，selector 就是要绑定事件的标签的id, 而 text 则是绑定后提示的文本，如果有多条则会随机提示其中的某一条。
做到这里已经能基本满足我们的需求，如果你还想深度定制也可以，你可以研究一下源代码，然后定制更好玩的东西出来。关于博客装扮和美化还有很多好玩的东西，如果你有兴趣可以看看我写的关于博客美化的这篇文章 《Hexo主题（Next）美化、配置、优化这一篇就够了》
