✨ feat: Copy Code
This commit is contained in:
54
layout/_partial/post/clipboard.ejs
Normal file
54
layout/_partial/post/clipboard.ejs
Normal file
@@ -0,0 +1,54 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
|
||||
<script>
|
||||
function wait(callback, seconds) {
|
||||
var timelag = null;
|
||||
timelag = window.setTimeout(callback, seconds);
|
||||
}
|
||||
!function (e, t, a) {
|
||||
var initCopyCode = function(){
|
||||
var copyHtml = '';
|
||||
copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
|
||||
copyHtml += '<i class="ri-file-copy-2-line"></i><span>COPY</span>';
|
||||
copyHtml += '</button>';
|
||||
$(".highlight .code pre").before(copyHtml);
|
||||
$(".article pre code").before(copyHtml);
|
||||
var clipboard = new ClipboardJS('.btn-copy', {
|
||||
target: function(trigger) {
|
||||
return trigger.nextElementSibling;
|
||||
}
|
||||
});
|
||||
clipboard.on('success', function(e) {
|
||||
let $btn = $(e.trigger);
|
||||
$btn.addClass('copied');
|
||||
let $icon = $($btn.find('i'));
|
||||
$icon.removeClass('ri-file-copy-2-line');
|
||||
$icon.addClass('ri-checkbox-circle-line');
|
||||
let $span = $($btn.find('span'));
|
||||
$span[0].innerText = 'COPIED';
|
||||
|
||||
wait(function () { // 等待两秒钟后恢复
|
||||
$icon.removeClass('ri-checkbox-circle-line');
|
||||
$icon.addClass('ri-file-copy-2-line');
|
||||
$span[0].innerText = 'COPY';
|
||||
}, 2000);
|
||||
});
|
||||
clipboard.on('error', function(e) {
|
||||
e.clearSelection();
|
||||
let $btn = $(e.trigger);
|
||||
$btn.addClass('copy-failed');
|
||||
let $icon = $($btn.find('i'));
|
||||
$icon.removeClass('ri-file-copy-2-line');
|
||||
$icon.addClass('ri-time-line');
|
||||
let $span = $($btn.find('span'));
|
||||
$span[0].innerText = 'COPY FAILED';
|
||||
|
||||
wait(function () { // 等待两秒钟后恢复
|
||||
$icon.removeClass('ri-time-line');
|
||||
$icon.addClass('ri-file-copy-2-line');
|
||||
$span[0].innerText = 'COPY';
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
initCopyCode();
|
||||
}(window, document);
|
||||
</script>
|
Reference in New Issue
Block a user