如何为Jekyll站点的代码片段添加复制到剪贴板按钮？

我刚好解决过类似的需求，用Jekyll的Liquid模板配合ClipboardJS就能完美实现自动生成唯一ID的功能，不用手动给每个代码块加ID，省超多事。下面是一步步的具体实现方法：

1. 自定义代码块渲染模板 #

Minima默认用Rouge做代码高亮，我们先创建一个自定义模板来包裹代码块，自动生成唯一ID和复制按钮。

在站点根目录新建_includes/code_block.html文件，内容如下：

{% capture unique_id %}code-{{ page.url | slugify }}-{{ forloop.index }}{% endcapture %}
<div class="code-container">
  <button class="copy-btn" data-clipboard-target="#{{ unique_id }}">复制到剪贴板</button>
  <pre><code id="{{ unique_id }}" class="language-{{ include.lang }}">{{ include.code | escape }}</code></pre>
</div>

这里用页面URL的slug加上循环索引生成唯一ID，确保同一页面的多个代码块ID不重复，不同页面的也不会冲突。

2. 自动转换Markdown代码块（推荐） #

如果习惯用Markdown的```语法写代码，不想手动改每个代码块，可以用Jekyll插件自动转换。在_plugins目录新建code_block_converter.rb文件，内容如下：

Jekyll::Hooks.register :pages, :pre_render do |page, payload|
  next unless page.extname == '.md'

  page.content = page.content.gsub(/```(\w+)\n([\s\S]*?)```/) do |match|
    lang = $1
    code = $2.gsub('"', '"').gsub("\n", '
')
    "{% include code_block.html lang='#{lang}' code='#{code}' %}"
  end
end

这个插件会自动扫描所有Markdown文件，把标准代码块替换成我们的自定义模板调用，完全不用手动修改已有内容。

3. 引入并初始化ClipboardJS #

先把ClipboardJS的核心代码下载到本地（避免外链），放到assets/js/clipboard.min.js。然后在_includes/head.html末尾添加初始化脚本：

<script src="{{ '/assets/js/clipboard.min.js' | relative_url }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const clipboard = new ClipboardJS('.copy-btn');
  
  // 复制成功的提示
  clipboard.on('success', function(e) {
    e.trigger.textContent = '已复制！';
    setTimeout(() => {
      e.trigger.textContent = '复制到剪贴板';
    }, 2000);
    e.clearSelection();
  });
  
  // 复制失败的提示
  clipboard.on('error', function(e) {
    e.trigger.textContent = '复制失败，请手动复制';
    setTimeout(() => {
      e.trigger.textContent = '复制到剪贴板';
    }, 2000);
  });
});
</script>

4. 添加样式优化体验（可选） #

为了让按钮更美观，在assets/css/style.css里加一点基础样式：

.code-container {
  position: relative;
  margin: 1.5em 0;
}

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 10px;
  background-color: #2d3748;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.8em;
  cursor: pointer;
  transition: background-color 0.2s;
}

.copy-btn:hover {
  background-color: #4a5568;
}

这样设置完，所有代码块都会自动带上唯一ID和复制按钮，完全不用手动管理ID，直接用你原来的Markdown代码写法就行！

内容的提问来源于stack exchange，提问作者Adam Matan