icarus主题优化
icarus主题复制功能重构（仿照next主题）、firebase统计阅读人数
复制功能重构
icarus主题自带的复制功能是带文字选中的（如下图），个人感觉麻烦了点，于是考虑借鉴next的复制风格，一键复制
实现：
hexo-theme-icarus/source/js/main.js：
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
76
77
78
79
80
81
82
83
84
85
86if (clipboard) {
- new ClipboardJS('.highlight .copy', {
- target: function(trigger) {
- return trigger.parentNode.nextElementSibling;
- }
- }).on('success', function(e) {
- e.clearSelection();
- const tmp = e.trigger.innerHTML;
- e.trigger.innerHTML = '<i class="fas fa-check"></i>';
- setTimeout(function() {
- e.trigger.innerHTML = tmp;
- }, 2000);
- });
+ $('figure.highlight').each(function() {
+ const target = $(this).find('figcaption div.level-right')[0];
+ if (target) {
+ registerCopyButton(target, this);
+ }
+ });
}
----------------------------------------------------------------------------------
...
$('.article > .content > table').each(function() {
if ($(this).width() > $(this).parent().width()) {
$(this).wrap('<div class="table-overflow"></div>');
}
});
+ // 注册复制按钮功能，仿照Next主题实现
+ function registerCopyButton(target, element) {
+ // 添加复制按钮
+ target.insertAdjacentHTML('beforeend', '<a href="javascript:;" class="copy" title="Copy"><i class="fas fa-copy"></i></a>');
+ const button = target.querySelector('.copy');
+
+ button.addEventListener('click', function() {
+ const code = element.querySelector('.code').innerText;
+
+ if (navigator.clipboard) {
+ // 使用现代的Clipboard API
+ navigator.clipboard.writeText(code).then(function() {
+ button.querySelector('i').className = 'fas fa-check-circle';
+ }, function() {
+ button.querySelector('i').className = 'fas fa-times-circle';
+ });
+ } else {
+ // 兼容性回退方案
+ const ta = document.createElement('textarea');
+ ta.style.top = window.scrollY + 'px';
+ ta.style.position = 'absolute';
+ ta.style.opacity = '0';
+ ta.readOnly = true;
+ ta.value = code;
+ document.body.append(ta);
+ ta.select();
+ ta.setSelectionRange(0, code.length);
+ ta.readOnly = false;
+ const result = document.execCommand('copy');
+ button.querySelector('i').className = result ? 'fas fa-check-circle' : 'fas fa-times-circle';
+ ta.blur();
+ button.blur();
+ document.body.removeChild(ta);
+ }
+ });
+
+ // 鼠标离开300ms后恢复复制图标
+ element.addEventListener('mouseleave', function() {
+ setTimeout(function() {
+ const icon = button.querySelector('i');
+ if (icon) {
+ icon.className = 'fas fa-copy';
+ }
+ }, 300);
+ });
+ }
function adjustNavbar() {
const navbarWidth = $('.navbar-main .navbar-start').outerWidth() + $('.navbar-main .navbar-end').outerWidth();
if ($(document).outerWidth() < navbarWidth) {
$('.navbar-main .navbar-menu').addClass('justify-content-start');
} else {
$('.navbar-main .navbar-menu').removeClass('justify-content-start');
}
}hexo-theme-icarus/layout/common/scripts.jsx
1
2
3
4
5
6
7
8
9
10return <Fragment>
<script src={cdn('jquery', '3.3.1', 'dist/jquery.min.js')}></script>
<script src={cdn('moment', '2.22.2', 'min/moment-with-locales.min.js')}></script>
<script dangerouslySetInnerHTML={{ __html: `moment.locale("${language}");` }}></script>
<script dangerouslySetInnerHTML={{ __html: embeddedConfig }}></script>
<script data-pjax src={url_for('/js/column.js')}></script>
<Plugins site={site} config={config} page={page} helper={helper} head={false} />
- {clipboard && <script src={cdn('clipboard', '2.0.4', 'dist/clipboard.min.js')} defer></script>}
<script data-pjax src={url_for('/js/main.js')} defer></script>
</Fragment>;
使用firebase统计阅读人数
config文件添加配置
_config.icarus.yml
1 | |
文章head增加人数统计
hexo-theme-icarus/layout/common/articles.jsx
1 | |
基于firebase的统计功能实现
source/js/firebase_counter.js（新建）
1 | |
其他一些优化
hexo-theme-icarus/layout/common/scripts.jsx
1 | |