蒋振飞的博客 - 网站搭建 (第23天) 代码块复制功能   
正在加载蒋振飞的博客...
V3.0
蒋振飞的博客

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

发布时间: 2019年02月03日 发布人: 蒋振飞 热度: 141 ℃ 评论数: 0

一、前言

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

二、下载 clipboard.js

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

    下载地址:

三、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)查看。

四、补充

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

打赏 蒋振飞

取消

感谢您的支持,我会继续努力的!

扫码支持
一分也是爱     一块不嫌多

点击 支付宝 或 微信 打赏蒋振飞

打开支付宝扫一扫,即可进行扫码打赏哦

评论列表