在 Anheyu 博客中接入 Live2D 看板娘

这篇文章整理了一套可以直接用于 anheyu-app 的 Live2D 看板娘接入方式。整个过程不需要修改主题源码，只需要在后台 系统设置 -> 页面配样式 -> 自定义 JavaScript 中粘贴代码，再把模型地址替换成你自己的 model3.json 即可。

相关项目

oh-my-live2d

用于网页挂载 Live2D 看板娘的开源项目，支持停靠位置、交互菜单与模型配置。

Live2D 模型参考仓库

可用于查找和参考可用模型资源。挑选时建议优先确认是否包含 model3.json 与完整依赖文件。

效果预览

这套方案接入后，看板娘会固定显示在页面右侧，支持桌面端展示、菜单交互以及收起休息等简单动作。如果你只是想给博客加一个更有氛围感的挂件，这种方式已经足够直接。

这套方案能实现什么

• 不改主题源码，直接在「自定义 JavaScript」中配置接入
• 将 Live2D 看板娘固定在页面右侧展示
• 默认只在桌面端显示，避免移动端遮挡内容
• 支持自定义模型地址、缩放比例、偏移位置和舞台尺寸
• 可以通过菜单给看板娘增加“休息”之类的简单交互

使用前准备

正式开始前，建议先准备好下面几项内容：

• 一个可正常登录的 anheyu-app 后台管理账号
• 一份可用的 Live2D 模型资源
• 一个可公开访问的 model3.json 地址
• 能正常访问 jsDelivr 的网络环境，或者你自己的脚本镜像地址

操作步骤

第一步：进入页面配样式

登录博客后台后，按下面的路径进入设置页：

1. 在左侧菜单点击 系统设置
2. 进入 页面配样式
3. 找到 自定义 JavaScript

这一步找到位置就够了，不需要改源码，也不需要重新打包前端。

第二步：粘贴完整代码

将下面这段代码粘贴到 自定义 JavaScript 区域中。脚本会按需从 jsDelivr 加载 oh-my-live2d@0.19.3；若页面其它位置已引入同库并存在全局 OML2D，则会直接初始化，避免重复加载冲突。

(function () {
  function start() {
    if (typeof window.OML2D === 'undefined') return;
    window.oml2d = window.OML2D.loadOml2d({
      dockedPosition: 'right',
      mobileDisplay: false,
      models: [
        {
          name: 'my-model',
          path: 'https://example.com/path/to/model3.json',
          scale: 0.3,
          position: [0, 120],
          stageStyle: { width: '320px', height: '460px' }
        }
      ],
      menus: {
        disable: false,
        items: [
          {
            id: 'Rest',
            icon: 'icon-rest',
            title: '休息',
            onClick: function (oml2d) {
              oml2d.statusBarOpen('看板娘休息中');
              oml2d.clearTips();
              oml2d.setStatusBarClickEvent(function () {
                oml2d.statusBarClose();
                oml2d.stageSlideIn();
                oml2d.statusBarClearEvents();
              });
              oml2d.stageSlideOut();
            }
          }
        ]
      }
    });
  }

  if (typeof window.OML2D !== 'undefined') {
    start();
    return;
  }

  var s = document.createElement('script');
  s.src = 'https://cdn.jsdelivr.net/npm/oh-my-live2d@0.19.3/dist/index.min.js';
  s.async = true;
  s.onload = function () { start(); };
  document.head.appendChild(s);
})();

第三步：保存并刷新页面

代码填好后，点击后台的 保存设置，然后回到前台页面刷新查看效果。

如果刷新后没有立刻出现，建议再做一次下面的动作：

1. 强制刷新页面
2. 打开浏览器控制台查看是否有脚本报错
3. 检查模型地址是否能直接访问

常用参数说明

下面这几个参数是最常需要调整的：

如果你觉得人物太大，就把 scale 调小一点；如果底部被挡住或者位置太高，可以继续微调 position 这组数值。

常见自定义方向

常见问题

1. 看板娘不显示

优先检查下面几个点：

• jsDelivr 脚本是否加载成功
• model3.json 地址是否能直接打开
• 模型依赖文件是否存在 404
• 后台是否重复插入了多份脚本

2. 移动端为什么看不到

因为示例代码里写的是 mobileDisplay: false，这表示默认只在桌面端显示。如果你想在手机上也显示，需要手动改成 true。

3. 页面出现空白模型或贴图错乱

这通常不是脚本问题，而是模型资源引用不完整。很多模型仓库下载下来后，文件层级比较深，上传时少传一个贴图目录，页面就会直接显示异常。

4. 刷新后出现多个看板娘

这种情况通常是因为你在后台重复保存了多份相同脚本，或者历史代码没有删干净。把旧代码清理掉，只保留一份初始化脚本即可。

总结

如果你只是想在 anheyu-app 里快速加一个可用的 Live2D 看板娘，那么这套方式已经比较省事了：不用改源码，不用重新部署前端，直接在 页面配样式 -> 自定义 JavaScript 里完成接入即可。

真正需要你花时间处理的，其实只有两件事：一是准备一套能正常访问的模型资源，二是把位置和尺寸调到适合你自己页面布局的状态。只要这两步处理好，后面的接入过程本身并不复杂。