博客园代码块添加复制功能
下载文件
实现该功能要用到两个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>
转载
XFS
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~
2020-06-27 IDE连接数据库时测试Test Connection 无法点击