Hexo添加复制代码块功能

原创已于 2022-03-02 17:26:58 修改 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#服务器 #阿里云 #腾讯云 #hexo

于 2022-03-02 17:18:23 首次发布

hexo 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在使用NexT主题的Hexo博客中添加代码块复制功能，包括创建`copy-code.swig`文件，编辑样式和脚本，更新语言文件，配置主题设置，以及重新生成博客。此功能适用于NexT v5.1.4及更高版本。

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

前言：

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

添加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 %}

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

  {% include '_third-party/scroll-cookie.swig' %}
  {% include '_third-party/exturl.swig' %}

  {% include '_third-party/copy-code.swig' %}		# 要加入的代码
</body>
</html>

添加按钮上显示的语言

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

在zh-Hans.yml中的post下添加：
```
copy_button: 复制
copy_success: 复制成功
copy_failure: 复制失败
```
如图：

在en.yml中的post下添加：
```
copy_button: Copy
copy_success: Copied
copy_failure: Copy failed
```
如图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sEzbRDcg-1646212447764)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220224103052648.png)]$
在主题配置文件中添加开关

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

添加的内容为：
```
# Add copy button on codeblock
copy_button:
  enable: true
  # Show text copy result
  show_result: true
```