这个NexT主题是一个比较好看的Hexo主题,它所集成的功能齐全,也十分实用。这个主题的整个框架是十分牛逼,不过在某些样式方面就不太符合个人的口味了,再改动一点点我就非常喜欢了,我也试过其他主题,基本都是要改动主题源代码的,而NexT主题在这块就显得更加人性化,留给了用户更多的操作空间,有几个文件都是可以让我们重新对该主题的样式进行自定义的。
NexT v5.1.2
这些配置都在v5.1.2
基础上修改或增加的,之后的版本或许不会适用。
在themes\next\source\css\_custom\custom.styl
文件中加入以下代码,一开始里面什么都没有的,它是NexT主题作者留给我们用作自定义主题样式的。
1 | // 评论区 |
在themes\next\source\css\_variables\custom.styl
文件中加入以下代码,就跟之前那个文件一样,也是作者留给我们使用的。
1 | $main-desktop = 79% // 页面整个内容区的大小 |
至于文章底部那个标签要在标签名之前多加一个标签小图标,那就得修改主题的框架源代码了:
- 找到
themes\next\layout\_macro\post.swig
找到这一段代码
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 | # 语言,原来是zh-Hans |
从功能点上来说,v6.0.0
以及之后的版本与旧版本最大不同的是,统计插件hexo-wordcount
被hexo-symbols-count-time
所取代。
如果你的Hexo配置文件_config.yml
中没有该统计插件hexo-symbols-count-time
的配置,那就加上,不然,不管你在NexT主题对应的配置文件_config.yml
再怎么配置也不会生效。
NexT主要配置
这些配置到NexT主题自带的配置文件\themes\next\_config.yml
里进行设置。以下这些是我的配置。
1 | # Post wordcount display settings |
主要样式
跟以前一样,在\themes\next\source\css\_custom\custom.styl
文件中加入以下代码。
1 | // Custom styles. |
除了针对新版本进行修改之外,这次还修改了背景效果。
主题显示宽度
在\themes\next\source\css\_variables\custom.styl
增加以下配置信息。
1 | $content-desktop = 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
3body {
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博客,其实自己也有断断续续写一些新东西和把以前的文章修改一下,只是没提交而已,而兴致来了我就顺便把Hexo和NexT的版本一起更新了。更新Hexo的版本当然就没出什么问题了,我以为NexT也没有太大变化,更新应该就能立马套用以前的配置了,然而事实却不是我想的那样,这个主题的变化大得出乎我的意料。当然这个变化大主要是指内置嵌套的评论系统还有自定义文件的加载方式,其余的变化倒还好,页面的框架几乎没变,这样之前的样式基本上都能套用进去,但这并不意味着紧跟这些变化很轻松。
自定义样式文件的变化
位置的变化
在这个版本(或者之前某个版本开始),自定义样式文件的路径不再是以前那样了。秉承着发现异样就看的NexT主题的配置文件_config.yml
,我这次立马就知道答案了:
1 | # Define custom file paths. |
这就是要我们指定自定义样式文件的路径位置嘛,同时,注意注释的这一个描述:custom files in site directory source/_data
,
这里重点就是说:我们的自定义文件要放在Hexo的source
目录里,而不是放在NexT的source
目录里。一开始我也是搞错了,纠结了好一会,看到注释才恍然大悟。
这个变化还不算麻烦吧,也就把之前的自定义样式文件放去另一个地方而已。重点说一下,这个改动对于使用NexT的用户是非常友好的,将自定义样式文件从Hexo和NexT两者中解耦出来。这样无论我们更新Hexo还是更新NexT,我们无须再担心更新会把我们的自定义样式文件给整没了,也不用每次更新都进行备份,要做的工作只是在NexT主题的配置文件配一下路径就OK了。
后来我再上GitHub查了下,果然真的是如此:自定义样式怎么没了 #982。
内容的变化
一切都搞清楚了,要做的事情就很简单了:
在Hexo的source
目录内新建一个文件夹,比如命名为custom_NexT_style
,然后在这里面新建两个文件,一个是存储主要样式配置,另一个则是存储主题显示宽度配置。
关于主要样式,还是有所变化的,以前v6.2.0
的配置并不能完全套用到现在的v7.2.0
上,但还好就是变化不多,只需改动几处便可:
1 | // 把以前评论区的自定义样式给删了,换上下面这个 |
变化就这么多,而后者关于主题显示宽度的自定义样式可以直接复制以前的放到另一个新文件里。
配置路径
比如我在Hexo的source/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主题就能加载上我们的自定义配置了。
自定义背景图的变化
很遗憾,自定义背景图的配置还是没法解耦出来,或许只是我想不到办法而已,我的自定义配置仍然要写到NexT的js
文件里,但还是有一点点变化的。
在v7.2.0
,自定义[]的配置要写到\themes\next\source\js\next-boot.js
里。
评论系统的变化
现在,NexT主题里再也没有集成Gitment这一套评论系统了,而是集成了另一套非常相似且完成度更高的评论系统Gitalk。至于改变的原因我也是找到了:About Gitment #936。
如果说不想用这个评论系统,还是维持以前的,可以看一下这篇文章:添加Gitment评论系统到Hexo主题NexT,教程里所用的NexT确实是比较旧了,但我觉得应该还是有作为当下参考的意义。
而评论系统的配置是一样的,直接把以前的拿过来用就行了;而文章以前的评论要迁移到新的评论系统上,其实修改标签即可,这里就不细说了,可以参考请问可以从 gitment 迁移过来吗? #39。