在 Anheyu 博客中接入 Live2D 看板娘

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

适用说明

本文适用于支持后台 系统设置 -> 页面配置 -> 自定义底部 HTML 代码 的 anheyu-app 部署方式。如果你当前用的正是这一套后台，那么基本可以直接照着本文操作。

提前注意

想让看板娘正常显示，关键不在脚本本身，而在模型资源是否可访问。你需要准备一个能够公开访问的 model3.json 地址，并确保它引用到的贴图、动作、物理文件也都能正常加载。

模型兼容性提醒

我查了 oh-my-live2d 的官方 README 和文档。按项目当前说明，它默认集成 Cubism 2.1 与 Cubism 5，官方给出的结论是可以覆盖 model2 到 model5 这些常见 Live2D 模型版本。

但这并不等于你在网上随便找到一个模型包就一定能直接跑起来。实际更常见的问题反而是：

模型资源不完整，缺少贴图、动作、物理或音频文件
model.json、*.model.json、*.model3.json 这类入口文件里的路径已经失效
模型资源放在了有限制的图床、网盘或对象存储中，触发跨域、鉴权或防盗链
第三方整理过的模型包目录结构不规范，导致前端可以加载脚本，却找不到真正的模型资源

所以这篇教程更准确的说法应该是：oh-my-live2d 官方并不是“只支持少数模型版本”，但不是所有网上流传的模型资源都能直接拿来用。选模型时，优先挑已经验证过可在网页环境正常加载的资源会更省事。

效果预览

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

这套方案能实现什么

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

使用前准备

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

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

模型资源准备建议

path 必须填写为模型入口文件地址，也就是 model3.json 的完整 URL。
不要只上传一个 model3.json 文件，模型引用到的贴图、动作、物理配置也要一并放好。
如果你把模型文件放在自己的站点或对象存储中，记得检查外链访问和跨域设置。
如果加载后模型空白、贴图丢失或控制台报 404，大多都是模型资源路径不完整导致的。

操作步骤

第一步：进入页面配置

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

在左侧菜单点击 系统设置
进入 页面配置
向下找到 自定义底部 HTML 代码

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

第二步：粘贴完整代码

将下面这段代码粘贴到 自定义底部 HTML 代码 区域中：

完整代码

自定义底部 HTML 代码html

<script src="https://cdn.jsdelivr.net/npm/oh-my-live2d@0.19.3/dist/index.min.js"></script>
<script>
  window.addEventListener('load', function () {
    const oml2d = OML2D.loadOml2d({
      dockedPosition: 'right',
      mobileDisplay: false,
      models: [
        {
          name: 'lafei-local',
          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();
            }
          }
        ]
      }
    });

    window.oml2d = oml2d;
  });
</script>

复制前一定要改的地方

上面代码里的 path: 'https://example.com/path/to/model3.json' 只是示例地址，必须替换成你自己的模型入口文件链接。正常情况下也不需要额外写 </style>，如果你草稿里看到这个标签，它更像是从别的代码片段里截出来的残留，直接照搬反而容易让页面结构变乱。

第三步：保存并刷新页面

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

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

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

常用参数说明

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

参数	作用	当前示例
`dockedPosition`	看板娘停靠位置，可理解为靠左还是靠右	`right`
`mobileDisplay`	是否在移动端显示	`false`
`path`	模型入口文件地址	你自己的 `model3.json`
`scale`	模型缩放比例	`0.3`
`position`	模型偏移位置	`[0, 120]`
`stageStyle.width`	舞台宽度	`320px`
`stageStyle.height`	舞台高度	`460px`

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

常见自定义方向

几个最常见的修改思路

想让看板娘显示在左侧，可以把 dockedPosition 改成 left。
想让移动端也显示，可以把 mobileDisplay 改成 true，但建议同时把 scale 调小，避免遮挡正文。
如果模型裁切不自然，优先一起调整 scale、position 和 stageStyle，不要只改其中一个参数。
如果你不想要“休息”菜单，可以把 menus.items 整段删掉，或者把 disable 改成 true。

常见问题

1. 看板娘不显示

优先检查下面几个点：

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

在 Anheyu 博客中接入 Live2D 看板娘

在 Anheyu 博客中接入 Live2D 看板娘

相关项目

效果预览

这套方案能实现什么

使用前准备

操作步骤

第一步：进入页面配置

第二步：粘贴完整代码

第三步：保存并刷新页面

常用参数说明

常见自定义方向

常见问题

1. 看板娘不显示

2. 移动端为什么看不到

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

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

总结

评论区