Hexo-Icarus主题改造:增加搜索框

icarus的搜索功能,只能在导航栏上看到一个搜索图标,这样实在是不明显。为了优化用户体验,我希望它能够显示一个搜索框。

首先打开文件“themes/icarus/layout/common/navbar.ejs”,打开文件,在这样一段代码中,并在其中加入input标签,以下是我修改后的

然后打开“themes/icarus/source/css/style.styl”文件,在文件的最后加上下面的css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*--------------------------------
* search input style
*---------------------------------*/
.search
input
text-indent: 10px
height: 1.8rem
line-height: 1.9rem
border: none
outline: none
i
position: absolute
top: 1.35rem
left: 0%
color: #B2B2B2

最后,启动网站,看看效果,是不是体验更好呢。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×