博客园为代码块添加复制功能
下载文件#
实现该功能要用到两个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("复制失败");
});
});
}
}
}
});
