1 代码块复制
1.1 增加全局函数addLoadEvent
在/themes/pure/source/js目录下打开application.js，在文件最后追加
1
2
3
4
5
6
7
8
9
10
11
| function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
|
1.2 新增按钮
pure默认情况下是没有代码复制功能的，此时需要对hexo增加复制代码块功能。
首先在/themes/pure/layout/_partial目录下新增article-copy-code.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
74
75
| <% if(theme.codeblock.copy_button.enable){ %>
<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;
z-index: 2;
}
.highlight-wrap:hover .copy-btn,
.highlight-wrap .copy-btn:focus {
opacity: 1
}
.highlight-wrap {
position: relative;
}
</style>
<script>
addLoadEvent(()=>{
$('.highlight').each(function (i, e) {
var $wrap = $('<div>').addClass('highlight-wrap')
$(e).after($wrap)
$wrap.append($('<button>').addClass('copy-btn').append('<%= __("codeblock.copy_button") %>').on('click', function (e) {
var code = $(this).parent().find(".code")[0].innerText
<% if(theme.codeblock.copyright.enable){ %>
code += "<%= theme.codeblock.copyright.content %>"
<% } %>
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(theme.codeblock.copy_button.result){ %>
if(result)$(this).text('<%= __("codeblock.copy_success") %>')
else $(this).text('<%= __("codeblock.copy_failure") %>')
<% } %>
$(this).blur()
})).on('mouseleave', function (e) {
var $b = $(this).find('.copy-btn')
setTimeout(function () {
$b.text('<%= __("codeblock.copy_button") %>')
}, 300)
}).append(e)
})
})
</script>
<% } %>
|
1.3 插入到页面
编辑/themes/pure/layout/layout.ejs，在</body>前面一行增加<%- partial('_partial/article-copy-code')%>
1
2
3
4
5
6
| <%- body %>
<%- partial('_common/footer', null, {cache: !config.relative_link}) %>
<%- partial('_common/script', {post: page}) %>
<%- partial('_partial/article-copy-code') %>
</body>
</html>
|
1.4 增加语言文件
在/themes/pure/languages目录下选择对应的语言文件，在文件后面增加
1
2
3
4
| codeblock:
copy_button: 复制
copy_success: 复制成功
copy_failure: 复制失败
|
其他i18n文件也可以加上对应的配置
1.5 增加主题配置文件
打开themes/pure/_config.yml，在文件末尾添加
1
2
3
4
5
6
7
| codeblock:
copy_button:
enable: true
result: true
copyright:
enable: true
content: \n/**\n* 感谢您复制代码，使用代码请注明引用出处\n* kangaroo @ https://www.kangaroohy.com\n*/
|
2 备案
2.1 添加配置
在themes/pure/_config.yml中添加如下配置
1
2
3
| # Site
site:
beian: 蜀ICP备19006099号-2 # 备案
|
2.2 界面新增备案
在themes/pure/layout/_common/footer.ejs文件中，copyright 节点中新增如下配置
1
2
3
4
5
| <div class="copyright">
<% if(theme.site.beian) { %>
<a href="http://beian.miit.gov.cn/" target="_blank"><%= theme.site.beian %></a>
<% } %>
</div>
|
