博客功能更新 —— 增加live2D

安装插件

1
npm install hexo-oh-my-live2d

配置参数

添加代码

在 _config.yml 文件中添加：

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
# live2D看板娘
OhMyLive2d:
  enable: true
  CDN: https://unpkg.com/oh-my-live2d
  option:
    dockedPosition: 'left' # 模型停靠位置 默认值: 'right' 可选值: 'left' | 'right'
  # 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 []
        }
      # 舞台边按钮消失↑

  #     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: /live2d-models/云吞kumo/云吞kumo.model3.json
        position: [-15, 5] # 模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
        scale: 0.07 # 模型的缩放比例 默认值: 0.1
        # showHitAreaFrames: false # 是否显示点击区域 默认值: false
        stageStyle:
          width: 300
          height: 540
        mobilePosition: [-10, 23] # 移动端时模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
        mobileScale: 0.1 # 移动端时模型的缩放比例 默认值: 0.1
        mobileStageStyle: # 移动端时舞台的样式
          width: 180
          height: 166
        motionPreloadStrategy: ALL # 动作预加载策略 默认值: IDLE 可选值: ALL | IDLE | NONE
      # - path: /live2d-models/hailunna_4/hailunna_4.model3.json
      #   position: [-50, 0] # 模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
      #   scale: 0.08 # 模型的缩放比例 默认值: 0.1
      #   # showHitAreaFrames: true # 是否显示点击区域 默认值: false
      #   stageStyle:
      #     width: 350
      #     height: 350
      #   mobilePosition: [-10, 23] # 移动端时模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
      #   mobileScale: 0.08 # 移动端时模型的缩放比例 默认值: 0.1
      #   mobileStageStyle: # 移动端时舞台的样式
      #     width: 180
      #     height: 166
      #   motionPreloadStrategy: IDLE # 动作预加载策略 默认值: IDLE 可选值: ALL | IDLE | NONE
        
    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: 3600
        # 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);
  #   }

舞台旁按钮关闭

如果觉得舞台边上的按钮看着比较烦人，可以直接给以下代码取消注释。

1
2
3
4
5
6
7
menus:   
  # 舞台边按钮消失↓
  items: |
    (defaultItems)=>{
     return []
    }
  # 舞台边按钮消失↑

模型文件的放置

在 source 文件夹里新建一个文件夹，里面放置模型文件，这里我命名为 live2d-models

然后把下载的模型放进去，模型文件选择参考我的 - path: /live2d-models/云吞kumo/云吞kumo.model3.json

live2d云端不加载问题

在github.io访问的时候一切都很正常，但是我使用域名解析后，通过域名访问直接让live2d神秘消失了！

打开控制台一看，原来是国内域名访问不了镜像。

解决方法

  1. 直接提前下载好镜像中的 index.min.js 文件
  2. 存放在 source/live2d-models 里
  3. 将 _config.yml 文件中下面内容进行修改：
1
2
3
OhMyLive2d:
  enable: true
  CDN: /live2d/index.min.js