2025最新实测hexo配置live2d看板娘(少女前线，碧蓝航线都可配置)

​

前言

*如果你的hexo博客网页上想要一个精美的live2d看板娘，可以看我接下来的教程了（没有难度，可能需要你有魔法，当然你前置需要有hexo才行）

我使用的是hexo-oh-my-live2d，之所以选用这个的原因是该项目目前正在被积极维护，可支持 所有版本 的live2d模型，之前流行的hexo-helper-live2d由于不在维护了，所以支持的模型较少,这里就不

hexo-oh-my-live2d

仓库地址:hexo-oh-my-live2d 一个用于 hexo 的 live2d 看板娘插件，支持所有版本的模型。)

安装

1.在hexo根目录下执行下面的操作

yarn add hexo-oh-my-live2d --save

2.在hexo的config.yml文件下添加下面的内容，我这里使用的是cdn，如果你想要像我一样使用自己的模型，你需要在github上建一个仓库，然后使用cdn代理一下，下面会写到如何cdn代理，先看一下我的配置文件

# live2d看板娘
OhMyLive2d:
  enable: true
  CDN: https://registry.npmmirror.com/oh-my-live2d/latest/files
  # CDN: https://registry.npmmirror.com/oh-my-live2d/0.13/files/dist/index.min.js
  option:
    # importType: 'cubism2' #  导入类型, 默认使用全量导入: complete , 可选值: complete, cubism2, cubism5
    libraryUrls: # 自定义 Cubism SDK 外部资源地址
      complete: https://registry.npmmirror.com/oh-my-live2d/latest/files/lib/complete.js
      cubism2: https://registry.npmmirror.com/oh-my-live2d/latest/files/lib/cubism2.js
      cubism5: https://registry.npmmirror.com/oh-my-live2d/latest/files/lib/cubism5.js
    # menus:
    # items: |
    #   (defaultItems)=>{
    #    return [
    #      ...defaultItems,
    #      {
    #        id: 'github',
    #        icon: 'github-fill',
    #        title: '我的github',
    #        onClick: ()=>window.open('https://github.com/hacxy')
    #      }
    #    ]
    #   }

    # items:
    #   - id: 'github'
    #     icon: 'github-fill'
    #     title: '我的github'
    #     onClick: ()=>window.open('https://github.com/hacxy')

    mobileDisplay: false # 是否在移动端显示
    models:
      - path: "https://cdn.statically.io/gh/lingdubing-xo/lingdubing-xo-pic/main/%E5%8A%A0%E8%97%A4%E6%83%A0live2d/model/katou_01/katou_01.model.json"
        mobilePosition: [-10, 23] # 移动端时模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
        mobileScale: 0.1 # 移动端时模型的缩放比例 默认值: 0.1
        mobileStageStyle: # 移动端时舞台的样式
          width: 180
          height: 166
        motionPreloadStrategy: IDLE # 动作预加载策略 默认值: IDLE 可选值: ALL | IDLE | NONE
        position: [20, -150] # 模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
        scale: 0.15 # 模型的缩放比例 默认值: 0.1
        # showHitAreaFrames: true # 是否显示点击区域 默认值: false
        stageStyle:
          width: 250
          height: 250
      - path: "https://cdn.statically.io/gh/lingdubing-xo/lingdubing-xo-pic/main/%E7%BA%B1%E9%9B%BElive2d/model/sagiri/sagiri.model.json"
        scale: 0.12
        position: [30, 0]
        stageStyle:
          width: 250
        mobileScale: 0.08
        mobilePosition: [0, 0]
        mobileStageStyle: # 移动端时舞台的样式
          width: 180
    parentElement: document.body #为组件提供一个父元素，如果未指定则默认挂载到 body 中
    primaryColor: "var(--btn-bg)" # 主题色 支持变量
    sayHello: false # 是否在初始化阶段打印项目信息
    tips:
      style:
        width: 230
        height: 120
        left: calc(50% - 20px)
        top: -100px
      mobileStyle:
        width: 180
        height: 80
        left: calc(50% - 30px)
        top: -100px
      idleTips:
        interval: 15000
        # message:
        #   - 你好呀~
        #   - 欢迎来到我的小站~
        # 自定义提示语 需要 引入 axios 库 ,也可以使用其他方法
        message: |
          function(){
            return axios.get('https://v1.hitokoto.cn?c=i')
              .then(function (response) {
                return response.data.hitokoto ;
              })
              .catch(function (error) {
                console.error(error);
              });
          }
        # wordTheDay: true
        # 自定义  https://v1.hitokoto.cn  数据
        # wordTheDay: |
        #   function(wordTheDayData){
        #     return `${wordTheDayData.hitokoto}    by.${wordTheDayData.from}`;
        #   }
  # then: |
  #   (oml2d)=>{
  #      setTimeout(() => {
  #     oml2d.tipsMessage('hello world', 3000, 10);
  #   }, 8000);
  #   }

其中想要换模型的话需要更换models里path路径

3.使用github配合statically创建图床
1.创建一个github仓库(注意这个仓库要是公开的)
2.将仓库克隆到本地

git clone 仓库地址

3.下载你想要的模型
live2d模型下载地址
解压包的话直接解压到本地的仓库里，如果是文件夹的话，到downgit复制github上文件夹的url路径然后下载就好
4.然后就是

git add .
git commit -m "live2d模型"
git push

5.使用statically代理github资源
以我的仓库为例



复制这个json文件的url链接
例如上图是https://github.com/lingdubing-xo/lingdubing-xo-pic/blob/main/%E7%BA%B1%E9%9B%BElive2d/model/sagiri/sagiri.model.json
然后在statically粘贴上面的链接，复制下面的链接到path路径下

这样的话整个配置的过程就完了