php复制按钮,typecho给代码块添加复制按钮

本文最后更新于2021年03月07日，已超过12天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！

只有鼠标放到代码块，才会显示复制代码，鼠标从代码块移开，复制代码方框消失。支持一篇文章多个代码块的单独复制。

新建codecopy.js

在主题文件里面新建一个codecopy.js文件。在文件里放入以下代码：var codeblocks = document.getElementsByTagName("pre")

//循环每个pre代码块，并添加 复制代码

for (var i = 0; i < codeblocks.length; i++) {

//显示 复制代码 按钮

currentCode = codeblocks[i]

currentCode.style = "position: relative;"

var copy = document.createElement("div")

copy.style = "position: absolute;right: 4px;\

top: 4px;background-color: white;padding: 2px 8px;\

margin: 8px;border-radius: 4px;cursor: pointer;\

z-index: 9999;\

box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05);"

copy.innerHTML = "复制"

currentCode.appendChild(copy)

//让所有 "复制"按钮 全部隐藏

copy.style.visibility = "hidden"

}

for (var i = 0; i < codeblocks.length; i++) {

!function (i) {

//鼠标移到代码块，就显示按钮

codeblocks[i].onmouseover = function () {

codeblocks[i].childNodes[1].style.visibility = "visible"

}

//执行 复制代码 功能

function copyArticle(event) {

const range = document.createRange();

//范围是 code，不包括刚才创建的div

range.selectNode(codeblocks[i].childNodes[0]);

const selection = window.getSelection();

if (selection.rangeCount > 0) selection.removeAllRanges();

selection.addRange(range);

document.execCommand('copy');

codeblocks[i].childNodes[1].innerHTML = "复制成功"

setTimeout(function () {

codeblocks[i].childNodes[1].innerHTML = "复制"

}, 1000);

//清除选择区

if (selection.rangeCount > 0) selection.removeAllRanges(); 0

}

codeblocks[i].childNodes[1].addEventListener('click', copyArticle, false);

}(i);

!function (i) {

//鼠标从代码块移开 则不显示复制代码按钮

codeblocks[i].onmouseout = function () {

codeblocks[i].childNodes[1].style.visibility = "hidden"

}

}(i);

}

引用codecopy.js

打开模板目录下的footer.php文件，在文件末尾的