深度美化Hexo(NexT主题)

在一个慵懒的下午,点开了自己的博客,发现有点丑,于是衍生了美化的想法。
注:本文章注重的是过程

对比

原来的:

现在的:

设置博客背景

编辑\themes\next\source\css\_custom\custom.styl(建议使用Notepad++编辑)

向里面添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen and (min-width:1200px) {

body {
background-image:url(/images/background.jpg); //这一行的括号里填背景图片的路径,将图片重命名为background.jpg放在\themes\next\source\images下,也可填图片的链接。
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;

}

#footer a {
color:#eee;
}
}

保存,本地测试一下再上传至GitHub或者空间。

让内容区域半透明

同样编辑\themes\next\source\css\_custom\custom.styl

向里面添加如下代码:

风格一

1
2
3
4
.main-inner {
background: #fff;
opacity: 0.9;
}

风格二(感谢网友@MeteorV提供的代码)

1
2
3
.post-block {
background: rgba(255, 255, 255, 0.9);
}

让菜单栏变得半透明

小试牛刀

按照网上的教程执行完上一步后发现:菜单栏不透明啊,这样还是很丑,找了半天网上也没有一个说法,于是打算自己研究研究。

在Chrome中打开我的博客,看看关于菜单栏的代码。

于是我发现可以在.header-inner下添加一个opacity属性设置header-inner元素的不透明级别。

header-inner又可以在\themes\next\source\css\_custom\custom.styl中编辑,太棒了。代码如下:

1
2
3
4
.header-inner {
background: #fff;
opacity: 0.9;
}

我把opacity属性设置成0.9.发现还真透明了

当我点开搜索时,然后我就发现我高兴得太早了。

效果是这样的。

当时我心里就骂了一句F**k.

优化

于是我又开始读代码了。

我又发现可以不用opacity,直接设置header-inner中的background #ffffffe8 也可以达到透明的目的,并且搜索栏不会变成透明的。

不过我又发现了小问题,当我鼠标移动到菜单栏的某个选项时,竟然时纯白的。

虽然我不是处女座,但是这点瑕疵我也不想让他存在。

又读了半小时的代码和文档,最终功夫不负有心人,让我给逮着了。

这两个参数调一调,完美了。

总结

这一天是真的挺累的,不过呢比打游戏带劲啊,完了之后呢我还改了一下博客标题和副标题的字体,把底部的网站信息变成黑色字体,不然看不清,除此之外还有一些小优化,就不列举了。最终代码如下:

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

//背景
@media screen and (min-width:1200px) {

body {
background-image:url(xxxxxxxxxxxxxxxxx);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;

}

#footer a {
color:#eee;
}
}


//改变背景色和透明度
.main-inner {
background: #fff;
opacity: 0.9;
}
//改变菜单栏透明度
.header-inner {
background: #ffffffe8;
opacity: 1;
}
//标题颜色
.site-meta {
background: #f76730;
}

//标题字体及背景
.site-title {
display: inline-block;
vertical-align: top;
line-height: 36px;
font-size: 45px;
font-weight: normal;
font-family: 'Lato', "PingFang SC", "FZShuTi", sans-serif;
color: #000000;
}

//副标题配置
.site-subtitle {
margin-top: 10px;
font-size: 17px;
color: #000;
font-family: 'Lato', "PingFang SC", "STXingkai", sans-serif;
}

//底部博客信息颜色
.footer {
font-size: 14px;
color: #000;
}
//当鼠标移动到选项时的优化
.menu .menu-item a:hover, .menu-item-active a {
background: #ffffff85;
border-bottom-color: #dcd1d196;
}

//菜单右部的点
.menu-item-active a:after {
content: " ";
position: absolute;
top: 50%;
margin-top: -3px;
right: 15px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #484848;
}

懂CSS的人应该很好看懂,有些注释可能不标准,不易懂,最好呢就是打开浏览器自己对照着看一下,每个人的审美都不一样,可能你做出来的会更好看哦。