NexT主题v8.x-自定义美化教程

本文最后更新于：2021年2月4日 早上

前言

NexT是Hexo上最有名的主题之一，大量的文字留白、简洁的配置项、清爽的布局使得它的文字阅读体验非常好，到目前它已经在开源社区的维护下迭代了八个大版本，并且保持每月一次更新的稳定维护频率。各种丰富的自定义美化都可以通过inject注入和不修改主题源码的条件下做到，在网上通过搜索引擎能找到关于NexT主题的很多自定义教程，我当时在寻找教程的时候的发现很多并不是特别新，本文记录自己使用NexT 8.2.x一个多月以来自己使用的一些美化和配置的记录，也希望能帮助后来的NexT新手。（PS：修改的结果并不一定符合所有人的审美，请酌情选择👻）

预览

修改后的样式预览：

首页

文章阅读

标签云和站点概览

样式

NexT提供了四种不同的样式方案：

  • Muse

  • Mist

  • Pisces

  • Gemini

在主题的配置文件找到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-position: center;
  background-size: cover;

  +mobile() {
    background-size: auto auto;
  }
}

//透明化：自定义opacity的值。范围为0~1的小数
//文章内容透明
.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;
}

// 页脚主题，hexo链接样式
.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:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: tomorrow
    dark: night-owl
  prism:
    light: prism-material-light
    dark: prism-duotone-sea
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac

修改后的样式如下：

代码样式

鸣谢