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

想要快速上手推荐使用oh-my-live2d快速部署到自己的网站上，担心网站不稳定的可以选择打包到本地项目中，需要根据文档要求修对应的文件链接。

oh-my-live2d 官网: https://oml2d.com/

当然也有平替网站： https://github.com/stevenjoezhang/live2d-widget

效果图

快速体验

我们只需在本地的任意项目中使用CDN导入方式来体验:

js
<script src="https://unpkg.com/oh-my-live2d@latest"></script>
<script>
  OML2D.loadOml2d({
    models: [
      {
        path: 'https://model.oml2d.com/HK416-1-normal/model.json',
        position: [0, 60],
        scale: 0.08,
        stageStyle: {
          height: 450
        }
      }
    ]
  });
</script>

我们想要在 VuePress 中使用

可以在 VuePress 项目中通过 vuepress-plugin-oh-my-live2d 插件来加载组件。

安装/更新插件代码：

sh
npm install vuepress-plugin-oh-my-live2d@latest

使用插件

在 .vuepress/config.js 中使用插件, 即使您在 js 中使用此插件也同样可以享受到它带来的智能提示.

js
import { oml2dPlugin } from 'vuepress-plugin-oh-my-live2d';

export default defineUserConfig({
  // ... other configs
  plugins: [
    oml2dPlugin({
      // 在这里配置选项
      models: [
        {
          path: 'https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/Live2D/Senko_Normals/senko.model3.json',
          scale: 0.12,
          position: [-10, 50],
          stageStyle: {
            width: 350
          }
        }
      ]
    })

    //  ...other plugins
  ]
});

如需自定义配置, 请自行在配置选项中查阅文档了解详细配置内容.

可以直接对原图进行加工，做出2D的立体表现的付费平台：

live2d官方链接： https://www.live2d.com/zh-CHS