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

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

hexo-oh-my-live2d
仓库地址:hexo-oh-my-live2d 一个用于 hexo 的 live2d 看板娘插件，支持所有版本的模型。)
————————————————
版权声明：本文为CSDN博主「零度冰l」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zjqlwc/article/details/145442191

安装

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.将仓库克隆到本地

1	git clone 仓库地址

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

1
2
3

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

复制这个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路径下
————————————————
版权声明：本文为CSDN博主「零度冰l」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zjqlwc/article/details/145442191