Butterfly右下角悬浮菜单栏魔改指南

更新

分享功能忘了说引入js的事了，已添加。

前言

最近折腾了一下右下角悬浮菜单，在这里简单的写写魔改的思路，顺便列出一些适合添加在此处的功能。
魔改文件路径：themes\butterfly\layout\includes\rightside.pug
如果你有更实用的功能或者其他建议欢迎留言告知。

注意：部分代码中最前面的加号代表增加，减号代表删除，是为了高亮代码的，粘贴代码之后记得删除。删除之后不需要再补上一个空格，这样会出bug。

增加按钮

首先我们需要添加按钮，在文件的一众when下面添加一个when。

when 'comment'
  if commentsJsLoad
    a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
      i.fas.fa-comments
+ when 'xxxx'
+   button(type="button" title="测试按钮")
+     i.fas.fa-xxx

然后在下面的数组里添加此项。
在 hideArray 里面添加会在点击齿轮按钮之后显示，在 showArray 里面添加会直接显示，自己根据需要添加。

#rightside
  - const { enable, hide, show } = theme.rightside_item_order
-  - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside']
+  - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside','xxxx']
  - const showArray = enable ? show && show.split(',') : ['toc','chat','comment']

进行排序

主题提供了自定义排序，在主题配置文件搜索 rightside_item_order 即可。
但我觉得既然都魔改了就没必要再两头麻烦了，直接在源码里面改就可以。
排序方法很简单，直接更改数组即可（即 hideArray 和 showArray），渲染之后前面的在上，后面的在下。
如：[‘toc’,’chat’,’comment’] 从上到下显示为：目录（手机），聊天室，评论

一些小问题

当你的翻译、夜间模式或阅读模式没开启的时候，齿轮按钮可能会无法显示。
如果想显示的话可以选择使用主题配置的排序或者像这样改一下源码：

#rightside-config-show
  if enable
    if hide
      button#rightside_config(type="button" title=_p("rightside.setting"))
        i.fas.fa-cog.fa-spin
  else
    if is_post()
      if (readmode || translate.enable || (darkmode.enable && darkmode.button))
        button#rightside_config(type="button" title=_p("rightside.setting"))
          i.fas.fa-cog.fa-spin
-    else if translate.enable || (darkmode.enable && darkmode.button)
+    else if hideArray
      button#rightside_config(type="button" title=_p("rightside.setting"))
        i.fas.fa-cog.fa-spin

功能

下面列出一些适合添加在此处的功能按钮。

一、分享本页

引入ClipboardJS:
在主题配置文件inject下的bottom添加如下代码，注意要放在自定义js文件的上面：

inject:
  head:

  bottom:
    # clipboard
+    - <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
    # 自定义js
    - <script src="/js/xxx.js"></script>

添加按钮：

+      when 'share'
+        button.share(type="button" title='分享链接' onclick="share()")
+          i.fas.fa-share-nodes

#rightside
  - const { enable, hide, show } = theme.rightside_item_order
  - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode']
-  - const showArray = enable ? show && show.split(',') : ['chat','comment','hideAside','toc']
+  - const showArray = enable ? show && show.split(',') : ['chat','share','comment','hideAside','toc']

在自定义js文件中添加如下代码，不会自定义js文件的看这篇：Hexo博客添加自定义css和js文件

// 分享本页
function share() {
    let url = window.location.origin + window.location.pathname
    new ClipboardJS(".share", { text: function() { return '标题：' + document.title + '\n链接：' + url } });
    btf.snackbarShow("本页链接已复制到剪切板，快去分享吧~")
}

二、直达底部

添加如下代码即可：

button#go-up(type="button" title=_p("rightside.back_to_top"))
  i.fas.fa-arrow-up

+button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")
+  i.fas.fa-arrow-down