.jpg)
本文转载与修改自：Hugo插件之代码块拷贝插件
添加按钮-css
我们通过检查博客内容页面发现，hugo生成的每个代码块格式如下：
没有语法突出显示的代码块具有相同的结构，但周围没有 <div class=highlight>。为了考虑到这两种情况，我选择了作为 <pre> 元素下面的 <code> 子元素。
copy-to-clipboard.css
1.highlight {
2 position: relative;
3}
4
5.highlight pre {
6 padding-right: 75px;
7 /* background-color:#f8f8f8 !important; */
8}
9
10.highlight-copy-btn {
11 position: absolute;
12 top: 7px;
13 right: 7px;
14 border: 0;
15 border-radius: 4px;
16 padding: 1px;
17 font-size: 0.8em;
18 line-height: 1.5;
19 color: #fff;
20 background-color: #777;
21 min-width: 50px;
22 text-align: center;
23}
24
25.highlight-copy-btn:hover {
26 background-color: #666;
27}
与剪切板交互-js
按钮有了，接下来就是怎么使用JavaScript拷贝代码到剪切板，废话少说，直接上代码：
copy-to-clipboard.js
1(function() {
2 'use strict';
3
4 if(!document.queryCommandSupported('copy')) {
5 return;
6 }
7
8 function flashCopyMessage(el, msg) {
9 el.textContent = msg;
10 setTimeout(function() {
11 el.textContent = "Copy";
12 }, 1000);
13 }
14
15 function selectText(node) {
16 var selection = window.getSelection();
17 var range = document.createRange();
18 range.selectNodeContents(node);
19 selection.removeAllRanges();
20 selection.addRange(range);
21 return selection;
22 }
23
24 function addCopyButton(containerEl) {
25 var copyBtn = document.createElement("button");
26 copyBtn.className = "highlight-copy-btn";
27 copyBtn.textContent = "Copy";
28
29 var codeEl = containerEl.firstElementChild;
30 copyBtn.addEventListener('click', function() {
31 try {
32 var selection = selectText(codeEl);
33 document.execCommand('copy');
34 selection.removeAllRanges();
35
36 flashCopyMessage(copyBtn, 'Copied!')
37 } catch(e) {
38 console && console.log(e);
39 flashCopyMessage(copyBtn, 'Failed :\'(')
40 }
41 });
42
43 containerEl.appendChild(copyBtn);
44 }
45
46 // Add copy button to code blocks
47 var highlightBlocks = document.getElementsByClassName('highlight');
48 Array.prototype.forEach.call(highlightBlocks, addCopyButton);
49})();
修改主题
将 copy-to-clipboard.css 和 copy-to-clipboard.js 分别放到 static/css 和 static/js 目录下
然后在页面引用这两个文件
1.修改 config.toml 添加自定义css
1custom_css = ["/css/copy-to-clipboard.css"]
2.修改主题文件下的 layouts/partials/footer.html
在结尾加上下面这一句，之前测试在 config.toml 下面添加，不生效
1<script src="/js/copy-to-clipboard.js"></script>
