hexo博客增加菜单栏目

hexo中的yelee主题默认提供了主页归档标签关于这几个菜单条目。那么如何增加新的条目呢?

新建页面

1
hexo new page "message"

新建的页面会在source/message/index.md这里,打开之后可以输入内容。

加入到菜单栏目

1
vim themes/yelee/_config.yml

menu下面加入新建立的message

1
2
3
4
5
6
7
menu:
主页: /
归档: /archives/
标签: /tags/
导航: /map/
留言: /message/ ##加在这里
关于: /about/

更改css

博客增加了两个栏目:导航留言。然后发现地方不够了,最后的关于被下面的图标覆盖了。怎么增加导航栏上下的高度呢?

1
vim ./themes/yelee/source/css/_partial/main.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
.header-menu{
menu-line-height = (28/16)rem
font-weight: 550;
line-height: menu-line-height;
font-family: inherit;
cursor: pointer;
text-transform: uppercase;
float: none;
min-height: @line-height * 5; ## 增加这个,控制了菜单的最小高度。
max-height: @line-height * 7; ## 增加这个,控制了菜单的最大高度。
overflow: visible;
text-align: center;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
li{
cursor: default;
a{
font-size: (14/16)rem;
min-width: left-col-width;
}
}
}

最后的效果如下:

image_1b6ijg51it7m1512m9m12331h8k9.png-125.7kB

如果还想看到更多此类文章,请移步到小宇的博客

文章目录
  1. 1. 新建页面
  2. 2. 加入到菜单栏目
  3. 3. 更改css
|