Hexo搭建博客NexT主题之无法对代码(Code)进行复制的问题

Hexo NexT 复制代码操作

效果图：

1.下载 clipboard.js

第三方插件，相关介绍和兼容性可通过clipboard主页或clipboard-github了解。

2.下载地址如下，同样在链接上方右键->链接另存为\themes\next\source\js\src该目录下。

• clipboard.js
• clipboard.min.js 推荐使用

3.使用方法

1.在\themes\next\source\js\src目录下，创建clipboard-use.js，文件内容如下：

!function (e, t, a) { 
  var initCopyCode = function(){
    var copyHtml = '';
    copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
    copyHtml += '  <i class="fa fa-globe"></i><span>copy</span>';
    copyHtml += '</button>';
    $(".highlight .code pre").before(copyHtml);
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
  }
  initCopyCode();
}(window, document);

2.在\themes\next\source\css\_custom\custom.styl样式文件中添加下面代码：

.highlight{
  position: relative;
}
.btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
}
.btn-copy span {
    margin-left: 5px;
}
.highlight:hover .btn-copy{
  opacity: 1;
}

4.引用代码

在\themes\next\layout\_layout.swig文件中引用位置如图：

代码如下:

<!-- 复制代码操作 -->
 <script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
 <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

Over Ending（结束语）

clipboard配置告一段落，其余的相关配置 请自行查看官网，去探索吧，少年!

注:

如果还有不了解的，可以在右下方与博主在线沟通