代码块加入了一键拷贝代码

changbin1997 · Apr 1, 2022 · f7e41a8 · f7e41a8
1 parent 80e02b7
commit f7e41a8
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 1 deletion.
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/assets/css/style.css.map b/assets/css/style.css.map
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -40,6 +40,12 @@
   p,li,a {
     font-size: 16px;
   }
+  pre {
+    position: relative;
+    &:hover .copy-code-btn {
+      display: block;
+    }
+  }
   pre > code {
     padding: 10px;
     font-size: 16px;
@@ -260,6 +266,14 @@
   position: absolute;
 }
 
+// 代码拷贝按钮
+.copy-code-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: none;
+}
+
 // 图片灯箱
 #max-img-box {
   display: none;

diff --git a/assets/js/app.js b/assets/js/app.js
@@ -50,6 +50,54 @@ $(function () {
     }
   }
 
+  // 给文章中的代码块添加拷贝按钮和拷贝事件
+  if ($('pre').length) {
+    for (let i = 0;i < $('pre').length;i ++) {
+      // 是否是代码块
+      if ($('pre').eq(i).children('code').length) {
+        // 创建和添加拷贝按钮
+        const btnEl = document.createElement('button');
+        btnEl.className = 'copy-code-btn btn btn-outline-secondary btn-sm';
+        btnEl.setAttribute('type', 'button');
+        btnEl.innerHTML = 'Copy';
+        btnEl.setAttribute('data-clipboard-target', '#code-' + i);
+        btnEl.setAttribute('title', '拷贝代码');
+        btnEl.setAttribute('data-toggle', 'tooltip');
+        btnEl.setAttribute('data-placement', 'left');
+        btnEl.setAttribute('id', 'copy-btn-' + i);
+        $('pre').eq(i).prepend(btnEl);
+        // 给代码块添加一个 id 方便拷贝
+        $('pre code').eq(i).attr('id', 'code-' + i);
+      }
+      // 初始化拷贝模块
+      const clipboard = new ClipboardJS('.copy-code-btn');
+      // 拷贝成功
+      clipboard.on('success', ev => {
+        // 把工具提示更改为拷贝成功
+        $(ev.trigger).attr('title', '拷贝成功');
+        $(ev.trigger).attr('data-original-title', '拷贝成功');
+        $(ev.trigger).tooltip('update');
+        $(ev.trigger).tooltip('show');
+        // 延迟 1 秒后把工具提示更改为拷贝代码
+        setTimeout(() => {
+          $(ev.trigger).attr('title', '拷贝代码');
+          $(ev.trigger).attr('data-original-title', '拷贝代码');
+        }, 1000);
+      });
+      // 拷贝出错
+      clipboard.on('error', ev => {
+        $(ev.trigger).attr('title', '拷贝失败');
+        $(ev.trigger).attr('data-original-title', '拷贝失败');
+        $(ev.trigger).tooltip('hide');
+        $(ev.trigger).tooltip('show');
+        setTimeout(() => {
+          $(ev.trigger).attr('title', '拷贝代码');
+          $(ev.trigger).attr('data-original-title', '拷贝代码');
+        }, 1000);
+      });
+    }
+  }
+
   // 给文章中的标签添加Bootstrap的样式
   if ($('.post-tag a').length) {
     $('.post-tag a').addClass('badge badge-dark');

diff --git a/assets/js/clipboard.min.js b/assets/js/clipboard.min.js
diff --git a/components/footer.php b/components/footer.php
@@ -20,6 +20,7 @@
 <script type="text/javascript" src="<?php $this->options->themeUrl('assets/js/bootstrap.bundle.min.js'); ?>"></script>
 <script type="text/javascript" src="<?php $this->options->themeUrl('assets/js/highlight.pack.js'); ?>"></script>
 <script type="text/javascript" src="<?php $this->options->themeUrl('assets/js/qrious.min.js'); ?>"></script>
+<script type="text/javascript" src="<?php $this->options->themeUrl('assets/js/clipboard.min.js'); ?>"></script>
 <script type="text/javascript" src="<?php $this->options->themeUrl('assets/js/app.js'); ?>"></script>
 <!--统计数据的图表js-->
 <?php if (isset($GLOBALS['page']) && $GLOBALS['page'] == 'page-data'): ?>