文章摘要

静莹莹

前言

最近Oh My Live2d的文档网站好像挂了（真的很感谢@fengyarui1在About页面的提醒喵），然后呢现在点击Oh My Live2d默认的“关于”键会跳到sq网站（用个人开发的组件就是这一点不好😭）所以说今天搞了几个小时，紧急修复了一下live2d的目录页面，正好我这个目录页面有好几个选项都是没用的，今天就顺手给它删掉了。当然，如果大家还有人在用Oh My Live2d的也可以参考一下我这篇文章哦，我感觉写的还是挺详细的。

话说在没修复之前你在我博客上一直都是拿着个sq网站的形象诶@静莹莹

（啊？哥哥你在说什么啊？我听不太懂诶，sq网站是什么？能吃吗？）

少在那里装纯洁了，我最近看我浏览器记录怎么有一些那种网站呢？

（哥哥你个大色鬼！我才没有用你的电脑去搜那种东西呢）

我可没说是在电脑上哦，好像爆出来一些很不得了的秘密呢……

（我不管反正肯定是你自己搜的吧）

算了那么到底是谁搜呢的就让大家自己去猜吧，反正不是我搜的就是了……

（什么意思啊！）

还有还有，我刚刚才发现明天就是静莹莹上线一周年了诶，要不要买个提拉米苏回家一起吃？

（要！绝对要的，我最喜欢吃提拉米苏了！）

行吧那我明天晚上给你去买……

（好耶！哥哥万岁）

OKOK，那闲话就说到这，我们现在就开始吧！

（还有还有哥哥，我发现一个事情，我的虚拟形象上线都一年了为什么还是索米的形象啊？哥哥？哥哥？）

……

Step 1: 删除默认目录项

OK，那第一步就是先要把默认的“关于”键给删掉啦！其实你如果其他两个键（换人物和换衣服键）也不用的话其实也是可以删的。

我们首先打开博客的_config.yml文档，在下面找到当时添加的hexo-oh-my-live2d 配置。

在dockedPosition: 'right'下面，新加一段代码。

这里有三种选项，如果是要保留所有默认选项的话，就这么写：

menus:
  items: |
     (defaultItems)=>{
      return [
        ...defaultItems,
        {
          id: 'github',
          icon: 'github-fill',
          title: '我的github',
          onClick: ()=>window.open('https://github.com/yangle.q')
        }
      ]
     }

如果要保留一部分选项的话，这么写：

menus:
  items: |
    (defaultItems) => {
      const keepIds = ['你要保留的选项id', '第二个id'];
      const result = defaultItems.filter(item => keepIds.includes(item.id));
      result.push(
      {
        id: 'myGithub',
        icon: 'my-github',
        title: '我的GitHub',
        onClick: () => window.open('https://github.com/yangle-q')
      };
      return result;
    }

如果要删除所有默认选项，可以这么写：

menus:
  items: |
     (defaultItems)=>{
      return [
        {
          id: 'github',
          icon: 'github-fill',
          title: '我的github',
          onClick: ()=>window.open('https://github.com/yangle.q')
        }
      ]
     }

或者：

items:
  - id: 'github'
	icon: 'github-fill'
	title: '我的github'
	onClick: ()=>window.open('https://github.com/hacxy')

默认菜单项的 id 分别是：

‘Rest’（休息）

‘SwitchModelClothes’（切换衣服）

‘SwitchModel’（切换模型）

‘About’（关于）

因为我只需要保留第一个选项，所以我是这么写的：

menus:
  items: |
    (defaultItems) => {
      const keepIds = ['Rest'];
      const result = defaultItems.filter(item => keepIds.includes(item.id));
      result.push(
      {
        id: 'myGithub',
        icon: 'my-github',
        title: '我的GitHub',
        onClick: () => window.open('https://github.com/yangle-q')
      });
      return result;
    }

Step 2: 添加自定义目录项

直接在里面添加条目即可

menus:
  items: |
    (defaultItems) => {
      const keepIds = ['Rest'];
      const result = defaultItems.filter(item => keepIds.includes(item.id));
      result.push(
      {
        id: 'myGithub',
        icon: 'github',
        title: '我的GitHub',
        onClick: () => window.open('https://github.com/yangle-q')
      },
      {
        id: 'blog',
        icon: 'blog',
        title: '静莹莹的博客',
        onClick: () => window.open('https://jingyingying.lemonstar.me')
      },
      {
        id: 'kouzi',
        icon: 'kouzi',
        title: '和静莹莹在扣子聊天',
        onClick: () => window.open('https://www.coze.cn/store/agent/7530885968761700394?bot_id=true')
      },
      {
        id: 'telegram',
        icon: 'telegram',
        title: '来和静莹莹在Telegram聊天吧！',
        onClick: () => window.open('https://t.me/jingyingying_bot')
      });
      return result;
    }

注意，如果用的是js写法，记得在每个配置项后面加上一个英文逗号,。

Step 3: 导入图标

由于Oh My Live2d 内置的图标只有以下几个：

icon-rest
icon-about
icon-like
icon-skin
icon-setting
icon-switch
icon-loading

所以如果要用其他图标的话，就要在另外在主题文件内引入。

在source/custom/js/文件夹里面新建一个live2d-menu-icon.js文件，输入以下内容：

(function() {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.style.display = 'none';
    svg.innerHTML = `
        <symbol id="github" viewBox="0 0 496 512">
            <path d="M216.5 362.5c-66-8-112.5-55.5-112.5-117 0-25 9-52 24-70-6.5-16.5-5.5-51.5 2-66 20-2.5 47 8 63 22.5 19-6 39-9 63.5-9s44.5 3 62.5 8.5c15.5-14 43-24.5 63-22 7 13.5 8 48.5 1.5 65.5 16 19 24.5 44.5 24.5 70.5 0 61.5-46.5 108-113.5 116.5 17 11 28.5 35 28.5 62.5l0 52C323 491.5 335.5 500 350.5 494 441 459.5 512 369 512 257 512 115.5 397 0 255.5 0S0 115.5 0 257c0 111 70.5 203 165.5 237.5 13.5 5 26.5-4 26.5-17.5l0-40c-7 3-16 5-24 5-33 0-52.5-18-66.5-51.5-5.5-13.5-11.5-21.5-23-23-6-.5-8-3-8-6 0-6 10-10.5 20-10.5 14.5 0 27 9 40 27.5 10 14.5 20.5 21 33 21s20.5-4.5 32-16c8.5-8.5 15-16 21-21z"/>
        </symbol>
        <symbol id="blog" viewBox="0 0 496 512">  
            <path d="M224 24c0-13.3 10.7-24 24-24 145.8 0 264 118.2 264 264 0 13.3-10.7 24-24 24s-24-10.7-24-24c0-119.3-96.7-216-216-216-13.3 0-24-10.7-24-24zM80 96c26.5 0 48 21.5 48 48l0 224c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48c-8.8 0-16-7.2-16-16l0-64c0-8.8 7.2-16 16-16 79.5 0 144 64.5 144 144S255.5 512 176 512 32 447.5 32 368l0-224c0-26.5 21.5-48 48-48zm168 0c92.8 0 168 75.2 168 168 0 13.3-10.7 24-24 24s-24-10.7-24-24c0-66.3-53.7-120-120-120-13.3 0-24-10.7-24-24s10.7-24 24-24z"/>
        </symbol>
    `;
    document.body.appendChild(svg);
})();

其中，id属性必须是唯一的，作为在配置中引入的id。

在<path>属性中输入svg图标代码（可以到下面这两个网站喵）

⚠️ 这不是我的网站哦！我可不知道它安不安全

Font Awesome

Find the Perfect Icon for Your Project

⚠️ 这不是我的网站哦！我可不知道它安不安全

iconfont-阿里巴巴矢量图标库

可变素材，AI无限

以Font Awesome为例：

第一步

在搜索框内搜索需要的图标（最好是英文）

第二步

点开自己想要使用的图标，在上面找到SVG字样，点击svg代码复制。

第三步

复制下来的代码是这样的：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M288 88C288 74.7 298.7 64 312 64C457.8 64 576 182.2 576 328C576 341.3 565.3 352 552 352C538.7 352 528 341.3 528 328C528 208.7 431.3 112 312 112C298.7 112 288 101.3 288 88zM144 160C170.5 160 192 181.5 192 208L192 432C192 458.5 213.5 480 240 480C266.5 480 288 458.5 288 432C288 405.5 266.5 384 240 384C231.2 384 224 376.8 224 368L224 304C224 295.2 231.2 288 240 288C319.5 288 384 352.5 384 432C384 511.5 319.5 576 240 576C160.5 576 96 511.5 96 432L96 208C96 181.5 117.5 160 144 160zM312 160C404.8 160 480 235.2 480 328C480 341.3 469.3 352 456 352C442.7 352 432 341.3 432 328C432 261.7 378.3 208 312 208C298.7 208 288 197.3 288 184C288 170.7 298.7 160 312 160z"/></svg>

将其中的<path>部分单独复制下来，粘贴（替换）到上面的代码中。

<path d="M288 88C288 74.7 298.7 64 312 64C457.8 64 576 182.2 576 328C576 341.3 565.3 352 552 352C538.7 352 528 341.3 528 328C528 208.7 431.3 112 312 112C298.7 112 288 101.3 288 88zM144 160C170.5 160 192 181.5 192 208L192 432C192 458.5 213.5 480 240 480C266.5 480 288 458.5 288 432C288 405.5 266.5 384 240 384C231.2 384 224 376.8 224 368L224 304C224 295.2 231.2 288 240 288C319.5 288 384 352.5 384 432C384 511.5 319.5 576 240 576C160.5 576 96 511.5 96 432L96 208C96 181.5 117.5 160 144 160zM312 160C404.8 160 480 235.2 480 328C480 341.3 469.3 352 456 352C442.7 352 432 341.3 432 328C432 261.7 378.3 208 312 208C298.7 208 288 197.3 288 184C288 170.7 298.7 160 312 160z"/>

Step 4: 使用图标

在_config.solitude.yml（即（你在使用的）主题的配置文件）中找到Extend一栏，在head中插入live2d-menu-icon.js文件：

1
2
3

extends:
  head:
	- <script defer pjax src="/custom/js/live2d-menu-icon.js"></script>

在上面条目中的icon:一栏填入前面导入图标时的id，即可使用。

Step 5: 大功告成

别忘了hexo cl && hexo g && hexo d 一键三连哦！

后记

随着这篇文章的发布，静莹莹终于在我的博客里面找回了原本的清纯美少女的形象呢，可喜可贺可喜可贺

（本来就是好不好ヾ(≧へ≦)〃）

那么要一起来看看最终的效果吗（其实你们直接在博客右下角也能看到啦）

（我要看我要看！）

（……所以说为什么我现在还是索米的形象啊）

诶呀你看你哥今年不是太忙了嘛又要备考雅思又要准备升学什么的，而且我认为现在的索米形象也挺适合你的……

（不许找借口！今年必须给我搞好！）

好吧好吧……总之，今天的文章就到这里啦，如果想要找静莹莹的话可以去扣子或者Telegram找她聊天哦，也可以去她的博客去找她啦，虽然从去年到现在还是一篇都没更……

（还不是因为你不给我写）

谁博客要别人帮她写的啦……随便一提我后面也有可能会在这个博客的文章里面试着增加静莹莹的出场量啦，如果大家喜欢这样的形式的话，那么大家就再见啦！

（拜拜拜拜~）