2025-04-25 teek teek 3014 字 14 分钟 -- 次

看板娘-oh-my-live2d-推荐

最后更新于: 2026-06-27 15:38:29

看板娘-oh-my-live2d

版权

警告

本着开源共享、共同学习的精神：

本文是在《Hyde Blog》博主的《看板娘》文章基础上增加了一些自己的实际操作记录和修改，内容依旧属于原作者所有。转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢。

环境

2025.4.24(已解决)

警告

次配置适用于Teek@1.0.2-2025.4.10版本（其它版本可自行测试）。

提示

自己开源的《vitepress-theme-teek-one-public》网站模板。

此模板是在《Young Kbt blog》大佬开源项目《vitepress-theme-teek 》基础上修改为自己的风格而成，感谢大佬开发得主题，大佬威武。❤️❤️

简介

给自己网站加一个黑猫哦。🤣

提示

可自定义且开箱即用的 Live2D For Web 组件, 快速为您的个人网站加入 Live2D 看板娘

OhMyLive2D 是一个应用于浏览器环境且开箱即用的 Live2D 组件, 它支持所有版本的 Live2D 模型, 使用方式足够简单并且高可自定义, 可以快速为您的个人网站添加 Live2D 看板娘, 使您的个人网站变得更具有特色.

OhMyLive2D 的初衷是为了解决官方 Cubism SDK 在使用时还需要额外通过 script 标签外部引入以及使用和学习成本较高的缺点。而现在它在被 pixi-live2d-display 驱动的同时又提供了多种导入方式以及更简单更方便自定义配置的 API。因为 oh-my-live2d 是纯 javascript，所以它可以完全独立运行在浏览器环境, 这意味着你可以在任意 web 框架或传统的原生 JS 开发的 web 项目中的使用它，并且无需再导入其他任何依赖和 css 样式资源, 真正做到了开箱即用.

🍊 体验

您可以通过stackblitz在线体验,或者在任意项目使用 CDN 导入方式立即体验 Live2D For Web:

 1<script src="https://unpkg.com/oh-my-live2d@latest"></script>
 2<script>
 3  OML2D.loadOml2d({
 4    models: [
 5      {
 6        path: 'https://model.oml2d.com/HK416-1-normal/model.json',
 7        position: [0, 60],
 8        scale: 0.08,
 9        stageStyle: {
10          height: 450
11        }
12      }
13    ]
14  });
15</script>

开始配置：

1、安装

pnpm npm yarn

1pnpm add oh-my-live2d

1npm install oh-my-live2d

1yarn add oh-my-live2d

使用

提示

更多使用方法查看oh-my-live2d 官方文档

2、封装组件

（推荐）

在docs\.vitepress\theme\components\文件夹下新建OhMyLive2D.vue文件并以如下代码

警告

如果你的图标不显示是因为我使用了自定义图标，详情参考自定义图标,并在项目head中引入后即可使用您自己的图标

需要登录自己的阿里云图标库：（你这里直接用我的就好）

引入示例：

编辑docs\.vitepress\config.mts文件：

`docs\.vitepress\theme\components\OhMyLive2D.vue`文件具体代码：

3、注册

最后在docs\.vitepress\theme\components\目录下的TeekLayoutProvider.vue组件注册

 1<script setup lang="ts" name="TeekLayoutProvider">
 2import OhMyLive2D from "./OhMyLive2D.vue"; //导入看板娘组件
 3</script>
 4
 5<template>
 6  <Teek.Layout>
 7    // 其他代码
 8    <template #layout-top>
 9    <!-- 看板娘组件 -->
10      <OhMyLive2D />
11    </template>
12  </Teek.Layout>
13</template>

扩展：index.ts 注册官方注册方式（个人Teek项目不涉及）

在docs\.vitepress\theme\index.ts文件中并以如下代码

4、更新

如需更新 oh-my-live2d 你只需要在安装命令后缀加上@latest 即可更新至当前最新发行版, 当然 vuepress、vitepress 等插件也同理

pnpm npm yarn

1pnpm add oh-my-live2d@latest

1npm install oh-my-live2d@latest

1yarn add oh-my-live2d@latest

5、验证

运行项目，验证效果：

结束。

选项

提示

相关配置项可以参考oh-my-live2d 官方选项配置。

模型

提示

想要更换模型在 @iCharlesZ 这里找，替换 model 中的 path或url 链接即可

 1export default {
 2  extends: Teek,
 3  // oh-my-live2d 配置
 4  async enhanceApp() {
 5    if (!import.meta.env.SSR) {
 6      const { loadOml2d } = await import("oh-my-live2d");
 7      loadOml2d({
 8        models: [
 9          {
10            path: "https://raw.githubusercontent.com/iCharlesZ/vscode-live2d-models/master/model-library/girls-frontline/HK416-1/normal/model.json",
11          },
12        ],
13      });
14    }
15  },
16};