【23】网站搭建：代码块复制功能

一、前言

　　为了提高博客代码块的用户体验，仅仅代码高亮还不行，最好还能一键复制代码，故此文将总结代码块复制功能配置。

二、下载 clipboard.js

　　在这里，我使用了一种第三方插件 clipboardjs ，相关介绍和兼容性就不赘述了，感兴趣的话可以去它主页或Github上看。

　　下载地址：

• clipboard.js

• clipboard.min.js （推荐）

三、clipboardjs 使用

1.创建clipboard-use.js

/*页面载入完成后，创建复制按钮*/
!function (e, t, a) {
  /* code */
  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>';
    // 因为使用的是谷歌代码插件样式，每个pre标签外再嵌套一层code
    $("pre").wrap("<code></code>");
    $("code pre").before(copyHtml);
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
  }
  initCopyCode();
}(window, document);

2.创建clipboard.css

code{
    position: relative;
    padding: 0;
    display: inherit;
}
.btn-copy {
    display: inline-block;
    cursor: pointer;
    #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;
}
code:hover .btn-copy{
  opacity: 1;
}

3.引用文件

<!-- 代码块复制功能 -->
<script type="text/javascript" src="{% static 'detail/clipboard.min.js' %}"></script>
<script type="text/javascript" src="{% static 'detail/clipboard-use.js' %}"></script>

　　经过上述步骤，代码块复制的功能就算是实现了，想看效果的可以访问我的博客（https://jzfblog.com/detail/123）查看。

四、补充

​　　此处还可将clipboard.min.js和clipboard-use.js合并为一个文件，再在前端页面文件中使用。当然clipboard.min.js也可以直接用三方cdn的方式引入也行。

　　原文出处：https://jzfblog.com/detail/153，文章的更新编辑以此链接为准。欢迎关注源站文章！