GalMenu

右键菜单

参考内容：

1. 右键菜单源码：PaddyLin-Burrerfly添加鼠标右键功能 改动范围：使用pug重构代码。配置文件添加自定义点击音乐配置项和自定义链接内容。
2. 随机文章功能参考：HCLonely-Hexo博客美化
3. 自己写了个镜像站的跳转动作。能够更好的利用Gitee工具人。预览效果

​

​

由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源，将压缩包内的butterfly文件夹复制到**[Blogroot]\theme\**目录下覆盖现有主题文件夹即可跳过以下教程的前3步，直接到主题配置文件**_config.butterfly.yml**中参照第4步修改配置项。

下载galmenu.zip

不含进阶教程内容

具体步骤

在目录下新建文件。注意缩进。

修改[Blogroot]\themes\butterfly\layout\includes\additional-js.pug文件，在末尾添加内容（注意缩进）,注意butterfly_v3.6.0取消了缓存配置，转为完全默认，需要将{cache:theme.fragment_cache}改为{cache: true}：

在[Blogroot]\themes\butterfly\source\css\layout\目录下新建galmenu.styl文件。此处开头是默认图标配置。可以在配置项里更换自己喜欢的图标。

在[Blogroot]\_config.butterfly.yml添加如下配置项：

# 自定义右键菜单
GalMenu:
  enable: true # true or false  是否开启右键
  audio: true  # true or false 是否开启点击音乐
  music: https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/galmenu.mp3 #点击音乐，不填则为默认点击音乐
  MenuItem: #菜单配置
    item1: 首页 # 菜单标题
    link1: /  # 跳转链接路径
    icon1: url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/random.png')   # 图片链接，记得按照示例填写。必须用url('')包起来。不填则为默认图标
    item2: 时间轴
    link2: /archives/
    icon2:
    item3: 标签
    link3: /tags/
    icon3:
    item4: 分类
    link4: /categories/
    icon4:
    item5: 友人帐
    link5: /link/
    icon5:
    item6: 留言板
    link6: /comments/
    icon6:

进阶教程

添加浏览器动作

前进后退刷新返回顶部等动作直接修改配置项中的link即可实现。例如：

MenuItem: #菜单链接和标签配置
  item1: 刷新
  link1: javascript:location.reload();
  icon1:
  item2: 前进
  link2: javascript:history.go(1);
  icon2:
  item3: 后退
  link3: javascript:history.go(-1);
  icon3:
  item4: 返回顶部
  link4: '#'  # 必须用''包起来不然会被识别成注释符
  icon4:

添加随机文章功能

这一功能照搬自HCLonely-Hexo博客美化，这是个全局功能，不局限于butterfly主题。

在目录下新建文件：

使用即可访问随机文章。

添加镜像站跳转功能

1. 使用原生js实现，因为要添加onclick()动作，比起添加配置项还是直接改源码比较快。
2. Gitee工具人的活用方法可以参考这两篇文章：
   • 利用Gitee搭建博客镜像站：使用Gitee提供镜像站支持
   • 使用Github Actions来完成Gitee Pages自动更新：使用Github Action实现全自动部署

在[Blogroot]\themes\butterfly\source\js\目录下新建mirror.js文件,记得修改对应域名为你自己的：

在[Blogroot]\_config.butterfly.yml中引入mirror.js

修改文件

bug归纳

如果使用了gulp对静态资源进行压缩，由于gulp-babel的加密压缩算法问题，可能造成部署到线上以后右键菜单不显示的bug。

最新版本中已经将galmenu.js替换为CDN引入，无需担心此bug。

可能出现的bug

右键菜单无法显示，控制台报错。Butterfly_v3.4.0+galmenu.jsjquery

jquery[Blogroot]\_config.butterfly.yml

inject:
  head:
  bottom:
    - <script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>

TO DO

1. 将模板转为PUG，添加配置项，支持自定义修改。
2. 优化图标取值方案，使得图标可以直接在配置项进行设置。
3. 封装页面，使得跳转镜像站可以直接通过/mirror/链接访问。