为Hexo博客的代码片段添加 选择全部 按钮

Hexo生成的博客中,代码片段是不支持选择全部功能的,若代码片段较长,手动选择非常的不方便。
添加的方法如下。
在页面模板文件(对于Next主题,模板文件为themes/next/layout/_layout.swig)的<head>节点中添加如下代码。

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
$(document).ready(function () {
var SelectText = function(element) {
var doc = document
, text = element
, range, selection
;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
};

$(".code").each(function() {
var code = $(this).get(0);
var button_html =
'<div style="position: fixed;' +
'right: 3%;' +
'margin-top: 5px;' +
'font-family: consolas, Menlo, \'PingFang SC\', \'Microsoft YaHei\', monospace;' +
'font-size: 10px;' +
'cursor: pointer;' +
'color: #e31436;' +
'">' +
'<span>全选</span>' +
'</div>';
var button = $(button_html);

$(button).click(function() {
SelectText(code);
});
$(button).insertBefore(this);
});
});