Hexo 集成 Live2D 看板娘完整教程

一、基础安装流程

1. 安装核心插件

在 Hexo 博客根目录[BlogRoot]打开终端，执行以下指令安装 Live2D 核心插件：

1
npm install --save hexo-helper-live2d

2. 配置站点参数

打开 Hexo 根目录下的_config.yml（站点配置文件）：

  • 若搜索到live2d相关配置项，按注释调整；

  • 若未搜到，直接将以下配置复制到文件最底部：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Live2D 配置（适配 hexo-helper-live2d 插件）
# 参考仓库：https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true # 是否启用看板娘（true/false）
  scriptFrom: local # 脚本加载方式（默认local，可选jsdelivr/unpkg/自定义URL）
  pluginRootPath: live2dw/ # 插件根目录（相对路径）
  pluginJsPath: lib/ # 脚本文件相对插件根目录路径
  pluginModelPath: assets/ # 模型文件相对插件根目录路径
  tagMode: false # 标签模式（仅替换live2d标签，而非插入所有页面）
  debug: false # 调试模式（控制台输出日志，true/false）
  model:
    use: live2d-widget-model-koharu # 默认模型（npm包名/本地路径/自定义URL）
  display:
    position: left # 看板娘位置（left/right）
    width: 150 # 宽度（像素）
    height: 350 # 高度（像素）
  mobile:
    show: true # 移动端是否显示（true/false）

3. 生效配置

在 Hexo 根目录执行以下指令（hexo clean必须执行，清空缓存确保生效）：

1
hexo clean && hexo g && hexo s

启动本地服务后，访问localhost:4000即可看到看板娘。

二、更换 Live2D 模型

1. 安装目标模型

在 Hexo 根目录终端执行模型安装指令（以koharu为例，替换为目标模型名即可）：

1
npm install --save live2d-widget-model-koharu

2. 修改配置文件

打开_config.yml，找到live2d.model.use项，修改为新安装的模型名：

1
2
3
live2d:
  model:
    use: live2d-widget-model-koharu # 替换为目标模型npm包名

3. 重新生效配置

再次执行以下指令，刷新本地预览：

1
hexo clean && hexo g && hexo s

三、模型资源库（官方+第三方）

1. 官方模型库（推荐，稳定无版权问题）

核心适配hexo-helper-live2d的官方模型仓库：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 琴叶柑
npm install --save live2d-widget-model-tsumiki
# 琴叶葵
npm install --save live2d-widget-model-karin
# 白上吹雪（狐狸）
npm install --save live2d-widget-model-fubuki
# 辉夜月
npm install --save live2d-widget-model-kaguya
# 宝钟玛琳
npm install --save live2d-widget-model-marine
# 黑猫
npm install --save live2d-widget-model-blackcat
# 小希
npm install --save live2d-widget-model-xiaoxi

2. 第三方模型库（个性化，注意版权）

平台名称 地址 特点
萌典 Live2D 站 https://www.moe-js.com/ 分类清晰（二次元/游戏/虚拟主播），支持预览
Live2D 官方商店 https://www.live2d.com/store/ 正版模型，部分免费，商用需授权
知乎合集 https://zhuanlan.zhihu.com/p/354632509 含原神/崩坏等热门游戏角色模型，附教程

3. 模型预览工具

四、自定义本地模型安装（第三方模型适配）

  1. 下载模型文件（需包含.model.json核心文件+纹理图片）；

  2. 在 Hexo 根目录新建live2d_models文件夹，将模型文件放入子目录（如live2d_models/yelan/）；

  3. 修改_config.yml配置：

1
2
3
live2d:
  model:
    use: ./live2d_models/yelan/yelan.model.json # 本地模型绝对路径

五、卸载看板娘

1. 卸载插件/模型

在 Hexo 根目录终端执行：

1
2
3
4
# 卸载核心插件
npm uninstall hexo-helper-live2d
# 卸载指定模型（替换modelname为模型名）
npm uninstall live2d-widget-model-modelname

2. 清理配置

打开_config.yml，将live2d相关配置项注释（加#）或直接删除，避免配置冲突。

六、避坑提醒

  1. 版权问题：第三方同人模型（如原神/崩坏）仅可非商用，商用需联系作者授权；

  2. 版本适配：部分第三方模型因 Live2D Cubism 版本（2/3/4）差异可能无法加载，优先选标注「适配 Hexo」的模型；

  3. 加载速度：模型文件越大，加载越慢，建议选体积小的模型，或用 CDN 托管模型文件；

  4. 移动端适配：若移动端显示异常，可将live2d.mobile.show设为false关闭移动端展示。

总结

  • 新手优先选择官方模型库（npm 直接安装，稳定无坑）；

  • 追求个性化可选用第三方模型，安装前先通过预览站确认效果；

  • 所有配置修改后必须执行hexo clean清空缓存，否则看板娘可能不生效。