有时候代码块是真的多啊, 添加一个一键复制功能吧

1.需要的JS文件

将以上js文件放到主题的js文件目录下.

clipboard-use.js:

One More Thing 👇
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
!function (e, t, a) {
/* code */
var initCopyCode = function(){
var copyHtml = '';
copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
copyHtml += ' <i class="fa fa-copy"></i><span>Copy</span>';
copyHtml += '</button>';
$(".highlight .code pre").before(copyHtml);
var clipboard = new ClipboardJS('.btn-copy', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
clipboard.on('success', function(e) {
//您可以加入成功提示
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
success_prompt(COPY_SUCCESS);
e.clearSelection();
});
clipboard.on('error', function(e) {
//您可以加入失败提示
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
fail_prompt(COPY_FAILURE);
});
}
initCopyCode();
}(window, document);
/**
* 弹出式提示框,默认1.5秒自动消失
* @param message 提示信息
* @param style 提示样式,有alert-success、alert-danger、alert-warning、alert-info
* @param time 消失时间
*/
var prompt = function (message, style, time){
style = (style === undefined) ? 'alert-success' : style;
time = (time === undefined) ? 1500 : time*1000;
$('<div>')
.appendTo('body')
.addClass('alert ' + style)
.html(message)
.show()
.delay(time)
.fadeOut();
};
// 成功提示
var success_prompt = function(message, time){
prompt(message, 'alert-success', time);
};
// 失败提示
var fail_prompt = function(message, time){
prompt(message, 'alert-danger', time);
};
// 提醒
var warning_prompt = function(message, time){
prompt(message, 'alert-warning', time);
};
// 信息提示
var info_prompt = function(message, time){
prompt(message, 'alert-info', time);
};

2.引入JS文件

将以上两个JS文件引入到主题每个页面都用的文件里, 一定要输入对你自己的src路径

1
2
<script type="text/javascript" src="/blog/js/clipboard.min.js"></script>  
<script type="text/javascript" src="/blog/js/clipboard-use.js"></script>

3.配置样式表

将下列代码添加到主题的样式表里, 根据自己的div修改

One More Thing 👇
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
//代码块复制按钮
.highlight{
//方便copy代码按钮(btn-copy)的定位
position: relative;
}
.btn-copy {
display: inline-block;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc,#eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: #333;
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
padding: 2px 6px;
position: absolute;
right: 5px;
top: 5px;
opacity: 0;
}
.btn-copy span {
margin-left: 5px;
}
.highlight:hover .btn-copy{
opacity: 1;
}
//复制提示, 成功or失败
.alert {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 99999;
text-align: center;
padding: 24px 36px;
border-radius: @border_radius_code_block;
box-shadow: @boxshadow_card_normal;
font-family: @fontfamily_base;
font-weight: bold;
font-size: @fontsize_base;
&.alert-success {
color: #ffffff;
background-color: #1BC3FB;
border-color: #d6e9c6;
}
&.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
&.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
&.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
}

评论