问题
我正在构建一个带有minima主题的Jekyll网站,以在线发布一些教程.教程页面包含许多代码段,例如：
```javascript
/* Global scope: this code is executed once */
const redis = require('redis');
const host = <HOSTNAME>;
const port = <PORT>;
const password = <PASSWORD>;
...
```
我想在每个代码片段(example)中添加一个“复制到剪贴板”按钮,但不确定在Jekyll中执行此操作的正确方法是什么.
我试过了什么
>使用clipboardjs.com.每个片段需要一个唯一的ID,我不知道如何在Jekyll / Markdown中实现它.
> STFW
我的问题
如何在Jekyll中为代码片段添加“复制到剪贴板”按钮？
解决方法
使用kramdown的块内联属性列表手动为每个代码块生成id,并在其后面添加{：#code-example-1}.
在你的例子中：
```javascript
/* Global scope: this code is executed once */
const redis = require('redis');
const host = <HOSTNAME>;
const port = <PORT>;
const password = <PASSWORD>;
...
```
{: #code-example-1}
这将产生：
<div id="code-example-1" class="language-javascript Highlighter-rouge"> .... </div>
使用jquery
代码块使用code html元素,如果我们检测到它,那么我们加载js,遍历添加自定义id的所有代码元素,以及复制其内容的按钮.最后初始化剪贴板按钮.
{% if page.content contains "code" %}
<script>
<!-- clipboard.js code -->
</script>
{% endif %}
// get all <code> elements
var allCodeBlocksElements = $( "code" );
allCodeBlocksElements.each(function(i) {
// add different id for each code block
// target
var currentId = "codeblock" + (i + 1);
$(this).attr('id',currentId);
//trigger
var clipButton = '<button class="btn" data-clipboard-target="#' + currentId + '"><img src="https://clipboardjs.com/assets/images/clippy.svg" width="13" alt="copy to clipboard"></button>';
$(this).after(clipButton);
});
new Clipboard('.btn');
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
<code>print("Club Nacional de Football")</code>
<br>
<code>print("is a sports institution")</code>
<br>
<code>print("from Uruguay")</code>