hexo博客添加Live2d看板娘

前言

为了给我的博客添加一个二次元看板娘，我在网上搜寻教程发现之前的hexo-helper-live2d不在维护了，支持的模型少且旧，遂采用hexo-oh-my-live2d ，一个高可自定义且开箱即用的 Live2D For Web 组件, 快速为您的个人网站加入Live2D看板娘,下面是详细教程。

安装流程

  1. 在博客根目录下执行下面的操作：

    1
    npm install hexo-helper-live2d

  2. 下载喜欢模型

    live2d模型下载地址

  3. 创建一个github仓库(公开)并将找到的live2d模型上传到仓库中。找到对应模型文件复制链接，例如：https://github.com/Miloboxgithub/MyLive2d/blob/main/%E7%BA%B1%E9%9B%BElive2d/model/sagiri/sagiri.model.json 这样。将其放入这个网址将换取到的CDN链接保存

  4. 在hexo的config.yml文件下添加下面的内容，并将保存的对应模型链接放至models下path中：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    # 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:
        dockedPosition: 'right' # 模型停靠位置 默认值: 'right' 可选值: 'left' | 'right'
        # 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/Miloboxgithub/MyLive2d/main/%E5%8A%A0%E8%97%A4%E6%83%A0live2d/model/katou_01/katou_01.model.json"
            position: [30, -150] # 模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
            scale: 0.14 # 模型的缩放比例 默认值: 0.1
            # showHitAreaFrames: true # 是否显示点击区域 默认值: false
            stageStyle:
              width: 300
              height: 350
          - path: "https://cdn.statically.io/gh/Miloboxgithub/MyLive2d/main/%E7%BA%B1%E9%9B%BElive2d/model/sagiri/sagiri.model.json"
            scale: 0.15
            position: [70, 50]
            stageStyle:
              width: 300
              height: 350
            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);
      #   }

  5. 最后执行下面的操作，就可以看到可爱的看板娘啦！

    1
    2
    3
    hexo cl
    hexo g
    hexo s