优化复制按钮

layout/_third-party/clipboard.ejs

@@ -1,10 +1,12 @@
 <script src="<%- theme.plugins.clipboard %>"></script>
 <script>
-  let COPY_SUCCESS = "<%- __('post.copy_success') %>";
-  let COPY_FAILURE = "<%- __('post.copy_failure') %>";
   /*页面载入完成后，创建复制按钮*/
   !function (e, t, a) {
     /* code */
+    function on_success(){
+      let $btn = $('.highlight .code pre');
+      console.log($btn);
+    }
     var initCopyCode = function(){
       var copyHtml = '';
       copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
@@ -16,67 +18,26 @@
           return trigger.nextElementSibling;
         }
       });
-
       clipboard.on('success', function(e) {
-        //您可以加入成功提示
-        console.info('Action:', e.action);
-        console.info('Text:', e.text);
-        console.info('Trigger:', e.trigger);
-        success_prompt(COPY_SUCCESS);
-        e.clearSelection();
+        let $btn = $(e.trigger);
+        $btn.addClass('copyed');
+        let $icon = $($btn.find('i'));
+        $icon.removeClass('fa-copy');
+        $icon.addClass('fa-clipboard-check');
+        let $span = $($btn.find('span'));
+        $span[0].innerText = 'COPYED';
       });
       clipboard.on('error', function(e) {
-        //您可以加入失败提示
-        console.error('Action:', e.action);
-        console.error('Trigger:', e.trigger);
-        fail_prompt(COPY_FAILURE);
+        e.clearSelection();
+        let $btn = $(e.trigger);
+        $btn.addClass('copy-failed');
+        let $icon = $($btn.find('i'));
+        $icon.removeClass('fa-copy');
+        $icon.addClass('fa-exclamation-triangle');
+        let $span = $($btn.find('span'));
+        $span[0].innerText = 'COPY FAILED';
       });
     }
     initCopyCode();
-
   }(window, document);
-
-  /**
-   * 弹出式提示框，默认1.5秒自动消失
-   * @param message 提示信息
-   * @param style 提示样式，有alert-success、alert-danger、alert-warning、alert-info
-   * @param time 消失时间
-   */
-  var prompt = function (message, style, time)
-  {
-      style = (style === undefined) ? 'alert-success' : style;
-      time = (time === undefined) ? 1500 : time*1000;
-      $('<div>')
-          .appendTo('body')
-          .addClass('alert ' + style)
-          .html(message)
-          .show()
-          .delay(time)
-          .fadeOut();
-  };
-
-  // 成功提示
-  var success_prompt = function(message, time)
-  {
-      prompt(message, 'alert-success', time);
-  };
-
-  // 失败提示
-  var fail_prompt = function(message, time)
-  {
-      prompt(message, 'alert-danger', time);
-  };
-
-  // 提醒
-  var warning_prompt = function(message, time)
-  {
-      prompt(message, 'alert-warning', time);
-  };
-
-  // 信息提示
-  var info_prompt = function(message, time)
-  {
-      prompt(message, 'alert-info', time);
-  };
-
 </script>

source/css/_third-party/clipboard.styl

@@ -1,33 +1,33 @@
 //代码块复制按钮
 if hexo-config('style.body.highlight.copy_btn')
   .highlight
-      //方便copy代码按钮（btn-copy）的定位
-      position: relative
+    //方便copy代码按钮（btn-copy）的定位
+    position: relative
 
   .btn-copy
-      display: inline-block
-      cursor: pointer
-      border: none
-      disable-user-select()
-      -webkit-appearance: none
-      font-size: "calc(%s - 1px)" % $fontsize-code
-      font-weight: bold
-      padding: $gap * 0.25 $gap * 0.5
-      >i
-        margin-right: 4px
-      color: $color-meta
-      background: $color-card
-      border-bottom-left-radius: $border-codeblock
-      border-top-right-radius: $border-codeblock
-      box-shadow: $boxshadow-card
-      position: absolute
-      top: 0
-      right: 0
-      opacity: 0
-      trans()
-      &:hover
-        color: $color-hover
-        background: bgcolor($color-hover)
+    display: inline-block
+    cursor: pointer
+    border: none
+    disable-user-select()
+    -webkit-appearance: none
+    font-size: "calc(%s - 1px)" % $fontsize-code
+    font-weight: bold
+    padding: $gap * 0.25 $gap * 0.5
+    >i
+      margin-right: 4px
+    color: $color-meta
+    background: $color-card
+    border-bottom-left-radius: $border-codeblock
+    border-top-right-radius: $border-codeblock
+    box-shadow: $boxshadow-card
+    position: absolute
+    top: 0
+    right: 0
+    opacity: 0
+    trans()
+    &:hover
+      color: $color-hover
+      background: bgcolor($color-hover)
 
   .highlight:hover .btn-copy
-      opacity: 1
+    opacity: 1