一、代码块美化

打开 ./themes/next/source/css/_custom/custom.styl 文件,在末尾添加以下内容

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
// 小代码块样式
code {
color: #CE8349; //小代码块的字体颜色
background: #21252b; //背景颜色
opacity: 0.8; //透明度
margin: 2px; //边距
}
//大代码块的自定义样式
.highlight, pre {
margin: 30px 0 0 0;
padding: 0px 0px 0px 0px; //上 右 下 左
border-radius: 0px;
}
.highlight, code, pre {
border: -5px solid #d6d6d6;
}

// 代码框样式
.highlight-wrap[data-rel] {
position: relative;
overflow: hidden;
border-radius: 5px;
box-shadow: 0 0px 30px 0px rgba(0, 0, 0, 0.3);
margin: 0px 0;
//代码块滚动条
::-webkit-scrollbar {
height: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 1);
}
&::before {
color: white;
content: attr(data-rel);
height: 30px;
line-height: 30px;
background: #21252b;
color: #fff;
font-size: 16px;
position: absolute;
// position: relative;
top: 0;
left: 0;
width: 100%;
font-family: 'Source Sans Pro', sans-serif;
font-weight: bold;
padding: 0px 80px;
text-indent: 15px; //文本类型(如PLAIN)左端距离
float: left;
}
&::after {
content: ' ';
position: absolute;
// position: relative;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fc625d;
width: 12px;
height: 12px;
top: 0;
left: 20px;
margin-top: 10px;
-webkit-box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
z-index: 3;
}
}

./themes/next/scripts/ 下创建文件 codeblock.js 将以下内容粘贴进去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var attributes = [
'autocomplete="off"',
'autocorrect="off"',
'autocapitalize="off"',
'spellcheck="false"',
'contenteditable="true"'
]
var attributesStr = attributes.join(' ')

hexo.extend.filter.register('after_post_render', function (data) {
while (/<figure class="highlight ([a-zA-Z]+)">.*?<\/figure>/.test(data.content)) {
data.content = data.content.replace(/<figure class="highlight ([a-zA-Z]+)">.*?<\/figure>/, function () {
var language = RegExp.$1 || 'plain'
var lastMatch = RegExp.lastMatch
lastMatch = lastMatch.replace(/<figure class="highlight /, '<figure class="iseeu highlight /')
return '<div class="highlight-wrap"' + attributesStr + 'data-rel="' + language.toUpperCase() + '">' + lastMatch + '</div>'
})
}
return data
})

主题配置文件内查找 highlight_theme 修改其值为以下内容:

1
highlight_theme: night eighties

重新生成即可

效果和本文相同

二、底部隐藏powered by,添加访问统计,字数统计等

1. 隐藏powered by

打开主题配置文件,查找 footer 字段,修改其中 poweredtheme.enablefalse

2. 添加访问统计

打开 ./themes/next/layout/_partials/footer.swig 文件,在第一行添加

1
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

查找 theme.post_wordcount.totalcount ,在前面添加

1
2
3
4
5
6
7
8
9
10
<br/>
<span id="busuanzi_container_site_uv">
<i class="fa fa-user"></i>
本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
<span class="busuanzi_container_site_pv">|</span>
<span id="busuanzi_container_site_pv">
<i class="fa fa-eye"></i>
累计访问次数:<span id="busuanzi_value_site_pv"></span>
</span>

重新生成即可

3. 添加全站字数统计

在博客根目录下执行命令

1
$ npm install hexo-wordcount --save

仍然在 footer.swig 文件内,在刚才的 <br/> 标签上面添加

1
2
3
4
5
6
7
<span class="theme-info">|</span>

<div class="theme-info">
<div class="powered-by"></div>
<i class="fa fa-bar-chart"></i>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

注:这里发现底部字体看不清楚,可以改为白色

打开 ./themes/next/source/css/_common/components/footer/footer.styl 文件修改其中的 .footer

1
2
3
4
5
6
7
.footer {
font-size: 14px;
// color: $grey-dark;
color: #FFFFFF;
opacity: 0.9
img { border: none; }
}

4. 修改作者前面的图标为心形

主题配置文件中查找 footer 字段,修改 iconheart 即可。

三、添加标签失去焦点后标题改变

主题配置文件中添加

1
2
3
4
5
# a trick on website title
title_trick:
enable: true
leave: "(つェ⊂)我藏好了哦~"
enter: "(*´∇`*) 被你发现啦~"

其中leave表示失去焦点后得到标题,enter表示重新获取焦点时的标题,可以自己修改。

./themes/next/layout/_custom/ 文件夹下,新建文件 custom.swig ,将以下内容填入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{# 搞怪网页标题 #} 
{% if theme.title_trick.enable %}
<script>
var OriginTitile = document.title;
var titleTime;
document.addEventListener("visibilitychange", function() {
if (document.hidden) {
document.title = "{{ theme.title_trick.leave }}" + OriginTitile;
clearTimeout(titleTime);
} else {
document.title = "{{ theme.title_trick.enter }}" + OriginTitile;
titleTime = setTimeout(function() {
document.title = OriginTitile;
}, 2000);
}
});
</script>
{% endif %}

./themes/next/layout/_layout.swig 中末尾的一堆 include 后面添加

1
{% include '_custom/custom.swig' %}

四、添加打字特效

注:当前打字特效似乎没什么用,这个会在后续的添加评论的文章中再次提到,主要用于评论区,现在可以在任意一个代码块上测试(发布的文章内的代码块是可以编辑的,刷新后会恢复)

点击 打字特效Ctrl+S 保存到本地 ./themes/next/source/js/scr/ 文件夹下

主题配置文件中添加

1
2
3
4
# typing effect
typing_effect:
colorful: true # 礼花特效
shake: false # 震动特效

其中两种效果可以自由选择是否开启

在前面创建的 ./themes/next/layout/_custom/custom.styl 文件末尾添加

1
2
3
4
5
6
7
8
9
{# 打字特效 #}
{% if theme.typing_effect %}
<script src="/js/src/activate-power-mode.min.js"></script>
<script>
POWERMODE.colorful = {{ theme.typing_effect.colorful }};
POWERMODE.shake = {{ theme.typing_effect.shake }};
document.body.addEventListener('input', POWERMODE);
</script>
{% endif %}

参考内容:

Hexo 博客美化代码块

hexo的next主题个性化配置教程