✨ feat: Copy Code

README.md

@@ -105,6 +105,8 @@ progressBar: true
 excerpt_link: Read More...
 excerpt_all: false
 
+# Copy code button
+copy_btn: true
 # Share
 share_enable: true
 # If you are not in China, maybe you prefer to set:false

_config.yml

@@ -41,6 +41,8 @@ excerpt_link: 阅读更多...
 # 如果你嫌每篇文章手动加more标记比较麻烦，又不想在首页全文显示，可以把excerpt_all设置成true，这样首页只会显示文章归档
 excerpt_all: false
 
+# 是否开启代码复制按钮
+copy_btn: true
 # 是否开启文章分享按钮
 share_enable: true
 # 国内的社交平台(If you are not in China, maybe you prefer to set:false)

layout/_partial/after-footer.ejs

@@ -63,3 +63,9 @@
 <% if (theme.clickLove){ %>
   <%- js('/js/clickLove') %>
 <% } %>
+
+<!-- 复制 -->
+<% if (theme.copy_btn == true) { %>
+  <%- css('/css/clipboard') %>
+  <%- partial('post/clipboard') %>
+<% } %>

layout/_partial/post/clipboard.ejs

@@ -0,0 +1,54 @@
+<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
+<script>
+  function wait(callback, seconds) {
+    var timelag = null;
+    timelag = window.setTimeout(callback, seconds);
+  }
+  !function (e, t, a) {
+    var initCopyCode = function(){
+      var copyHtml = '';
+      copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
+      copyHtml += '<i class="ri-file-copy-2-line"></i><span>COPY</span>';
+      copyHtml += '</button>';
+      $(".highlight .code pre").before(copyHtml);
+      $(".article pre code").before(copyHtml);
+      var clipboard = new ClipboardJS('.btn-copy', {
+        target: function(trigger) {
+          return trigger.nextElementSibling;
+        }
+      });
+      clipboard.on('success', function(e) {
+        let $btn = $(e.trigger);
+        $btn.addClass('copied');
+        let $icon = $($btn.find('i'));
+        $icon.removeClass('ri-file-copy-2-line');
+        $icon.addClass('ri-checkbox-circle-line');
+        let $span = $($btn.find('span'));
+        $span[0].innerText = 'COPIED';
+        
+        wait(function () { // 等待两秒钟后恢复
+          $icon.removeClass('ri-checkbox-circle-line');
+          $icon.addClass('ri-file-copy-2-line');
+          $span[0].innerText = 'COPY';
+        }, 2000);
+      });
+      clipboard.on('error', function(e) {
+        e.clearSelection();
+        let $btn = $(e.trigger);
+        $btn.addClass('copy-failed');
+        let $icon = $($btn.find('i'));
+        $icon.removeClass('ri-file-copy-2-line');
+        $icon.addClass('ri-time-line');
+        let $span = $($btn.find('span'));
+        $span[0].innerText = 'COPY FAILED';
+        
+        wait(function () { // 等待两秒钟后恢复
+          $icon.removeClass('ri-time-line');
+          $icon.addClass('ri-file-copy-2-line');
+          $span[0].innerText = 'COPY';
+        }, 2000);
+      });
+    }
+    initCopyCode();
+  }(window, document);
+</script>

source/css/clipboard.styl

@@ -0,0 +1,35 @@
+// 代码块复制按钮
+if hexo-config('copy_btn') == true
+  .highlight
+    position: relative
+
+  .btn-copy
+    z-index: 1
+    display: inline-block
+    cursor: pointer
+    border: none
+    disable-user-select()
+    -webkit-appearance: none
+    font-size: 12px
+    font-weight: bold
+    padding: 3px 6px
+    >i
+      margin-right: 4px
+      font-size: 10px
+      transform: translateY(1px);
+    color: #333
+    background: rgba(255,255,255,.8)
+    border-radius: 2px
+    position: absolute
+    top: 0
+    right: 0
+    opacity: 0
+    transition: all linear .2s
+    &:hover
+      background: rgba(255,255,255,.7)
+
+  .highlight:hover .btn-copy
+    opacity: 1
+
+  .article pre:hover .btn-copy
+    opacity: 1