自定义NexT.Gemini主题的样式

  这个NexT主题是一个比较好看的Hexo主题,它所集成的功能齐全,也十分实用。这个主题的整个框架是十分牛逼,不过在某些样式方面就不太符合个人的口味了,再改动一点点我就非常喜欢了,我也试过其他主题,基本都是要改动主题源代码的,而NexT主题在这块就显得更加人性化,留给了用户更多的操作空间,有几个文件都是可以让我们重新对该主题的样式进行自定义的。

NexT v5.1.2

这些配置都在v5.1.2基础上修改或增加的,之后的版本或许不会适用。

themes\next\source\css\_custom\custom.styl文件中加入以下代码,一开始里面什么都没有的,它是NexT主题作者留给我们用作自定义主题样式的。

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
150
151
152
153
154
155
// 评论区
.comments {
margin: 0px;
background: white;
padding: $content-desktop-padding;
box-shadow: $box-shadow-inner;
border-radius: $border-radius-inner;
}

// 文章内的超链接
.post-body a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #FF4500;
}
}

// li用实心圆点修饰
.posts-expand .post-body ul li {
list-style: disc;
}

// fancybox图片
.posts-expand .post-body .fancybox img {
display: block !important;
margin-left: 0px;
cursor: pointer;
cursor: zoom-in;
cursor: -webkit-zoom-in;
}

// 图片底下的描述性文字
.post-body .image-caption, .post-body .figure .caption {
text-align: left;
}

// label块
.post-body .label {
font-weight: bold;
}

// 侧边栏头部
.site-meta {
background: #0072E3;
}

// 分页导航(上/下一篇文章的超链接)
.post-nav-item a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #FF4500;
}
}

// 显示多篇文章时候的标题
.posts-expand article:only-of-type h1 {
font-size: 33px;
}

// 分割线
hr {
margin: 0px 0px 30px 0px;
height: 3px;
border: none;
background-color: $black-deep;
background-image: none;
}

// 二级标题(加上底部的分割线
.posts-expand h2 {
font-size: 30px;
padding-bottom: 0.3em;
line-height: 33px;
border-bottom: 1px solid #eaecef;
}

// 文章底部的标签
.posts-expand .post-tags a {
background: #e6e6e6;
color: #2ca6cb;
border-bottom: none;
&:hover {
color: white;
background: #2ca6cb;
}
}



/* 目录的超链接 */

// 普通状态下的超链接状态
.post-toc ol a {
border-bottom-color: white;
&:hover {
border-bottom-color: #666;
}
}

// active状态下的超链接样式
.post-toc .nav li[class$="active"]>.nav-link {
border-bottom-color: white;
&:hover {
border-bottom-color: #fc6423;
}
}

// 当前正在访问的超链接样式
.post-toc .nav li[class$="active-current"]>.nav-link {
color: white;
background: #337ab7;
border-radius: 3px;
display: block;
padding: 5px 7px;
border-bottom-color: white;
&:hover {
background: orange;
color: black;
}
}



/* 各级目录的显示宽度
* 主要是为了不让边框超出侧边栏
*/
.post-toc .nav .active-current.nav-level-2 a {
width: 290.6px;
}

.post-toc .nav .active-current.nav-level-3 a {
width: 286.6px;
}

.post-toc .nav .active-current.nav-level-4 a {
width: 276.6px;
}

.post-toc .nav .active-current.nav-level-5 a {
width: 266.6px;
}

.post-toc .nav .active-current.nav-level-6 a {
width: 256.6px;
}

/* 侧边栏宽度 */
.sidebar-inner {
width: 340px;
}
.container .header-inner {
width: 340px;
}


themes\next\source\css\_variables\custom.styl文件中加入以下代码,就跟之前那个文件一样,也是作者留给我们使用的。

1
2
3
4
$main-desktop                     = 79%  // 页面整个内容区的大小
$font-size-headings-base = 30px // 标题起始字体大小
$font-size-headings-step = 3px // 每级标题字体大小步长
$content-desktop = calc(100% - 352px)

至于文章底部那个标签要在标签名之前多加一个标签小图标,那就得修改主题的框架源代码了:

  1. 找到themes\next\layout\_macro\post.swig
  2. 找到这一段代码

    1
    <a href="{{ url_for(tag.path) }}" rel="tag">#{{ tag.name }}</a>

    #改成以下这段代码就行:

    1
    <i class="fa fa-tag"></i>

    最后就是这样:

    1
    <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>

NexT v6.2.0

最近看到NexT大更新了,更应该说是项目迁移了,版本号跳到v6.0.0。我也随之跟进更新了v6.2.0版本的主题,在配置上来说确实有些变化了,而随着主题继续更新,更大的变化是肯定的。
v5.1.2以上的版本开始,作者也给NexT加入了Gitment,一切都更好了,不用我们麻烦动手把Gitment加到里面,在以前我还特意写了一篇文章记录了一下添加Gitment的过程。

Hexo配置更新

NexT主题更新到v6.0.0以及以上的版本后,第一件事就是必须更新Hexo的配置文件_config.yml
1
2
3
4
5
6
7
8
9
10
# 语言,原来是zh-Hans
language: zh-CN

# 统计插件
# hexo-symbols-count-time
symbols_count_time:
symbols: true
time: true
total_symbols: false
total_time: false

从功能点上来说,v6.0.0以及之后的版本与旧版本最大不同的是,统计插件hexo-wordcounthexo-symbols-count-time所取代。
如果你的Hexo配置文件_config.yml中没有该统计插件hexo-symbols-count-time的配置,那就加上,不然,不管你在NexT主题对应的配置文件_config.yml再怎么配置也不会生效。

NexT主要配置

这些配置到NexT主题自带的配置文件\themes\next\_config.yml里进行设置。以下这些是我的配置。

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
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: true
awl: 4
wpm: 275

# Manual define the sidebar width
# !!Only available for Gemini Scheme currently
# Leave it empty for the default 240
sidebar_width: 350

# Global font settings used on <body> element.
global:
external: true
family: Lato
size:

# Font settings for Headlines (h1, h2, h3, h4, h5, h6).
# Fallback to `global` font settings.
headings:
external: true
family: Georgia
size:

# Font settings for posts.
# Fallback to `global` font settings.
posts:
external: true
family: Monda
size:

# Font settings for Logo.
# Fallback to `global` font settings.
logo:
external: true
family:
size:

# Manual define the sidebar width
# !!Only available for Gemini Scheme currently
# Leave it empty for the default 240
sidebar_width: 350

主要样式

跟以前一样,在\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
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
// Custom styles.

/* 背景设置 */
/* 给页面内的所有元素设置一个带透明度的白色背景色 */
// 页面的几大部分
[class="container sidebar-position-left "], .main, [class$="page-home"] #footer,
[class$="page-post-detail"] #footer, .page-archive {
background: rgba(255, 255, 255, 0.83);
}
[class="container sidebar-position-left "] .main,
[class$="sidebar-position-left"] #footer, .page-archive .main {
background: transparent;
}
.pagination, .post-block, .comments,
.container .header-inner, .sidebar-inner {
background: rgba(255, 255, 255, 0.45);
}

// 评论区
.gitment-editor-body textarea {
background-color: #ffffff9e!important;
}
.gitment-editor-preview-field {
background-color: #ffffff40!important;
}
.gitment-comment-header {
background-color: transparent!important;
}
#gitment-container a {
border-bottom: none;
}

// 显示目录的侧边栏
#sidebar {
background: rgba(255, 255, 255, 0);
}

// 菜单
.menu .menu-item a:hover {
background: #2222223b;
border-bottom-color: transparent;
}
.menu-item-active a {
background: #fbcb3fbd;
border-bottom-color: transparent;
}

// NexT主题特有的选项卡元素
.tabs ul.nav-tabs li.tab.active,
.tabs .tab-content {
background-color: rgba(255, 255, 255, 0.62) !important;
}



/* 页面中某些部分的大小 */
// 归档页面的页脚
.page-archive #footer {
position: inherit;
height: 1px;
padding-bottom: 1.9%;
}

// 详细分类页面的页脚
[class$="sidebar-position-left "] #footer {
position: initial;
height: auto;
padding-bottom: 3%
}



/* 侧边栏目录 */
// 普通状态下的超链接状态
.post-toc ol a {
border-bottom-color: transparent;
&:hover {
border-bottom-color: #666;
}
}

// active状态下的超链接样式
.post-toc .nav li[class$="active"]>.nav-link {
border-bottom-color: transparent;
&:hover {
border-bottom-color: #fc6423;
}
}

// 当前正在访问的超链接样式
.post-toc .nav li[class$="active-current"]>.nav-link {
color: white;
background: #337ab7;
border-radius: 3.6px;
display: block;
padding: 5px 7px;
border-bottom-color: transparent;
&:hover {
background: orange;
color: black;
}
}

//
.site-state-item {
border-left: 1px solid #b1b1b1;
}


// 各级目录的显示宽度 - 主要是为了不让边框超出侧边栏
.post-toc .nav .active-current.nav-level-2 a {
width: 303px;
}

.post-toc .nav .active-current.nav-level-3 a {
width: 296px;
}

.post-toc .nav .active-current.nav-level-4 a {
width: 286px;
}

.post-toc .nav .active-current.nav-level-5 a {
width: 276px;
}

.post-toc .nav .active-current.nav-level-6 a {
width: 266px;
}

.post-toc {
width: calc(100% + 17px);
}



/* 标题 */
// 点进文章,文章的主标题
.posts-expand article:only-of-type h1 {
font-size: 37px;
}

// 二级标题(正常显示器分辨率)
// 其实要在左下角和右下角加上一个折角、翻折的效果(一个三角形)
.post-body h2 {
border: 1px solid #ddd;
border-radius: 2px;
font-weight: bold;
height: 48px;
line-height: 40px;
margin: 20px -42.3px 15px -48px;
padding-left: 1.7%;
position: relative;
background-color: #ecf6f7;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
}

// 二级标题(移动终端分辨率)
@media (min-width: 768px) and (max-width: 991px) {
.main .post-body h2 {
margin: 20px -23px 15px -28px;
}
}
@media (max-width: 767px) {
.main .post-body h2 {
margin: 20px -15px 15px -18px;
}
}

// 三级标题
.post-body h3 {
border-bottom: 1px solid #cfd8dc!important;
padding-bottom: 0.3em;
}



/* 文章页面内的各种元素 */
// note块元素
.post-body .note {
border-color: #ddd;
background-color: #f9f9f980;
}

// 文章内的普通超链接
.post-body a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #FF4500;
}
}

//代码块内的超链接
.post-body a code {
color: #0593d3;
border-bottom: none;
&:hover {
color: #FF4500;
}
}

// 分页导航(上/下一篇文章的超链接)
.post-nav-item a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #FF4500;
}
}

// 阅读全文的按钮
.post-button a {
&:hover {
font-weight: bold;
font-size: larger;
background-color: cornsilk;
}
}

// 阅读全文按钮的超链接
.post-button .btn {
border-bottom: 2px solid #555;
}

// 无序列表
.posts-expand .post-body ul li {
list-style: disc;
}

// 有序列表
.posts-expand .post-body ol {
counter-reset: counter;
}
.posts-expand .post-body ol>li {
list-style-type: none;
position: relative;
}
.posts-expand .post-body ol>li:before {
counter-increment: counter;
content: counter(counter);
background: #49b1f5;
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 1;
text-align: center;
padding: 3px;
height: 13px;
width: 13px;
border-radius: 50%;
position: absolute;
left: -27px;
top: 5px;
}

// fancybox图片
.posts-expand .post-body .fancybox img {
display: block !important;
margin-left: 0px;
cursor: pointer;
cursor: zoom-in;
cursor: -webkit-zoom-in;
}

// 图片底下的描述性文字
.post-body .image-caption, .post-body .figure .caption {
text-align: left;
}

// label块
.post-body .label {
font-weight: bold;
border-radius: .25em;
margin: 0px 3px 0px 3px;
padding: 3px 4px;
}
.post-body .label.primary {
background-color: #ecd6ff;
}
.post-body .label.info {
background-color: #c3e8f9;
}
.post-body .label.success {
background-color: #b2eabb;
}
.post-body .label.default {
background-color: #dcdcdc;
}
.post-body .label.warning {
background-color: #ffe89a;
}
.post-body .label.danger {
background-color: #f9c1ca;
}


// 代码区
.highlight .code pre {
background-color: transparent;
}
.highlight {
background-color: #f9f9f980;
border: 1px solid #ddd;
border-radius: 2px;
}

// 原样输出的代码块
pre {
background: #f9f9f980;
border: 1px solid #ddd;
border-radius: 2px;
}
pre code {
border: transparent;
}

// 块引用
blockquote {
background-color: #f9f9f980;
border-left-color: #6b8afb;
}

// 表格奇数行
.highlight table>tbody>tr {
&:nth-of-type(odd) {
background-color: transparent;
}
}

// 表格每一行鼠标经过时的颜色
table>tbody>tr {
&:hover {
background-color: #FFFFF0;
}
}

// 表格的单元格
table td, table th {
border-right: 1px solid #dcdcdc;
}

// 侧边栏头部
.site-meta {
background: #0072E3;
}

// 文章底部的标签
.posts-expand .post-tags a {
background: #e6e6e6;
padding: 3px 4px;
border-radius: 3px;
color: #2ca6cb;
border-bottom: none;
&:hover {
color: white;
background: #2ca6cb;
}
}

// 分割线
hr {
margin: 0px 0px 0px 0px;
height: 1px;
border: none;
background-image: none;
}

// code代码块
code {
background: #dcdcdc;
margin: 0 2px 0 2px;
}

// 选项卡被选中的那一项
.tabs ul.nav-tabs li.tab.active a {
font-size: 19px;
}

// 浏览器滚动条
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {
background: #49b1f5;
}
::-webkit-scrollbar-track {
background-color: transparent;
}

除了针对新版本进行修改之外,这次还修改了背景效果。

主题显示宽度

\themes\next\source\css\_variables\custom.styl增加以下配置信息。

1
2
3
$content-desktop         = 97.7%
$content-desktop-large = 97.7%
$content-desktop-largest = 97.7%

Gitment样式

5.1.4这个版本自带就有Gitment了,所以这里我也把它的样式自定义一下,在\themes\next\source\css\_common\components\third-party\gitment.styl里增加以下配置就行了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.gitment-editor-body textarea {
background-color: #ffffff9e!important;
}

.gitment-editor-preview-field {
background-color: #ffffff40!important;
}

.gitment-comment-header {
background-color: transparent!important;
}

#gitment-container a {
border-bottom: none;
}

背景图

这次增加了我主题增加了背景图片,要想加载背景图片,有两种情况:

  • 只指定1个图片用作背景图
    这个就非常简单了:首先将图片放到\themes\next\source\images里,或者上传到某个图床网站上,然后同样也是在\themes\next\source\css\_custom\custom.styl增加以下配置。

    1
    2
    3
    body {
    background: url("图片地址") 0% 0% / cover fixed;
    }

    如果图片直接放在\themes\next\source\images里, 这样图片地址就是\imges\图片名;如果图片是上传到图床网站上,那就直接把那个图片地址复制过来就能直接用了。

  • 随机从多个图片中的1个用作背景图
    这个就不能是简单地写css就能解决问题的,因为有随机选取这个动作,这要用js完成。
    跟前者一样,首先还是选择一种方式存储多个背景图片,然后在\themes\next\source\js\src\bootstrap.js里写上随机选取1个背景图片并加载的代码。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    $(document).ready(function () {
    // 在最开头或者任意一处加入我们的功能:随机选取1个背景图并加载的代码
    var backgroundImgUrls = [
    "图片地址1",
    "图片地址2",
    "图片地址3",
    "图片地址4",
    "图片地址5",
    "图片地址6",
    // ...
    "图片地址n"
    ];
    var randomIndex = Math.floor(Math.random() * (backgroundImgUrls.length + 1));
    if (randomIndex == backgroundImgUrls.length) {
    $("body").css({"background-color":"white"});
    } else {
    var background_image = "url(" + backgroundImgUrls[randomIndex] + ")";
    $("body").css({"background":background_image, "background-attachment":"fixed", "background-size":"cover"});
    }
    //...NexT原有的代码
    }

    添加了这些代码后,这样每次刷新页面都会随机加载1个背景图片。

NexT v7.2.0

最近又想起了自己以前搞的Hexo博客,其实自己也有断断续续写一些新东西和把以前的文章修改一下,只是没提交而已,而兴致来了我就顺便把HexoNexT的版本一起更新了。更新Hexo的版本当然就没出什么问题了,我以为NexT也没有太大变化,更新应该就能立马套用以前的配置了,然而事实却不是我想的那样,这个主题的变化大得出乎我的意料。当然这个变化大主要是指内置嵌套的评论系统还有自定义文件的加载方式,其余的变化倒还好,页面的框架几乎没变,这样之前的样式基本上都能套用进去,但这并不意味着紧跟这些变化很轻松。

自定义样式文件的变化

位置的变化

在这个版本(或者之前某个版本开始),自定义样式文件的路径不再是以前那样了。秉承着发现异样就看的NexT主题的配置文件_config.yml,我这次立马就知道答案了:

1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/style.styl

这就是要我们指定自定义样式文件的路径位置嘛,同时,注意注释的这一个描述:custom files in site directory source/_data
这里重点就是说:我们的自定义文件要放在Hexosource目录里,而不是放在NexTsource目录里。一开始我也是搞错了,纠结了好一会,看到注释才恍然大悟。

这个变化还不算麻烦吧,也就把之前的自定义样式文件放去另一个地方而已。重点说一下,这个改动对于使用NexT的用户是非常友好的,将自定义样式文件从HexoNexT两者中解耦出来。这样无论我们更新Hexo还是更新NexT,我们无须再担心更新会把我们的自定义样式文件给整没了,也不用每次更新都进行备份,要做的工作只是在NexT主题的配置文件配一下路径就OK了。

后来我再上GitHub查了下,果然真的是如此:自定义样式怎么没了 #982

内容的变化

一切都搞清楚了,要做的事情就很简单了:
Hexosource目录内新建一个文件夹,比如命名为custom_NexT_style,然后在这里面新建两个文件,一个是存储主要样式配置,另一个则是存储主题显示宽度配置。

关于主要样式,还是有所变化的,以前v6.2.0的配置并不能完全套用到现在的v7.2.0上,但还好就是变化不多,只需改动几处便可:

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
// 把以前评论区的自定义样式给删了,换上下面这个
// 评论区
.gt-comment-content {
background-color: rgba(255, 255, 255, 0.42) !important;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);

&:hover {
box-shadow: 0 2px 2px 0 #6190e8b8, 0 3px 1px -2px #6190e8b8, 0 1px 5px 0 #6190e8b8 !important;
}
}

// 各种页面的页脚自定义样式也要换成下面这种
/* 页面中某些部分的大小 */
// 归档页面的页脚
.page-archive #footer {
position: inherit;
height: auto;
padding-top: 2.7%;
}

// 详细分类页面和总分类页面的页脚
[class$="sidebar-position-left "] #footer,
[class$="page-post-detail"] #footer {
padding-top: 3.98%
}

// 详细分类页面的主要部分
[class$="sidebar-position-left "] {
padding-bottom: calc(100vh - 89.5vh);
}

变化就这么多,而后者关于主题显示宽度的自定义样式可以直接复制以前的放到另一个新文件里。

配置路径

比如我在Hexosource/custom_NexT_style里创建一个名为style.styl的文件存储自定义主要样式,以及另一个名为variables.styl的文件存储主题显示宽度

那么在NexT主题的配置文件_config.yml里直接配上这两行即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
variable: source/custom_NexT_style/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/style.styl
style: source/custom_NexT_style/style.styl

这样,NexT主题就能加载上我们的自定义配置了。

自定义背景图的变化

很遗憾,自定义背景图的配置还是没法解耦出来,或许只是我想不到办法而已,我的自定义配置仍然要写到NexTjs文件里,但还是有一点点变化的。

v7.2.0,自定义[]的配置要写到\themes\next\source\js\next-boot.js里。

评论系统的变化

现在,NexT主题里再也没有集成Gitment这一套评论系统了,而是集成了另一套非常相似且完成度更高的评论系统Gitalk。至于改变的原因我也是找到了:About Gitment #936
如果说不想用这个评论系统,还是维持以前的,可以看一下这篇文章:添加Gitment评论系统到Hexo主题NexT,教程里所用的NexT确实是比较旧了,但我觉得应该还是有作为当下参考的意义。

而评论系统的配置是一样的,直接把以前的拿过来用就行了;而文章以前的评论要迁移到新的评论系统上,其实修改标签即可,这里就不细说了,可以参考请问可以从 gitment 迁移过来吗? #39