跳到主要内容

Hugo-Code代码复制

·

建立一个CSS,一个JS文件,细节如下,实现代码复制功能,例如 /themes/主题名称/

1、CSS:命名为add-copy-btn.css 放在 主题名称/static/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: #222; 
21    min-width: 50px;
22    text-align: center;
23}
24
25.highlight-copy-btn:hover {
26    background-color: #e70d9f;
27}

2、JS:命名为add-copy-btn.js 放在 主题名称/static/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 = "📝复制代码";
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 = "📝复制代码";
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, '🖨复制完成')
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})();

3、在 主题名称/layouts/partials/footer.html 结尾 增加下面代码

1<style><!-- copy code -->
2@import url(/css/add-copy-btn.css);
3</style>
4<script src="{{"/js/add-copy-btn.js" | relURL}}"></script>

4、在主目录 hugo.toml 文件下加入以下代码配置

1[markup.highlight]
2  lineNos = true
3  lineNumbersInTable = false
白日映照满天星
作者
白日映照满天星
订阅我频道让你站在上帝角度观察视野! QQ:3925993 有尝解决技术问题【备注你的问题】 🐑

阅读量:评论:
赞赏码图