前言
NexT是Hexo上最有名的主题之一，大量的文字留白、简洁的配置项、清爽的布局使得它的文字阅读体验非常好，到目前它已经在开源社区的维护下迭代了八个大版本，并且保持每月一次更新的稳定维护频率。各种丰富的自定义美化都可以通过inject注入和不修改主题源码的条件下做到，在网上通过搜索引擎能找到关于NexT主题的很多自定义教程，我当时在寻找教程的时候的发现很多并不是特别新，本文记录自己使用NexT 8.2.x一个多月以来自己使用的一些美化和配置的记录，也希望能帮助后来的NexT新手。（PS：修改的结果并不一定符合所有人的审美，请酌情选择👻）
More，我要换回Butterfly主题了😂
预览
修改后的样式预览：
样式
NexT提供了四种不同的样式方案：
在主题的配置文件找到Schemes字段，然后选择你想启用的样式方案取消注释，并且将其他三种方案注释掉即可，本文所有的自定义全部基于Gemini方案，修改如下：
侧边栏
修改侧边栏的显示方式：
自定义样式
找到NexT主题配置文件的custom_file_path:字段，取消如图所示的两个自定义文件的注释：
在本地Hexo源文件目录的/source/_data目录新建这两个文件（如果没有_data目录就自己新建一个）
自定义风格
编辑styles.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
.index .post-body{
text-align: center !important;
}
.medium-zoom-image {
box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.4);
}
code {
background: #64dfdf;
color:#383a42;
}
.headband {
display: none;
}
.footer-inner {
color: #07031a;
}
::selection {
background: rgba(0, 149, 255, 0.2);
color: #555;
}
::-moz-selection {
background: rgba(0, 149, 255, 0.2);
color: #555;
}
.table-container {
scrollbar-width: thin;
}
.table-container::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}
.table-container::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #00af91;
}
.table-container::-webkit-scrollbar-track {
background: none;
}
body {
background-image: url('https://此处修改为你的背景图片直链');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
+mobile() {
background-size: auto auto;
}
}
.main-inner {
opacity: 0.95;
}
.sidebar {
opacity: 0.95;
}
@media (prefers-color-scheme: dark) {
body {
.header-inner {
margin-top: 18px;
background: rgba(51,51,51,0.95);
}
}
}
.header-inner {
margin-top: 18px;
background: rgba(255,255,255,0.95);
}
.popup {
opacity: 0.95;
}
.site-brand-container {
background-image: linear-gradient(356deg, #df2650, #e56948, #e8983b, #e7c223);
}
.main {
margin: 8px auto 0;
}
.header {
+mobile() {
padding: 8px;
}
}
.header-inner {
border-radius: 50px 50px 18px 18px;
}
.site-brand-container {
border-radius: 18px 18px 0 0;
+mobile() {
border-radius: 18px;
}
}
.sidebar-inner {
border-radius: 18px;
}
.back-to-top {
border-radius: 0 0 18px 18px;
}
.post-block {
border-radius: 18px !important;
margin-top: 18px;
}
.pagination {
border-radius: 18px !important;
}
.comments {
border-radius: 18px !important;
}
.post-body {
font-size: 1em;
}
.theme-link {
color:#333333;
border-bottom: 1px solid #333333;
&:hover {
color: #333333;
border-bottom: 1px solid #333333;
}
}
|
自定义页脚
编辑footer.njk的内容如下，可根据注释内容自定义：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <a href="https://icp.gov.moe/?keyword=20180708" rel="external nofollow noreferrer" target="_blank" data-pjax-state="" style="
border-bottom-width: 0px;
">萌 ICP 备 20180708 号</a>
<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("12/31/2019 23:54:40");
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "小站在混沌中存活了 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>
|
页脚我加了一个萌ICP备号，不需要的可以自行删除，仅保留建站时间即可🎈
代码样式
在主题配置文件里修改codeblock字段如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| codeblock:
theme:
light: tomorrow
dark: night-owl
prism:
light: prism-material-light
dark: prism-duotone-sea
copy_button:
enable: true
style: mac
|
修改后的样式如下：
鸣谢
