Hexo博客搭建系列（三）：在Hexo博客中配置Live2D看板娘教程

在个人博客中添加一个可爱的Live2D看板娘，不仅能让网站更加生动有趣，还能提升访客的互动体验。本文将详细介绍如何在Hexo博客中配置Live2D看板娘。

什么是Live2D看板娘？

Live2D是一种2D动画技术，能够让平面角色拥有类似3D的动态效果。看板娘（Mascot）则是网站的吉祥物角色，通常以可爱的动漫形象出现，为网站增添趣味性。

准备工作

在我们开始之前，要确保已经搭建好了Hexo博客，具有基本的npm包管理知识

安装必要的插件

安装hexo-helper-live2d插件

首先安装Live2D的核心插件：

npm install --save hexo-helper-live2d

安装模型包

接下来安装具体的模型。这里以雫模型为例：

npm install --save live2d-widget-model-shizuku

可用的模型选择

可以通过GitHub上开源的模型库来选择自己喜欢的看板娘
live2d-widget-models模型库：https://github.com/xiazeyu/live2d-widget-models

live2d-widget-model-chitose - 千岁
live2d-widget-model-epsilon2_1 - 爱普西龙2.1
live2d-widget-model-gf - 少女前线
live2d-widget-model-haru - 春
live2d-widget-model-haruto - 春人
live2d-widget-model-hibiki - 响
live2d-widget-model-hijiki - 黑猫
live2d-widget-model-izumi - 泉
live2d-widget-model-koharu - 小春
live2d-widget-model-miku - 初音未来
live2d-widget-model-ni-j - 妮J
live2d-widget-model-nico - 妮可
live2d-widget-model-nietzsche - 尼采
live2d-widget-model-nipsilon - 妮普西龙
live2d-widget-model-nito - 妮托
live2d-widget-model-shizuku - 雫
live2d-widget-model-tororo - 龙猫
live2d-widget-model-tsumiki - 积木
live2d-widget-model-unitychan - Unity酱
live2d-widget-model-wanko - 汪子
live2d-widget-model-z16 - Z16

配置Live2D看板娘

在Hexo根目录的_config.yml文件中添加以下配置：

live2d:enable: true                    # 是否启用Live2DscriptFrom: local               # 脚本来源：local(本地) 或 jsdelivr(CDN)pluginRootPath: live2dw/        # 插件根路径pluginJsPath: lib/              # JavaScript文件路径pluginModelPath: assets/        # 模型资源路径tagMode: false                  # 标签模式debug: false                    # 调试模式model:use: live2d-widget-model-hijiki  # 使用的模型包名称display:position: left               # 显示位置：left(左侧) 或 right(右侧)width: 150                    # 看板娘宽度(像素)height: 300                   # 看板娘高度(像素)mobile:show: false                   # 是否在移动端显示react:opacity: 0.7                  # 透明度(0-1之间的数值)

如何更换模型

如果想要更换其他模型，只需要：

安装新的模型包

npm install --save live2d-widget-model-miku

修改配置文件中的live2d.model.use字段

model:use: live2d-widget-model-miku

重新生成并部署博客

hexo clean
hexo generate
hexo server

总结

通过以上步骤，你就可以为自己的Hexo博客添加一个可爱的Live2D看板娘了。记住要根据自己网站的风格选择合适的模型，并适当调整显示参数以获得最佳的用户体验。

Live2D看板娘不仅能让你的博客更加生动有趣，还能成为网站的一个特色亮点。快去试试吧！

---

参考资源：

• hexo-helper-live2d GitHub
• live2d-widget-models模型库
• Live2D官方示例