个人博客挂件基于Live2d的看板娘实现和源码

前段时间我的博客是用 Hexo 搭建的，当时我给我博客做了一个小猫咪的挂件，蛮有趣的。后来因为 Hexo 生成静态页面速度慢的问题我转向了 Hugo 来搭建我的个人博客，这个小猫咪也换成了看板娘，这些其实都是基于 Live2d 的，接下来我给大家说一下怎么给你的博客添加，无论你的博客是基于 WordPress 的还是基于 Hexo 的，或者和我一样是基于 Hugo 的都可以参考本文。

Live2d 是什么

Live2d 的官网地址：https://www.live2d.com/zh-CHS/

Live2d 是一种 2d 的绘图渲染技术，是由日本的一个叫 Cybernoids 的公司开发，通过一系列可以连续动画的的人物或者动物来建立模型，生成一种可以动的 2d 图形或者说二维模型。这种模型和二次元很接近，所以喜欢这种风格的人很多，但是也有它自身的缺陷那就是不容易商业化和更快的发展，例如现在的 3d 模型在游戏上和 VR 技术上有很大的发展空间，而 Live2d 至今还没有找到合适的契合点，但是这丝毫不影响宅男对这项技术的热爱。

Live2d 二维模型演示

Live2d 的制作过程

官网下载安装包直接安装可以得到两种软件，分别是 Cubism Modeler 和 Cubism Animator，最后我们还需要安装第三个软件 Viewer 用作预览调戏等。

由于还是由 2d 图形制作，所以对动画师要求比较高，除去原画绘制能力，动画师还需要具有一定三维空间感，以及复杂逻辑能力。制作过程大致如下：

• 使用 PhotoShop 制作 psd 格式的原画切图。
• 导入 Cubism Modeler 里蒙皮。
• 设置蒙皮。
• 导出到 Cubism Animator 里面开始制作动画。
• 最后再导出文件就完成了。

引入看板娘博客挂件

第一步：依赖 Dependencies

你要确保你的页面中可以使用 font-awesome, 需要使用到，还有就是 jQuery 是否有添加。

1
2

<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 中添加如下代码即可：

1

<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

做完这两步你已经完成了，但是我们这样做还是不够的，例如我们想修改看板娘上面的提示文字和锚点，和自己的网站内容关联和呼应，这样就需要将下面这几个文件下载到本地静态文件夹即可。

Live2d 本地需要下载的文件

这些文件你可以在原作者的 GitHub 上面下载，下载地址：https://github.com/stevenjoezhang/live2d-widget

接下来你只需要配置一下 autoload.js 里面的根目录即可，配置如下：

1
2

//注意：live2d_path 参数应使用绝对路径
const live2d_path = "/live2d/";

自定义 Live2d 看板娘

安装完成后我们可以对看板娘的样式和头顶的气泡消息自定义，这样可以做出和自己网站很契合的交互效果，使这个看板娘成为你网站上独一无二的。

Live2d 看板娘大小调整

调整看板娘的大小和上面气泡对话框的大小，还有侧边菜单的样式，是否显示等都可以在 waifu.css 样式文件中进行修改，我们只需要在浏览器中 F12 查看对应控件的名称即可，在样式文件中找到对应的元素标签进行修改即可。

当然，你也可以在浏览器中修改样式，这样可以一边修改一边查看效果，将有效果的修改结果更改到 waifu.css 文件中即可。

Live2d 自定义隐藏功能

我们如果想要隐藏组件中的某些地方，或者修改跳转链接，或者自定义显示按钮图标的样子都可以通过修改 waifu-tips.js 文件实现，例如我们要更改菜单的多少，可以这样修改：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

$("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 来进行修改，或者进行删除，当然也可以添加新的。

这个文件里面的内容大致结构如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

{
    "mouseover": [{
        "selector": "#waifu #live2d",
        "text": ["对话提示一", "对话提示二"]
    }],
    "click": [{
        "selector": "#waifu #live2d",
        "text": ["对话提示一", "对话提示二"]
    }],
    "seasons": [{
        "date": "01/01",
        "text": "对话提示"
    }]   
}  

从上面的 json 结构中可以看出来，实际上对我们的事件响应做出三个分类，一种使鼠标移动事件，另一种使鼠标点击事件，还有一种使日期事件，我们可以给这些集合中添加我们想绑定的事件，selector 就是要绑定事件的标签的id, 而 text 则是绑定后提示的文本，如果有多条则会随机提示其中的某一条。

做到这里已经能基本满足我们的需求，如果你还想深度定制也可以，你可以研究一下源代码，然后定制更好玩的东西出来。关于博客装扮和美化还有很多好玩的东西，如果你有兴趣可以看看我写的关于博客美化的这篇文章 《Hexo主题（Next）美化、配置、优化这一篇就够了》