为B2 PRO主题代码块添加一键复制和美化

简介

简介真好看~！

步骤一

CSS代码部分

/*为pre区域添加一键复制*/
i.yellow-i {
content: '';
position: absolute;
top: 0;
left: 25px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 15px 25px;
background: #fdbc40;
z-index: 1;
}
i.green-i {
content: '';
position: absolute;
top: 0;
left: 50px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 15px 25px;
background: #35cd4b;
z-index: 1;
}i.red-i {
content: '';
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background: #fc625d;
margin: 15px 25px;
z-index: 1;
}.entry-content pre {
position: relative;
border-radius: 6px;
padding-top: 50px;
box-shadow: 0px 8px 20px -10px #000;
}/* 代码块容器样式，用于包装代码块和按钮 */
.code-container {
    position: relative;
}

/* 复制按钮样式 */
.copy-button {
    background-color: #00000000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

放在你的css文件里面只要能加载就可以比如style.css

步骤二

JavaScript代码部分

// 为每个代码块添加复制按钮
document.querySelectorAll('pre').forEach(function (codeBlock) {
    var redi = document.createElement('i');
    redi.className = 'red-i';
    var yellowi = document.createElement('i');
    yellowi.className = 'yellow-i';
    var greeni = document.createElement('i');
    greeni.className = 'green-i';
    var copyButton = document.createElement('button');
    copyButton.className = 'copy-button';
    copyButton.innerHTML= '<svg t="1692961697703" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10558" width="16" height="16"><path d="M691.712 152.576c59.392 0 108.032 48.64 108.032 108.032v646.656c0 59.392-48.64 108.032-108.032 108.032H188.416c-59.392 0-108.032-48.64-108.032-108.032V260.608c0-59.392 48.64-108.032 108.032-108.032h503.296zM188.416 943.104H691.2c19.968 0 35.84-15.872 35.84-35.84V260.608c0-19.968-15.872-35.84-35.84-35.84H188.416c-19.968 0-35.84 15.872-35.84 35.84v646.656c0 19.968 16.384 35.84 35.84 35.84zM835.584 9.216c59.392 0 108.032 48.64 108.032 108.032v682.496c0 19.968-15.872 35.84-35.84 35.84s-35.84-15.872-35.84-35.84V116.736c0-19.968-15.872-35.84-35.84-35.84H296.448c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84h539.136zM547.84 727.552c19.968 0 35.84 15.872 35.84 35.84s-15.872 35.84-35.84 35.84H260.608c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84H547.84z m72.192-179.712c19.968 0 35.84 15.872 35.84 35.84s-15.872 35.84-35.84 35.84H260.608c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84h359.424z m0-179.712c19.968 0 35.84 15.872 35.84 35.84s-15.872 35.84-35.84 35.84H260.608c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84h359.424z" fill="#bfbfbf" p-id="10559"></path></svg>';
    // 创建包装容器
    var container = document.createElement('div');
    container.className = 'code-container';

    // 将复制按钮和代码块移入容器
    container.appendChild(redi);
    container.appendChild(yellowi);
    container.appendChild(greeni);
    container.appendChild(copyButton);
    codeBlock.parentNode.replaceChild(container, codeBlock);
    container.appendChild(codeBlock);

    copyButton.addEventListener('click', function () {
        // 复制代码逻辑
        var codeToCopy = codeBlock.innerText;
        // 执行复制操作
        navigator.clipboard.writeText(codeToCopy).then(function () {
            // 复制成功后的处理
            copyButton.innerHTML = '<svg t="1692961288647" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5210" width="16" height="16"><path d="M678.1 256.5H242.9c-35.3 0-64 28.7-64 64v486.4c0 35.3 28.7 64 64 64h435.2c35.3 0 64-28.7 64-64V320.5c0-35.3-28.7-64-64-64z m12.8 550.4c0 7-5.8 12.8-12.8 12.8H242.9c-7.1 0-12.8-5.7-12.8-12.8V320.5c0-7.1 5.7-12.8 12.8-12.8h435.2c7.1 0 12.8 5.7 12.8 12.8v486.4z m0 0" p-id="5211" fill="#bfbfbf"></path><path d="M780.5 154.1H345.3c-14.1 0-25.6 11.5-25.6 25.6 0 14.1 11.5 25.6 25.6 25.6h435.2c7.1 0 12.8 5.7 12.8 12.8v486.4c0 14.1 11.5 25.6 25.6 25.6 14.1 0 25.6-11.5 25.6-25.6V218.1c0-35.3-28.7-64-64-64z m0 0" p-id="5212" fill="#bfbfbf"></path><path d="M626.2 457.2c10.8 10.7 10.8 28 0 38.7L447.7 673.2c-21.5 21.4-56.4 21.4-77.9 0l-73.4-72.9c-10.8-10.7-10.8-28 0-38.7 10.8-10.7 28.2-10.7 38.9 0l73.4 72.9 178.5-177.3c10.8-10.7 28.2-10.7 39 0z" p-id="5213" fill="#bfbfbf"></path></svg>';
            setTimeout(function () {
                copyButton.innerHTML = '<svg t="1692961697703" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10558" width="16" height="16"><path d="M691.712 152.576c59.392 0 108.032 48.64 108.032 108.032v646.656c0 59.392-48.64 108.032-108.032 108.032H188.416c-59.392 0-108.032-48.64-108.032-108.032V260.608c0-59.392 48.64-108.032 108.032-108.032h503.296zM188.416 943.104H691.2c19.968 0 35.84-15.872 35.84-35.84V260.608c0-19.968-15.872-35.84-35.84-35.84H188.416c-19.968 0-35.84 15.872-35.84 35.84v646.656c0 19.968 16.384 35.84 35.84 35.84zM835.584 9.216c59.392 0 108.032 48.64 108.032 108.032v682.496c0 19.968-15.872 35.84-35.84 35.84s-35.84-15.872-35.84-35.84V116.736c0-19.968-15.872-35.84-35.84-35.84H296.448c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84h539.136zM547.84 727.552c19.968 0 35.84 15.872 35.84 35.84s-15.872 35.84-35.84 35.84H260.608c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84H547.84z m72.192-179.712c19.968 0 35.84 15.872 35.84 35.84s-15.872 35.84-35.84 35.84H260.608c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84h359.424z m0-179.712c19.968 0 35.84 15.872 35.84 35.84s-15.872 35.84-35.84 35.84H260.608c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84h359.424z" fill="#bfbfbf" p-id="10559"></path></svg>';
            }, 2000); // 2秒后恢复按钮文本
        }).catch(function (err) {
            // 复制失败处理
            console.error('Copy failed: ', err);
        });
    });
});

放在你的js文件里面只要能加载就可以，比如child.js