0.用到的地址

(oh-my-live2d Github 地址)[https://github.com/oh-my-live2d/oh-my-live2d]
(oh-my-live2d 官网地址)[https://oml2d.hacxy.cn/]
(live2d 模型下载地址)[https://github.com/Eikanya/Live2d-model/tree/master]
(静态文件 Statically 地址)[https://statically.io/convert/]
(DownGit Github 文件夹下载器地址)[https://minhaskamal.github.io/DownGit/#/home]

1.前言

需搭配 Hexo 使用，我目前使用的 hexo 版本为 7.3.0，教程很简单，可能需要自备魔法

我使用的是 hexo-oh-my-live2d，可能有的人之前使用的是 hexo-live2d-helper，但是由于这个 helper 不再维护了，支持的模型较少。
所以我们采用这个新的库，它正在积极维护且支持所有模型
视频教程在https://www.bilibili.com/video/BV1ptPkebEqZ/?spm_id_from=333.1387.homepage.video_card.click

2.安装

1. 安装 hexo-oh-my-live2d 插件

# 在 hexo 根目录 cmd 下输入如下命令
# 这里使用的是yarn命令，跟npm命令起到的效果是一样的
yarn add hexo-oh-my-live2d --save

2. 配置样式文件

# 这hexo的config.yml文件下增添以下内容
# 下面的path路径即为你想要使用模型的model地址
# 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);
  #   }

3.配置 github 资源床

1.进入到 github 官网上创建一个公开的项目
2.将 github 创建的项目拉到本地，在本地创建一个存储文件的文件夹

# github拉到本地
git pull 仓库位置

4.下载想要的模型

到(live2d 模型下载地址)[https://github.com/Eikanya/Live2d-model/tree/master]下载想要的模型
要是压缩包直接下载到本地即可，有些模型是文件夹格式的直接下载不下来的话，可以使用(DownGit 工具)[https://minhaskamal.github.io/DownGit/#/home]将文件夹的地址复制上去然后下载，保存到刚才创建的那个存储文件的文件夹里

# 然后将下载的本地资源上传到github上
git add .
git commit -m "你想要加的注释"
git push

5.使用 Statically 做代理

*到(静态文件 Statically 地址)[https://statically.io/convert/]输入你 github 上模型的文件地址，一般为 model.json 结尾*

更改 config.yml 文件下的 path 路径即可修改模型

3.自定义模型设置(几个重要的参数)

如果一个模型有多个衣服的话。path 路径要设置为一个数据形式，如我 config.yml 设置的那样
dockedPosition 是设置模型在网页左边或者右边
如果模型位置不恰当，请调整 position 属性,第一个为 x 轴，第二个为 y 轴，正数是向左向上，负数是向右向下

到这里教程就已圆满结束了，感谢你的浏览，thank you