兔子昂

如果懒得研究纯js实现，可以使用我写的typecho插件。https://www.tuziang.com/combat/1800.html

零. 前言介绍

百度搜typecho复制代码，出来的不是加版权信息，就是代码高亮显示插件。我试了prismjs这个代码语法高亮插件，不知道什么原因就是没效果，所以花10个小时手写了个JavaScript脚本。

仿的CSDN，只有鼠标放到代码块，才会显示复制代码，鼠标从代码块移开，复制代码方框消失。支持一篇文章多个代码块的单独复制(这里实现比较心累，用到了闭包)。

效果如下图：

点击复制代码，会出现成功复制的提示。之后延迟一秒后，又会重置为复制代码。

一. 新建codecopy.js

进入/usr/themes/你所用的模板名/，新建一个codecopy.js文件。

比如我的就是/usr/themes/Fantasy/目录。打开codecopy.js，在文件中添加下面的代码：

//html5 给typecho添加 复制代码 功能 
// by 兔子昂
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;\
    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文件，在文件末尾的</body>前添加下面一行。

<script src="https://www.tuziang.com/usr/themes/Fantasy/codecopy.js"></script>

上面的src属性换成你网站的codecopy.js文件路径。

刷新你的网站。即可看到效果。如果有问题，可以在评论区留言。

三. 支持测试

以下浏览器均为最新版本。经过测试，都可以正常复制。

电脑

• 搜狗浏览器 √
• 谷歌浏览器 √
• 火狐浏览器 √
• Microsoft Edge √
• QQ浏览器 √

手机

• 腾讯浏览器
• 搜狗浏览器

暂时先试这么多。

参考：

解决h5一键复制的问题 - 道的博客 - CSDN博客
用 js 的 selection range 操作选择区域内容和图片 - muge10 - 博客园
JS中插入节点的方法appendChild和insertBefore的应用 - 再逼逼一段代码丢过去 - 博客园
for 循环 addEventListener 与闭包实现 - u011364363的博客 - CSDN博客
javascript - 这段js循环代码addEventListener为什么会错误? - SegmentFault 思否