在文章中插入大量无意义内容一不美观，二不便复制，不如使用 js 创建隐藏内容的复制按钮吧。

引入 JS

本主题：依次进入 控制台 - 外观 - 设置外观 - 主题自定义扩展，将以下代码加入到 自定义 HTML 元素拓展 - 标签: head 头部 (meta 元素后)，其他主题直接加入到主题对应的 header.php 中的 标签前。 [collapse title="JavaScript Code"]

    // 创建隐藏内容的复制按钮
    document.addEventListener('DOMContentLoaded', initCopyButton);

    function initCopyButton() {

        const util = {

            newButton: function (cp) {
    
                cp.style.display = '0';
    
                let text = cp.getAttribute('text');
    
                text = text[0] === '\n' ? text.slice(1) : text;
    
                const button = document.createElement('a');
    
                button.href = '#'
                button.innerHTML = cp.getAttribute('name');
    
                button.className = 'btn btn-primary';
    
                button.onclick = () =>
 {
    
                    const originName = button.innerHTML;
    
                    const actionResult = this.copy(text) ? '成功' : '失败';
    
                    button.innerHTML = '复制' + actionResult;
    
                    setTimeout(() =>
     button.innerHTML = originName, 250);
    
                    return false;

                }
    ;
    
                cp.parentNode.insertBefore(button, cp);

            }
,
            copy: function (text) {
    
                let result = false;
    
                const target = document.createElement('pre');
    
                target.style.opacity = '0';
    
                target.textContent = text;
    
                document.body.appendChild(target);

                try {
    
                    const range = document.createRange();
    
                    range.selectNode(target);
    
                    window.getSelection().removeAllRanges();
    
                    window.getSelection().addRange(range);
    
                    document.execCommand('copy');
    
                    window.getSelection().removeAllRanges();
    
                    result = true;

                }
 catch (e) {
    
                    console.log('copy failed.');

                }
    
                document.body.removeChild(target);
    
                return result;

            }

        }
    ;
    
        document.querySelectorAll('cp').forEach(cp =>
     util.newButton(cp));

    }
    

[/collapse] 如果你开启了 PJAX，可能需要单独加入回调函数。对于本主题，依次进入 控制台 - 外观 - 设置外观 - PJAX(BETA) - PJAX RELOAD，将 initCopyButton(); 添加进入即可。

使用方法：

!!!
    cp name="复制静夜思" text="
           静夜思
    床前明月光，疑是地上霜。
    举头望明月，低头思故乡。
    ">
    /cp>
    
!!!

如果你想在代码块的右上角添加复制按钮，请看 另一篇文章。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！