自定义菜单栏

前言/Chatter

最初我是用hexo-helper-live2d的，后来发现它早已停止维护，遂改用更先进的oh-my-live2d，但说实话oml2d的配置难度确实有高于helperlive2d，并且它那菜单栏失效的关于选项着实让我难以接受，再结合官方文档与AI后我总结了如下步骤

正文

1.在hexo根目录下安装hexo-oh-my-live2d

1
npm install --save hexo-oh-my-live2d

2.去往Oh-my-live2d官网的hexo使用页面复制代码，添加到hexo的配置文件_config.yml中

3.注意到menu和item都是被注释着的，且item有两种，前者是在保留原来选项的基础上增加，后者是重新配置选项，这里选择将menu和item后者取消注释

4.因为我的需求仅为修改“关于”选项为“返回”，故我保留了其他三项不变

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
menus:
  #items: |
    #(defaultItems)=>{
    #return [
      #...defaultItems,
      #{
        #id: 'github',
        #icon: 'github-fill',
        #title: '我的github',
        #onClick: ()=>window.open('https://github.com/hacxy')
      #}
    #]
    #}

  items:
    - id: "Rest"
      icon: "icon-rest"
      title: "休息"
      onClick: |
        (i) => {
          var t;
          i.statusBarOpen((t = i.options.statusBar) == null ? void 0 : t.restMessage);
          i.clearTips();
          i.setStatusBarClickEvent(() => {
            i.statusBarClose();
            i.stageSlideIn();
            i.statusBarClearEvents();
          });
          i.stageSlideOut();
        }

    - id: "SwitchModelClothes"
      icon: "icon-skin"
      title: "切换衣服"
      onClick: |
        (i) => {
          i.loadNextModelClothes();
        }

    - id: "SwitchModel"
      icon: "icon-switch"
      title: "切换模型"
      onClick: |
        (i) => {
          i.loadNextModel();
        }

    - id: "Back"
      icon: "icon-backward"
      title: "返回"
      onClick: |
        (i) => {
            try {
                if (window.history.length > 1) {
                    window.history.back()
                } else {
                    window.location.href = "/"
                }
            } catch (e) {
                console.error("页面回退失败:", e)
                window.location.href = "/"
            }
        }

5.在你复制粘贴后会发现Back的图标渲染不出，这是因为你没有引入自定义图标，需前往阿里矢量图标库搜索你需要的图标，然后加入购物车，打开购物车将其添加至项目（第一次会让你创建项目），然后进入项目，格式改成symbol，靠近图标点击复制链接，这就是你在_config中需填写的icon名

6.接下来是如何导入自定义图标，分为两种方法

a.

点击symbol旁的查看在线链接，复制链接，在主题的配置文件中找到inject板块，在bottom下添加

1
<script src="你的在线链接.js"></script>

End

b.

直接下载你所需的图标，应该会是一个压缩包的形式，解压后将其放在hexo项目文件夹中你习惯的位置，找到js格式的文件，复制它的路径，打开主题的配置文件，找到inject板块，在bottom下添加

1
<script src="路径.js"></script>

End

舞台配置

前言/Chatter

由于我的博客使用了aplayer，而model默认在左边正好挡住了音乐吸盘，调至右边后又会挡住右下角按钮，以下是改变舞台位置的方法，关于aplayer如何播放本地音乐，可以去看Lumorian的教程我委托了他，顺便补充一嘴，listmaxheight最好填“300px”

正文

1.以model在右下角为例，找到_config中的oh-my-live2d板块，在models板块下添加

1
2
3
4
5
6
7
stageStyle:
  right: '60px' #根据实际情况自定义
  bottom: '0px'
  width: 220
  height: 250
  position: fixed #固定位置
  z-index: 999 #999为在上层，-1为在下层

2.End

3.Tip：可以在stageStyle下添加

1
background-color: rgba(0, 0, 0, 0.5) # 半透明黑色背景

以便于调试