网上搜了一圈，Hexo Next主题用的人挺多，于是就用了这个主题，主题配置很简单，这里有很详细的配置说明。用别人的主题就有一个问题，总觉得有些地方不对自己胃口，于是就开始折腾了。当然这篇文章主要是给新入门的朋友看看的，方便大家快速入门，形成自己风格网站。
【基础】基本修改
首先是一些简单修改,比如网页背景颜色啦、字体啦等等。在主题目录下有个文件themes\next\source\css\_variables\base.styl,更改里面定义的变量值就可以改掉页面颜色什么的了。比如
1 | $black-light = #555 |
2 | //...... |
3 | // Global text color on <body> |
4 | $text-color = $black-light |
这里看名字$text-color就是文字的颜色，颜色值指向另一个变量$black-light，而$black-light得值是HTML颜色代码#555。把#555改掉就可以改变文字颜色了
1 | $black-light = red |
这样文字就是红色的了，但是不推荐这样做。可以另建一个颜色变量来更改，比如
1 | $mycolor = red |
2 | //...... |
3 | // Global text color on <body> |
4 | $text-color = $mycolor |
其它的如字体改法也是类似的。还有就是默认的语法高亮显示似乎有点问题，用highlight_theme: night配置时选择文字的背景颜色和代码框的背景颜色相近，导致看不清那些文字被选择到了，这个可以修改文件next\source\css\_common\components\highlight\highlight.styl,在如下位置添加下面标出的代码
1 | pre { |
2 | @extend $code-block; |
3 | |
4 | code { |
5 | padding: 0; |
6 | color: $highlight-foreground; |
7 | background: none; |
8 | text-shadow: none; |
9 | } |
10 | } |
11 | /* 添加代码开始*/ |
12 | .code pre::selection, .code pre span::selection, .code pre div::selection, .code pre div span::selection { |
13 | background: $highlight-selection; |
14 | } |
15 | .code pre::-moz-selection, .code pre span::-moz-selection, .code pre div::-moz-selection, .code pre div span::-moz-selection { |
16 | background: $highlight-selection; |
17 | } |
18 | /* 添加代码结束*/ |
然后可以发现在next\source\css\_common\components\highlight\theme.styl里规定了主题配置文件_config.yml使用不同highlight_theme:设置时的颜色方案。如果不满意可以自己改里面的颜色。
注:文件用的是stylus语法，有兴趣可参考相关帮助。
【基础】网页背景图像
记得Hexo自带的主题Landscape有一张很炫的Banner，怎么在next主题里实现类似的效果呢？讲这个问题之前，先得说说hexo主题的架构。在next主题目录下几个子目录，这里要关注的是layout、source和languages。layout控制的网页的基本框架和内容形式，source里面是网页需要CSS和JavaScript文件，languages则是显示语言。具体来说
- 如果想要调整网页布局，比如增加一个菜单、去掉侧边栏等等，那就需要更改layout；
- 如果只是想调整显示效果，比如改变文字颜色，改变菜单大小、位置之类，那可以调整CSS设置；
- 一些特殊的效果，如图片动态效果，需要JavaScript来实现；
- 对于一些类容形式的更改，有时还需要更改相应的语言文件。
要想实现比较复杂的效果，往往上述更改需要同时进行。现在要增加背景图片，当然最简单的就是在相应的HTML元素的css属性增加
1 | #header { |
2 | background: url("../images/background-header.jpg"); |
3 | background-size: cover; |
4 | } |
5 | body { |
6 | background: url("../images/background-body.jpg"); |
7 | background-size: cover; |
8 | } |
9 | #footer { |
10 | background: url("../images/background-footer.jpg"); |
11 | background-size: cover; |
12 | } |
具体做法是在source\css\_custom目录下新建一个文件，名字随便比如img-bg.styl，把代码放进这个文件里，然后打开source\css\main.styl。在文件最后面加上
1 | // Custom Layer |
2 | // -------------------------------------------------- |
3 | @import "_custom/custom"; |
4 | //可以看到几乎所有的包含css代码的styl文件都是通过main.styl导入被主题使用的 |
5 | //加上下面这行，把自己的css代码放进main.styl文件才能被主题使用哦 |
6 | @import "_variables/img-bg.styl"; |
这样主题就有了背景图片。结果可能是这个样子
上面的文本背景透明了。那么可以给文章主体部分添加背景颜色
1 | .main-inner { |
2 | margin-top: 0; |
3 | padding: 80px 60px 10px 60px; |
4 | background: white; |
5 | min-height: 500px; |
6 | } |
这里有些参数需要自己调整一下，比如去掉文字与header间的空白、设置与文字与背景边界padding填充的距离，min-height避免主体内容太少时主体与footer的空白过大。最后效果如下
如果不用margin-top、padding、min-height可能得到这个样子
顺便说一下background-size是css 3.0的新特性吧，可以让背景图片根据窗口大小自动调整，老的浏览器不支持这个属性，那你的背景图片如果铺不满整个窗口或者不适合repeat就会很难看。这个也有解决方法，麻烦一点就是，这里就不说了。
注:修改需要懂一些css的基本用法，这方面的资料网上不要太多。。。
DemonsYour eyes, they shine so bright, I want to save their light,
*I can’t escape this now, unless you show me how, *
*When you feel my heat, look into my eyes, *
*It’s where my demons hide, it’s where my demons hide. *