Jekyll博客添加代码框一键复制按钮与复制提示

本文主要是介绍Jekyll博客添加代码框一键复制按钮与复制提示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

categories: [Frontend]
tags: Frontend HTML JavaScript CSS

写在前面

之前一直想试试代码一键复制, 但是看了很多博客都是大改主题, 自己并没有系统学过前端的东西, 只能求助于 AGI 了.

结果发现 chatGPT3.5 免费版还是厉害, Gemini 虽然上了 Pro 还是差点意思

我的博客在这里: zorchp.github.io

js 逻辑

assets/js/copy-to-clipboard.js

document.addEventListener('DOMContentLoaded', function () {var codeBlocks = document.getElementsByTagName('code');for (var i = 0; i < codeBlocks.length; i++) {var codeBlock = codeBlocks[i];var button = document.createElement('button');button.textContent = 'Copy';button.classList.add('copy-button'); // add CSS classcodeBlock.parentNode.insertBefore(button, codeBlock.nextSibling);var clipboard = new ClipboardJS(button, {target: function (trigger) {return trigger.previousSibling;}});clipboard.on('success', function (e) {e.clearSelection();var notification = document.createElement('div');notification.textContent = 'Copied!';notification.classList.add('notification');document.body.appendChild(notification);setTimeout(function () {notification.style.opacity = '0';setTimeout(function () {document.body.removeChild(notification);}, 1000);}, 1000);// console.log('已复制到剪贴板:', e.text);});clipboard.on('error', function (e) {console.error('复制失败:', e.action);});}
});

主要是使用 clipboard.js 来实现. 遍历找 code 标签页. 我加了复制成功的渐隐效果.

CSS

assets/css/copy.css

div.highlight {position: relative;
}div.highlight .copy-button {position: absolute;top: 0px;right: 0px;border: .3px solid orange;border-radius: 1px;
}.notification {position: fixed;top: 0;left: 50%;transform: translateX(-50%);padding: 10px;color: antiquewhite;opacity: 1;transition: opacity 1s;
}

html

_includes/head/custom.html

<!-- copy to clipboard -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<script src="/assets/js/copy-to-clipboard.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/css/copy.css" />