Hexo添加复制代码块功能_hexo生成的文章代码段添加复制按钮

Hexo博客中加入代码块复制功能

前言：

本人使用的是Hexo的NexT主题，NexT版本为v5.1.4。事实上，在NexT主题的v6.3版本里已经加入了代码复制这个功能，所以如果你刚开始使用NexT，直接升级主题，并在主题配置文件中打开代码复制的开关就好了。

1. 添加copy-code.swig

   进入到下面的目录下

   cd themes/next/layout/_third-party/

   然后在此文件夹下创建名为copy-code.swig的文件，在此文件中输入以下内容：

   {% if theme.codeblock.copy_button.enable %}
     <style>
       .copy-btn {
         display: inline-block;
         padding: 6px 12px;
         font-size: 13px;
         font-weight: 700;
         line-height: 20px;
         color: #4D4D4C;
         white-space: nowrap;
         vertical-align: middle;
         cursor: pointer;
         background-color: #F7F7F7;
         background-image: linear-gradient(#F7F7F7, #F7F7F7);
         border: 1px solid #d5d5d5;
         border-radius: 3px;
         user-select: none;
         outline: 0;
       }
   
       .highlight-wrap .copy-btn {
         transition: opacity .3s ease-in-out;
         opacity: 0;
         padding: 2px 6px;
         position: absolute;
         right: 4px;
         top: 8px;
       }
   
       .highlight-wrap:hover .copy-btn,
       .highlight-wrap .copy-btn:focus {
         opacity: 1
       }
   
       .highlight-wrap {
         position: relative;
       }
     </style>
   
     <script>
       $('.highlight').each(function (i, e) {
         var $wrap = $('<div>').addClass('highlight-wrap')
         $(e).after($wrap)
         $wrap.append($('<button>').addClass('copy-btn').append('{{__("post.copy_button")}}').on('click', function (e) {
           var code = $(this).parent().find('.code').find('.line').map(function (i, e) {
             return $(e).text()
           }).toArray().join('\n')
           var ta = document.createElement('textarea')
           document.body.appendChild(ta)
           ta.style.position = 'absolute'
           ta.style.top = '0px'
           ta.style.left = '0px'
           ta.value = code
           ta.select()
           ta.focus()
           var result = document.execCommand('copy')
           document.body.removeChild(ta)
           {% if theme.codeblock.copy_button.show_result %}
             if(result)$(this).text('{{__("post.copy_success")}}')
             else $(this).text('{{__("post.copy_failure")}}')
           {% endif %}
           $(this).blur()
         })).on('mouseleave', function (e) {
           var $b = $(this).find('.copy-btn')
           setTimeout(function () {
             $b.text('{{__("post.copy_button")}}')
           }, 300)
         }).append(e)
       })
     </script>
   {% endif %}
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71

   然后返回上一层目录，即layout文件夹下，编辑_layout.swig在文件的最后面加入如下代码：

     {% include '_third-party/scroll-cookie.swig' %}
     {% include '_third-party/exturl.swig' %}
   
     {% include '_third-party/copy-code.swig' %}		# 要加入的代码
   </body>
   </html>
   1
   2
   3
   4
   5
   6

2. 添加按钮上显示的语言

   进入themes/next/languages/目录下：

   在zh-Hans.yml中的post下添加：

   copy_button: 复制
   copy_success: 复制成功
   copy_failure: 复制失败
   1
   2
   3

   如图：

   ​

   在en.yml中的post下添加：

   copy_button: Copy
   copy_success: Copied
   copy_failure: Copy failed
   1
   2
   3

   如图：

   ​

3. 在主题配置文件中添加开关

   编辑主题配置文件（themes/next/_config.yml），在其中的codeblock中添加copy_button的开关，

   添加的内容为：

   # Add copy button on codeblock
   copy_button:
     enable: true
     # Show text copy result
     show_result: true
   1
   2
   3
   4
   5

需要注意的是，nextV5.1.4的版本是没有codeblock选项的，则直接在配置文件中添加即可。一定要顶格写（如上图），否则不会生效。

4. 退到博客根目录重新生成

   hexo g
   1