开发记录

升级记录

2020-10-19:v0.01初版搭建

  1. 使用的paddylin教程中的ejs模板
  2. 修改了图标
  3. 添加了镜像站跳转动作和随机文章功能。

2020-10-30:v1.0正式版发布

  1. 将ejs模板转为pug模板。
  2. 修改了引入方式,直接加pug注入而不是通过inject添加js。
  3. 新增配置项,直接修改配置文件即可自定义链接。

2020-10-31:v1.1新增bug归纳

  1. Gulp加密压缩后会出现bug。
  2. 添加屏蔽项以避开bug。

2020-11-15:v1.2修改css样式

  1. 因与Volantis标签样式冲突。
  2. 修改css选择器,只对右键菜单内元素生效。

2020-12-06:v1.3新增icon配置项

  1. 将galmenu.css改为galmenu.styl
  2. 新增icon配置项,实现图标修改。
  3. 已完成点击音效、菜单标题、图标、链接均可以通过配置项修改。
  4. 样式、js、图标、音乐添加默认项CDN引入,极简化配置过程。

2021-01-31:正式版v1.3.1

  1. 更新butterfly_v3.6.0适配方案

右键菜单

参考内容:

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

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

具体步骤

  1. [Blogroot]\themes\butterfly\layout\includes\third-party\目录下新建galmenu.pug文件。注意缩进。
    .GalMenu.GalDropDown
    #gal.circle
    .ring
    a.menuItem(href='javascript:void(0);' onclick='Mirror()')
    span=theme.GalMenu.MenuItem.item1
    a.menuItem(href=url_for(theme.GalMenu.MenuItem.link2))
    span=theme.GalMenu.MenuItem.item2
    a.menuItem(href=url_for(theme.GalMenu.MenuItem.link3))
    span=theme.GalMenu.MenuItem.item3
    a.menuItem(href=url_for(theme.GalMenu.MenuItem.link4))
    span=theme.GalMenu.MenuItem.item4
    a.menuItem(href=url_for(theme.GalMenu.MenuItem.link5))
    span=theme.GalMenu.MenuItem.item5
    a.menuItem(href=url_for(theme.GalMenu.MenuItem.link6))
    span=theme.GalMenu.MenuItem.item6
    if theme.GalMenu.audio
    if theme.GalMenu.music
    audio#audio(src=url_for(theme.GalMenu.music))
    else
    audio#audio(src='https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@bf_3.3.0_12/music/galmenu.mp3')
    script(defer src='https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@bf_3.3.0_12/js/custom/galmenu.min.js')
  2. 修改[Blogroot]\themes\butterfly\layout\includes\additional-js.pug文件,在末尾添加内容(注意缩进),注意butterfly_v3.6.0取消了缓存配置,转为完全默认,需要将{cache:theme.fragment_cache}改为{cache: true}
          if theme.pjax.enable
    !=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache})

    !=partial('includes/third-party/baidu_push', {}, {cache:theme.fragment_cache})

    + if theme.GalMenu.enable
    + !=partial('includes/third-party/galmenu', {}, {cache:theme.fragment_cache})
  3. [Blogroot]\themes\butterfly\source\css\layout\目录下新建galmenu.styl文件。此处开头是默认图标配置。可以在配置项里更换自己喜欢的图标。
    $menu-icon1 = hexo-config('GalMenu.enable') && hexo-config('GalMenu.MenuItem.icon1') ? unquote(hexo-config('GalMenu.MenuItem.icon1')) : url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/home.png')
    $menu-icon2 = hexo-config('GalMenu.enable') && hexo-config('GalMenu.MenuItem.icon2') ? unquote(hexo-config('GalMenu.MenuItem.icon2')) : url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/archive.png')
    $menu-icon3 = hexo-config('GalMenu.enable') && hexo-config('GalMenu.MenuItem.icon3') ? unquote(hexo-config('GalMenu.MenuItem.icon3')) : url("https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/tag.png")
    $menu-icon4 = hexo-config('GalMenu.enable') && hexo-config('GalMenu.MenuItem.icon4') ? unquote(hexo-config('GalMenu.MenuItem.icon4')) : url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/random.png')
    $menu-icon5 = hexo-config('GalMenu.enable') && hexo-config('GalMenu.MenuItem.icon5') ? unquote(hexo-config('GalMenu.MenuItem.icon5')) : url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/link.png')
    $menu-icon6 = hexo-config('GalMenu.enable') && hexo-config('GalMenu.MenuItem.icon6') ? unquote(hexo-config('GalMenu.MenuItem.icon6')) : url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/comment.png')

    .GalMenu
    margin 0
    padding 0
    display none
    position fixed
    z-index 999
    a
    text-decoration none
    outline 0
    .circle
    margin 0 auto
    .ring
    border-radius 50%
    opacity 0
    -webkit-transform-origin 50% 50%
    -moz-transform-origin 50% 50%
    transform-origin 50% 50%
    -webkit-transform scale(0.1) rotate(-270deg)
    -moz-transform scale(0.1) rotate(-270deg)
    -transform scale(0.1) rotate(-270deg)
    -webkit-transition all 0.4s ease-out
    -moz-transition all 0.4s ease-out
    transition all 0.4s ease-out
    a
    display inline-block
    color #ffffff
    text-shadow #DC965A 1px 0 0,#DC965A 0 1px 0,#DC965A -1px 0 0,#DC965A 0 -1px 0
    -webkit-text-shadow #DC965A 1px 0 0,#DC965A 0 1px 0,#DC965A -1px 0 0,#DC965A 0 -1px 0
    -moz-text-shadow #DC965A 1px 0 0,#DC965A 0 1px 0,#DC965A -1px 0 0,#DC965A 0 -1px 0
    *filter Glow(color=#DC965A,strength=1)
    &:nth-of-type(1)
    background-image $menu-icon1
    &:nth-of-type(2)
    background-image $menu-icon2
    &:nth-of-type(3)
    background-image $menu-icon3
    &:nth-of-type(4)
    background-image $menu-icon4
    &:nth-of-type(5)
    background-image $menu-icon5
    &:nth-of-type(6)
    background-image $menu-icon6
    &:hover
    text-shadow #66CCFF 1px 0 0,#66CCFF 0 1px 0,#66CCFF -1px 0 0,#66CCFF 0 -1px 0
    -webkit-text-shadow #66CCFF 1px 0 0,#66CCFF 0 1px 0,#66CCFF -1px 0 0,#66CCFF 0 -1px 0
    -moz-text-shadow #66CCFF 1px 0 0,#66CCFF 0 1px 0,#66CCFF -1px 0 0,#66CCFF 0 -1px 0
    *filter Glow(color=#66CCFF,strength=1)
    .open
    .ring
    opacity 1
    -webkit-transform scale(1) rotate(0)
    -moz-transform scale(1) rotate(0)
    -transform scale(1) rotate(0)
    .menuItem
    border-radius 50%
    color #eeeeee
    display block
    height 80px
    line-height 80px
    margin-left -41px
    margin-top -41px
    position absolute
    text-align center
    width 80px
    background-size 80px
    border 2px #b59494 solid
    box-shadow 0px 0px 15px #fff
    -webkit-box-shadow 0px 0px 15px #fff
    -moz-box-shadow 0px 0px 15px #fff
    &:hover
    box-shadow inset 0px 0px 80px #fff
    -webkit-box-shadow inset 0px 0px 80px #fff
    -moz-box-shadow inset 0px 0px 80px #fff

    .GalMenu .circle,.ring
    height 300px
    position relative
    width 300px
  4. [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主题。

  5. [Blogroot]\scripts\目录下新建random.js文件:
    hexo.extend.generator.register('random', function (locals) {
    const config = hexo.config.random || {}
    const posts = []
    for (const post of locals.posts.data) {
    if (post.random !== false) posts.push(post.path)
    }
    return {
    path: config.path || 'random/index.html',
    data: `<html><head><script>var posts=${JSON.stringify(posts)};window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self")</script></head></html>`
    }
    })
  6. 使用/random/即可访问随机文章。
    MenuItem: #菜单链接和标签配置
    item1: 随机文章
    link1: /random/
    icon1:

    添加镜像站跳转功能

  1. 使用原生js实现,因为要添加onclick()动作,比起添加配置项还是直接改源码比较快。
  2. Gitee工具人的活用方法可以参考这两篇文章:
  1. [Blogroot]\themes\butterfly\source\js\目录下新建mirror.js文件,记得修改对应域名为你自己的:
    function Mirror() {
    let pathname;
    let hostname;
    let url;
    pathname = window.location.pathname;
    hostname = window.location.hostname;
    // if (hostname === '域名,不带https://协议')
    if (hostname === 'akilar.top') { //如果是主站
    // url = "域名,带https://协议" + pathname;
    url = "https://akilar.gitee.io" + pathname; //就跳转到镜像站的同名页面
    window.alert("即将为您跳转至镜像站");
    window.location.href = url;
    }
    else if(hostname === 'akilar.gitee.io') {
    url = "https://akilar.top" + pathname;
    window.alert("当前为镜像站,即将返回主站");
    window.location.href = url;
    }
    else {
    window.alert("本地调试,无需跳转");
    }
    }
  2. [Blogroot]\_config.butterfly.yml中引入mirror.js
          inject:
    head:
    bottom:
    + - <script src="/js/mirror.js"></script>
  3. 修改[Blogroot]\themes\butterfly\layout\includes\third-party\galmenu.pug文件
        .ring
    - a.menuItem(href=url_for(theme.GalMenu.MenuItem.link1))
    + a.menuItem(href='javascript:void(0);' onclick='Mirror()')

    bug归纳

  4. 如果使用了gulp对静态资源进行压缩,由于gulp-babel的加密压缩算法问题,可能造成部署到线上以后右键菜单不显示的bug。
    • 解决方案:在[Blogroot]\gulpfile.js中添加屏蔽项跳过对galmenu.js的压缩
              //minify js babel
      gulp.task('compress', () =>
      - gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
      + gulp.src(['./public/**/*.js', '!./public/**/*.min.js','!./public/galmenu/galmenu.js'])
      .pipe(babel({
      presets: ['@babel/preset-env']
      }))

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

可能出现的bug

  • 右键菜单无法显示,控制台报错$ is not defined
    Butterfly_v3.4.0+基本实现了去jquery化。而galmenu.js用到了jquery,因此才导致的依赖缺失。
    解决方案是再自己添加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/链接访问。