我的网站搭建 (第23天) 代码块复制功能

最新推荐文章于 2022-06-12 16:02:55 发布

代码打碟手

最新推荐文章于 2022-06-12 16:02:55 发布

阅读量545

点赞数

本文链接：https://blog.csdn.net/jack_970124/article/details/88893154

版权

开发十年，就只剩下这套架构体系了！ >>>

一、前言

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

二、下载 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;
    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;
}
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）查看。