feat: Copy Code

This commit is contained in:
shenyu 2020-04-12 21:17:46 +08:00
parent 84f7538acd
commit 586f38c9ed
5 changed files with 101 additions and 2 deletions

View File

@ -105,6 +105,8 @@ progressBar: true
excerpt_link: Read More...
excerpt_all: false
# Copy code button
copy_btn: true
# Share
share_enable: true
# If you are not in China, maybe you prefer to set:false

View File

@ -41,6 +41,8 @@ excerpt_link: 阅读更多...
# 如果你嫌每篇文章手动加more标记比较麻烦又不想在首页全文显示可以把excerpt_all设置成true这样首页只会显示文章归档
excerpt_all: false
# 是否开启代码复制按钮
copy_btn: true
# 是否开启文章分享按钮
share_enable: true
# 国内的社交平台(If you are not in China, maybe you prefer to set:false)
@ -187,4 +189,4 @@ pageFooter: true
icp:
enable: false
url: "http://www.beian.miit.gov.cn/" # 备案链接
text: "浙ICP备88888888" # 备案信息
text: "浙ICP备88888888" # 备案信息

View File

@ -62,4 +62,10 @@
<script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>
<% if (theme.clickLove){ %>
<%- js('/js/clickLove') %>
<% } %>
<% } %>
<!-- 复制 -->
<% if (theme.copy_btn == true) { %>
<%- css('/css/clipboard') %>
<%- partial('post/clipboard') %>
<% } %>

View 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>

35
source/css/clipboard.styl Normal file
View File

@ -0,0 +1,35 @@
//
if hexo-config('copy_btn') == true
.highlight
position: relative
.btn-copy
z-index: 1
display: inline-block
cursor: pointer
border: none
disable-user-select()
-webkit-appearance: none
font-size: 12px
font-weight: bold
padding: 3px 6px
>i
margin-right: 4px
font-size: 10px
transform: translateY(1px);
color: #333
background: rgba(255,255,255,.8)
border-radius: 2px
position: absolute
top: 0
right: 0
opacity: 0
transition: all linear .2s
&:hover
background: rgba(255,255,255,.7)
.highlight:hover .btn-copy
opacity: 1
.article pre:hover .btn-copy
opacity: 1