博客园为代码块添加复制功能

下载文件#

实现该功能要用到两个js文件，分别是

• https://blog-static.cnblogs.com/files/mg007/clipboard.min.js
• https://blog-static.cnblogs.com/files/mg007/cp.js

可以直接引用，但最好还是下载下来放到自己的文件里

添加css#

网上实现此功能的文章很多都互相转载，都是下面这一段css代码：

.cnblogs-markdown pre {
  position: relative;
}
.cnblogs-markdown pre > span {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 2px;
  padding: 0 10px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
  display:none;
}
.cnblogs-markdown pre:hover > span {
  display:block;
}
.cnblogs-markdown pre > .copyed {
  background: #67c23a;
}

这种样式适合于代码块底色为亮色的情形，而且复制按钮是贴在代码块的边上的，我觉得在暗色模式下会比较不舒服，所以我修改了一些，把按钮改成了白色，增加了复制按钮的边距，并且增加了鼠标悬停的效果，在暗色模式下会比较舒服，这是我更改以后的css代码：

.cnblogs-markdown pre {
  position: relative;
}
.cnblogs-markdown pre > span {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 3px;
  padding:0 10px;
  font-size: 12px;
  background: #fff;
  color: #000;
  cursor: pointer;
  display:none;
  margin:8px 10px;
  transition: background .5s;
  -moz-transition: background .5s;
  -webkit-transition: background .5s;
  -o-transition: background .5s;
}
.cnblogs-markdown pre > span:hover {
  background: #ddd
}
.cnblogs-markdown pre:hover > span {
  display:block;
}

将上述代码复制到博客园后台的“页面定制CSS代码”中即可

引用js#

接着在“页脚HTML代码”中添加对两个js文件的引用（需要JS权限）

<script src="https://blog-static.cnblogs.com/files/mg007/clipboard.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/mg007/cp.js"></script>

我更改了cp.js里面的代码，实现点击复制后显示“复制成功”1秒后自动跳回成“复制”，而删除了原来依靠鼠标移开来跳回，防止用户在点击复制后立即移开鼠标造成“复制成功”一闪而过的情况发生，下面是更改后的cp.js

$(function() {
  if ($("#cnblogs_post_body").hasClass("cnblogs-markdown")){
    if ($("#post-date")[0]) {
      var pres = $("pre");
      if (pres.length) {
        pres.each(function() {
          var t = $(this)
            .children("code")
            .text();
          var btn = $('<span class="copy">复制</span>').attr(
            "data-clipboard-text",
            t
          );
          $(this).prepend(btn);
          var c = new ClipboardJS(btn[0]);
          c.on("success", function() {
            btn.addClass("copyed").text("复制成功");
            setTimeout(function(){
              btn.text("复制").removeClass("copyed");
            },1000);
          });
          c.on("error", function() {
            btn.text("复制失败");
          });
        });
      }
    }
  }
});

当然也可以直接引用我改好的js文件：

<script src="https://files.cnblogs.com/files/fenggwsx/clipboard.min.js"></script>
<script src="https://files.cnblogs.com/files/fenggwsx/cp.js"></script>

原文的博主修改了cp.js文件,我也对cp.js文件做了修改,因为我的博客里没有cnblogs-markdown这个类名,所以导致我的页面不会显示"复制"按钮

$(function () {
    if ($("#cnblogs_post_body").hasClass("blogpost-body")) {    //这里修改了
        if ($("#post-date")[0]) {
            var pres = $("pre");
            if (pres.length) {
                pres.each(function () {
                    var t = $(this)
                        .children("code")
                        .text();
                    var btn = $('<span class="copy">复制</span>').attr(
                        "data-clipboard-text",
                        t
                    );
                    $(this).prepend(btn);
                    var c = new ClipboardJS(btn[0]);
                    c.on("success", function () {
                        btn.addClass("copyed").text("复制成功");
                        setTimeout(function () {
                            btn.text("复制").removeClass("copyed");
                        }, 1000);
                    });
                    c.on("error", function () {
                        btn.text("复制失败");
                    });
                });
            }
        }
    }
});

参考资料#

• 作者：wuliytTaotao 出处：https://www.cnblogs.com/wuliytTaotao/p/11752754.html
• 作者：fenggwsx 出处：https://www.cnblogs.com/fenggwsx/p/14366094.html