Hexo分享链接按钮

Vue+Element样式弹窗

1.在主题配置文件[BlogRoot]\_config.butterfly.yml中 引入Vue和Element相关依赖：

inject:
  head:
+    - <link rel="stylesheet" href="https://cdn1.tianli0.top/npm/element-ui@2.15.6/packages/theme-chalk/lib/index.css"> # 引入组件库(f12)
  bottom:    
+    - <script async src="https://cdn1.tianli0.top/npm/vue@2.6.14/dist/vue.min.js"></script> # 引入VUE(f12)
+    - <script async src="https://cdn1.tianli0.top/npm/element-ui@2.15.6/lib/index.js"></script> # 引入ElementUI(f12)

2.在 [BlogRoot]/source/js下新建 copy.js，没有 js 目录就新建，把下面代码全部复制进去：

/* 禁用f12与按键防抖 start */
// 防抖全局计时器
let TT = null;    //time用来控制事件的触发
// 防抖函数:fn->逻辑 time->防抖时间
function debounce(fn, time) {
  if (TT !== null) clearTimeout(TT);
  TT = setTimeout(fn, time);
}

// 复制提醒
document.addEventListener("copy", function () {
    debounce(function () {
      new Vue({
        data: function () {
          this.$notify({
            title: "哎嘿！复制成功🍬",
            message: "若要转载最好保留原文链接哦，给你一个大大的赞！🤞🤞",
            position: 'top-left',
            offset: 50,
            showClose: true,
            type: "success",
            duration: 5000
          });
        }
      })
    }, 300);
  })
  
  
  // f12提醒但不禁用
  document.onkeydown = function (e) {
    if (123 == e.keyCode || (e.ctrlKey && e.shiftKey && (74 === e.keyCode || 73 === e.keyCode || 67 === e.keyCode)) || (e.ctrlKey && 85 === e.keyCode)) {
      debounce(function () {
        new Vue({
          data: function () {
            this.$notify({
              title: "你已被发现😜",
              message: "小伙子，扒源记住要遵循GPL协议！",
              position: 'top-left',
              offset: 50,
              showClose: true,
              type: "warning",
              duration: 5000
            });
          }
        })
      }, 300);
    }
  };
  /* 禁用f12与按键防抖 end */

• notify：弹窗类型，可以替换为message（信息提示）和confirm（二次确认提示）

• title：弹窗标题，可以改为自定义标题

• message:弹窗信息，可以改为自定义内容

• position：弹出位置，bottom、top和left、right两两组合

• offset：偏移量，简单可以理解为与边界的距离

• showClose：是否显示关闭按钮

• type：提示类型，可选success/warning/info/error等

• duration：停留时间，弹出停留至消失的时间，单位ms

详见：Vue中常用的提示信息

3.在 _config.butterfly.yml中的 inject 引入 copy.js

inject:
  bottom:
+    - <script async src="/js/copy.js"></script> # 复制时利用 element-ui 提醒

4.清理并重启项目即可

hexo cl; hexo s

分享链接按钮

注意：分享按钮提醒依赖Vue弹窗和防抖计时器，请完成前面的前置教程！

1.引入ClipboardJS依赖：在主题配置文件[BlogRoot]\_config.butterfly.yml中

inject:
  bottom:
+    - <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>

2.添加分享按钮，在[BlogRoot]\themes\butterfly\layout\includes\rightside.pug做以下修改：

+      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']

3.新建文件[BlogRoot]\source\js\share.js，写入如下代码（再说一次，记住完成前置教程！！！）：

// 分享本页
function share_() {
    let url = window.location.origin + window.location.pathname
    try {
        // 截取标题
        var title = document.title;
        var subTitle = title.endsWith("| Fomalhaut🥝") ? title.substring(0, title.length - 14) : title;
        navigator.clipboard.writeText('Fomalhaut🥝的站内分享\n标题：' + subTitle + '\n链接：' + url + '\n欢迎来访！🍭🍭🍭');
        new Vue({
            data: function () {
                this.$notify({
                    title: "成功复制分享信息🎉",
                    message: "您现在可以通过粘贴直接跟小伙伴分享了！",
                    position: 'top-left',
                    offset: 50,
                    showClose: true,
                    type: "success", 
                    duration: 5000
                });
                // return { visible: false }
            }
        })
    } catch (err) {
        console.error('复制失败！', err);
    }
    // new ClipboardJS(".share", { text: function () { return '标题：' + document.title + '\n链接：' + url } });
    // btf.snackbarShow("本页链接已复制到剪切板，快去分享吧~")
}

// 防抖
function share() {
    debounce(share_, 300);
}

这里我的页面名字截取了后面的重复段，你要截取的话就将| Fomalhaut🥝换成| 你的网站名字，或者保留也行，就是直接复制！

4.在主题配置文件[BlogRoot]\_config.butterfly.yml中引入该js文件

inject:
  bottom:
+    - <script src="/js/share.js"></script>

5.清理并重启项目即可看到变更

hexo cl; hexo s

网站恶搞标题

1.新建文件[BlogRoot]\source\js\title.js，写入以下内容：

//动态标题
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    //离开当前页面时标签显示内容
    document.title = '👀跑哪里去了~';
    clearTimeout(titleTime);
  } else {
    //返回当前页面时标签显示内容
    document.title = '🐖抓到你啦～';
    //两秒后变回正常标题
    titleTime = setTimeout(function () {
      document.title = OriginTitile;
    }, 2000);
  }
});

2.在主题配置文件_config.butterfly.yml引入该文件：

inject: 
  bottom: 
+    - <script async src="/js/title.js"></script>

3.重启项目：

hexo cl; hexo s