前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Typecho 给代码块添加复制功能

Typecho 给代码块添加复制功能

作者头像
团团生活志
发布2022-08-16 08:32:35
9510
发布2022-08-16 08:32:35
举报
文章被收录于专栏:Live专区

在主题目录下建立一个js文件放置到js目录

添加以下:

代码语言:javascript
复制
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);
}

在footer.php页面 上一行添加

代码语言:javascript
复制
<script src="<?php $this->options->themeUrl('js/codecopy.js'); ?>"></script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-03-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档