在使用 Typecho 的 Handsome 主题撰写技术博客时，经常需要在文章中展示代码块。如果能让读者一键复制代码，无疑会大幅提升阅读体验。本文将介绍一种稳定、主流的实现方法：基于 clipboard.js 为 Handsome 主题的所有代码块添加“复制”按钮。

效果预览

• 每个代码块右上角会出现一个 复制 按钮（带图标）
• 点击后，代码自动复制到剪贴板
• 按钮短暂变为 已复制（带对勾图标），2 秒后恢复
• 支持 PJAX 无刷新加载（需额外配置）

实现步骤

1. 引入 clipboard.js

登录 Typecho 后台，进入 控制台 → 外观 → 设置外观 → 开发者设置，在 「自定义输出 head 输出的 HTML」 中输入以下代码：

<script src="https://cdn.staticfile.org/clipboard.js/2.0.11/clipboard.min.js"></script>

⚠️ 请谨慎使用此类代码，确保来源可信。你也可以使用其他稳定 CDN，如 jsDelivr。

2. 添加自定义 JavaScript

在同一页面的 「自定义 JavaScript」 中粘贴以下完整脚本：

function initCopyCode() {
    var codeBlocks = $("pre code");
    // 移除旧按钮防止重复添加
    $(".copy-btn").remove(); 
    
    codeBlocks.each(function(index, el) {
        // Handsome 主题通常需要 pre 标签作为容器
        $(el).parent().prepend('<div class="copy-btn" style="position:absolute;right:10px;top:10px;cursor:pointer;z-index:10;color:#999;" data-clipboard-snippet><i class="fontello fontello-copy"></i> 复制</div>');
    });

    var clipboard = new ClipboardJS('.copy-btn', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });

    clipboard.on('success', function(e) {
        e.clearSelection();
        $(e.trigger).html('<i class="fontello fontello-check" style="color:#28a745;"></i> 已复制');
        setTimeout(function() {
            $(e.trigger).html('<i class="fontello fontello-copy"></i> 复制');
        }, 2000);
    });
}

// 首次加载执行
$(function() {
    initCopyCode();
});

3. 添加自定义 CSS

在 「自定义 CSS」 中粘贴以下样式，用于定位按钮并美化悬停效果：

/* 为代码块容器开启相对定位 */
pre {
    position: relative;
}

/* 复制按钮悬停效果 */
.copy-btn:hover {
    color: #333 !important;
}

保存设置后，刷新文章页面即可看到复制按钮。

功能说明

PJAX 兼容处理

如果你开启了 Handsome 主题的 PJAX（无刷新切换页面），切换页面后复制按钮可能会失效。此时需要将 initCopyCode 的调用也放入 PJAX 回调函数 中：

在 开发者设置 → PJAX 回调函数 中添加：

 initCopyCode();

这样每次 PJAX 加载新页面后，复制按钮会重新初始化。

注意事项

• 本方法假设 Handsome 主题已加载 jQuery 和 Fontello 图标库（主题默认已包含）。如果图标不显示，请检查主题是否正常加载了字体图标。
• 若你的代码高亮插件不是 Prism.js 或 Highlight.js，而是其他自定义渲染器，可能需要微调 $("pre code") 选择器。
• 建议先在本地或测试环境验证，确保没有与主题现有脚本冲突。

扩展建议

如果你使用了 Prism.js 或 Highlight.js 并希望进一步优化兼容性（例如排除某些语言或调整复制内容格式），可以在此基础上自行修改 target 函数，或通过 clipboard.on('error') 添加错误处理。

通过以上三步，你的 Handsome 主题代码块就具备了优雅的一键复制能力，读者体验将得到实实在在的提升。如果你在操作中遇到问题，欢迎在评论区留言交流。