TypechoJoeTheme

老狮的梦

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码

typecho给代码块添加复制按钮

老狮博主
2021-03-07
/
3 评论
/
719 阅读
/
194 个字
/
百度已收录
03/07
本文最后更新于2021年03月07日,已超过143天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

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

新建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文件,在文件末尾的</body>前添加下面一行。

<script src="<?php $this->options->themeUrl(); ?>codecopy.js"></script>
Typecho美化代码
朗读
赞(1)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

老狮的梦

本文链接:

https://laolion.com/archives/2554.html(转载时请注明本文出处及文章链接)

评论 (3)
  1. 夏目贵志 闲逛
    Android · Google Chrome

    博客园/csdn/我就经常用到这个功能!

    2021-03-07 回复
    1. 老狮 博主
      Windows 7 · Google Chrome
      @夏目贵志

      是吧,我也是觉得很不错就拿来用了

      2021-03-07 回复
      1. 夏目贵志 闲逛
        Windows 10 · Google Chrome
        @老狮

        是很方便,默认的话 需要全选 ctrl+a 然后 ctrl+c 这样方便很多!

        2021-03-07 回复

互动读者

  • Kool闲逛

    评论 2 次 | 文章 0 篇

  • 爷爷闲逛

    评论 2 次 | 文章 0 篇

  • 老狮博主

    评论 2 次 | 文章 335 篇

  • lee闲逛

    评论 1 次 | 文章 0 篇

标签云

最新回复

  1. 忙碌奔波闲逛
    2021-07-27
  2. 有毒吗闲逛
    2021-07-27
  3. aa闲逛
    2021-07-27
  4. 爷爷闲逛
    2021-07-26
  5. 爷爷闲逛
    2021-07-26