文章摘要
GPT 4
投诉

To Do

前言

本文使用izitoast库实现弹窗
本教程基于框架:Hexo v6.0.0、主题:Butterfly v4.2.2,而代码语言为Javascript + pug,请注意自己的版本。不同版本代码可能不同，请自行适配。

过程

在buterfly主题文件中引入izitoast的js文件

1
2
3
inject:
  head:
      - <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js" integrity="sha512-Zq9o+E00xhhR/7vJ49mxFNJ0KQw1E1TMWkPTxrWcnpfEFDEXgUiwJHIKit93EW/XxE31HSI5GEOW06G6BF1AtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

为方便进行管理，我们在{BlogSource}/themes/butterfly/layout/includes目录下新建文件popup.pug，内容为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
script.
    document.body.oncopy = function (){
        iziToast.info({
            timeout: 3000, 
            icon: 'Fontawesome', 
            closeOnEscape: 'true', 
            transitionIn: 'bounceInLeft', 
            transitionOut: 'fadeOutRight',
            displayMode: 'replace', 
            layout: '2', 
            position: 'topRight',
            icon: 'fad fa-check',
            backgroundColor: '#72f460', 
            title: '复制成功', 
            message: '请遵守 CC BY-NC-SA 4.0 协议' 
        });
    }

并在{BlogSource}/themes/butterfly/layout/layout.pug中最后一行加入

1
2
3
......
    include ./additional-js.pug
+    include ./popup.pug

注意缩进

Happy Hacking ！