[Typecho 优化]Typecho 简单实现点击复制

==意思就是，显示一个按钮，然后你点击按钮复制隐藏内容，下面放个例子==

这里主要说和我同主题的操作

引入 JS

依次进入 [tag type="default" outline]控制台 - 外观 - 设置外观 - 主题自定义扩展，[/tag]将以下代码加入到 [tag type="default" outline]自定义 HTML 元素拓展 - 标签: head 头部 (meta 元素后)，[/tag]也可直接加入到主题对应的 [tag type="default" outline]header.php[/tag] 中的[tag type="default" outline] 标签[/tag]前。

[collapse title="JS代码"]

<script>
    // 创建隐藏内容的复制按钮
    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));
    }
</script>

[/collapse]

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

添加按钮

以[tag type="default" outline] html[/tag] 形式将以下内容写入文章中，即可创建复制按钮。
[collapse title="HTML代码"]

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

[/collapse]

注意事项

我这个主题如果显示复制成功，但是粘贴是空的，解决办法如下：

• 改 35 行，把const target = document.createElement('pre');改成const target = document.createElement('textarea');也就是 pre 改成 textarea

转自LOGIhttps://logi.im/blog/copy-on-btn-click-in-typecho.html