一：meadow主题
二：如何配置代码一键复制
找到footer.ejs
1
在themes/meadow/layout/_partial/footer.ejs
增加如下代码
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
73
<!-- code增加复制按钮 start -->
<style>
.copy-btn {
display: inline-block;
padding: 6px 12px;
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: #333;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
user-select: none;
outline: 0;
}
.highlight-wrap .copy-btn {
transition: opacity .3s ease-in-out;
opacity: 0;
padding: 2px 6px;
position: absolute;
right: 4px;
top: 8px;
}
.highlight-wrap:hover .copy-btn,
.highlight-wrap .copy-btn:focus {
opacity: 1
}
.highlight-wrap {
position: relative;
}
</style>
<script>
$('.highlight').each(function (i, e) {
var $wrap = $('<div>').addClass('highlight-wrap');
$(e).after($wrap);
$wrap.append($('<button>').addClass('copy-btn').append('复制').on('click', function (e) {
var code = $(this).parent().find('.code').find('.line').map(function (i, e) {
return $(e).text();
}).toArray().join('\r\n');//增加换行符
var ta = document.createElement('textarea');
document.body.appendChild(ta);
ta.style.position = 'absolute';
ta.style.top = '0px';
ta.style.left = '0px';
ta.value = code;
ta.select();
ta.focus();
var result = document.execCommand('copy');
document.body.removeChild(ta);
if(result){
$(this).text('复制成功');
}else{
$(this).text('复制失败');
}
$(this).blur();
})).on('mouseleave', function (e) {
var $b = $(this).find('.copy-btn')
setTimeout(function () {
$b.text('复制')
}, 300)
}).append(e)
})
</script>
<!-- code增加复制按钮 end -->效果
*************感谢您的阅读*************