美化你的Hexo站点

hexo总体来说还是非常方便好用的,尤其是提供了大量可自己定制的主题,这也是我选择它的一个很重要的原因。

一开始我用的是 modernist的主题。在hexo上更换主题很方便,只用一句git就可以解决:

1
git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist

下载完成后在hexo目录下_config.yml文件中设置一下就能看到效果了。

1
theme: modernist

modernist主题

作为一名PSD,这样的主题自然是无法满足我的,下面我们就开始对其进行改造 ^_^

更换背景

第一个要换的就是背景,原生的暗色太过压抑,我想换成亮一点的。

站酷搜索“木纹”,找到很多木纹背景,看上去还不错~

木纹背景

这里我选的是notepad那个,下载下来,打开PSD看图层,发现有三个组

删掉上面两个组,看看bg组,发现是由四幅图拼成的

看来这四幅图是一样的,于是随便选取一副,删掉其他的,保存为bg.jpg格式。

接着将这幅图片放到hexo\themes\modernist\source\css\images下

下面就是找css了,想到背景这种东西一般是在body标签里设置,于是打开css\_base文件夹下的layout.styl看看,哈哈,果然在这里

找到

1
2
3
4
5
6
body
padding 50px 0
margin 0
font 14px/1.5 font-title
color color-font
font-weight 300

在下面添加一行

background url("images/bg.jpg") top left

看看是否会出现对齐问题

我晕,看来那四幅图是不一样的。。。

仔细观察发现有两副是经过了旋转的,于是删去两幅不同的,仅保留两幅不同的后保存。

其实只要保证了边界部分衔接正确,中间部分可以截掉以减小体积。

这次比较不错。


更换文字颜色

下面就是一些细节性的问题了。要把这里的小字改成白色,不然看不清楚。

F12看一下,是一个叫small的标签。

打开hexo\themes\modernist\source\css\_partial\sidebar.styl文件,可以看到small标签

1
2
3
4
5
6
7
8
.tag
small
margin-left 15px
color #ccc
&:before
content '('
&:after
content ')'

将第四行改为

1
color #fff

按同样的方法改掉footer.styl中#footer的color

黑色的分割线有点违和,我们来改它的颜色。

还是在sidebar.stly文件里,找到title。

可以看到那行线实质上是标题的下边框,分别用一个border和一个shadow做成了立体效果。

1
2
3
4
5
6
.title
padding 4px 2px
font-size 22px
font-weight normal
border-bottom 1px solid #000
box-shadow rgba(255,255,255,0.25) 0 1px 0

我们将border属性改成shi黄色,并增加shadow的不透明度以提高反差

1
2
border-bottom 1px solid #a95f34
box-shadow rgba(255,255,255,0.5) 0 1px 0

效果还不错


修改header

那行斜体字看着不顺眼,我们把斜体去掉。

打开hexo\themes\modernist\source\css\_partial\header.styl,找到

1
2
3
4
5
6
p
margin 0
color #61778B
width 300px
font-size 13px
font-style italic

删去最后一行即可。

关于header的背景色怎么改想了很久,最后还是决定用木纹PSD上的那个笔记本好了,毕竟是一套比较搭。

将PSD中header组合并后单独保存为header.jpg,并复制到与木纹文件相同的目录。

打开hexo\themes\modernist\source\css\_partial\header.styl,看到

1
2
3
4
5
6
#header
border-radius 8px 8px 0 0
background #C6EAFA linear-gradient(#DDFBFC, #C6EAFA)
position relative
padding 15px 30px
border-bottom 1px solid #B2D2E1

将第三行删去并添加

1
2
background url("images/header.jpg")
background-size 100% 100%

这是效果

下一步不必说,自然是修改header的文字部分了。在header.styl文件末尾添加

1
2
a
color #eee


修改全局字体

在hexo\themes\modernist\source\css\_base\variable.styl文件中,修改Font部分如下:

1
2
3
4
5
6
// Font
font-default = "PT Serif", "Microsoft Yahei"
font-serif = "PT Serif"
font-mono = "PT Serif", "Microsoft Yahei"
font-title = "PT Serif", "Microsoft Yahei"
@import url("http://fonts.googleapis.com/css?family=PT+Serif:400,400");

即可将英文字体设置为PT Serif,中文字体设置为微软雅黑。


修改content背景

还是那个PSD,在pad组里选取第一个page图层,其余的隐藏掉。

用选取工具选取这样一块区域,注意边界只有左边和上边。

反选后删除其余部分,裁切后保存为paper.png,保存至木纹那个目录下

打开hexo\themes\modernist\source\css\_base\layout.styl

1
2
3
4
.content
background linear-gradient(#fafafa, #DEDEDE 700px)
border-radius 0 0 8px 8px
border-top 1px solid #fff

将第二行修改为

background url(images/paper.png)

看效果

发现超链接的蓝色与这个主题不太搭,继续改

在hexo\themes\modernist\source\css\_base\variable.styl中找到

1
2
3
4
5
// Color
color-background = #fff
color-font = #555
color-link = #069
color-strong = #222

将color-link修改为#a00

打开hexo\themes\modernist\source\css\_partial\article.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
header
border-radius 0
background none
position relative
padding 0
border-bottom 0
margin-bottom 10px
.icon
width icon-container-size
height icon-container-size
position absolute
top 0px
left 0px
margin-left -46px
color #FFFFFF
background #b00 //修改此处
border-radius 100em
box-shadow 0 0 4px rgba(0, 0, 0, 0.4) //不喜欢阴影可删掉这行
@media screen and (max-width: 600px)
display none
&:before
position absolute
font icon-size font-icon
top 6px
left 0
width icon-container-size
text-align center

至此,我们的美化工作就差不多了,与原来对比一下,还是好很多了嘛,哈哈