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

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

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

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

Hexo-Icarus主题改造:修改网站标题

icarus主题的默认标题是一张图片,我的个人博客肯定不能使用主题的logo,所以必须要修改。怎么修改呢,奔着极简的目标,我觉得把它替换为文字,说搞就搞。

首先,找到导航条的js文件,它的位置是“themes/icarus/layout/common/navbar.ejs”,打开文件,在这样一段代码

1
2
3
4
5
6
7
<a class="navbar-item navbar-logo" href="<%- url_for('/') %>">
<% if (logo && logo.text) { %>
<%= logo.text %>
<% } else { %>
<img src="<%- url_for(logo) %>" alt="<%= title %>" height="28">
<% } %>
</a>

这段代码的逻辑就是:如果主题的配置文件中有“logo.text”,节点,就显示这个配置的内容,否则就显示配置的“logo”图片。

Hexo-Icarus主题改造:默认开启目录(toc)功能

关于icarus主题的toc功能

默认情况下,我们可以在文章的头部加上“toc: true”,来显示目录结构的。实际写博客的场景是,我希望大多数情况下,都可以显示目录,那就就产生这样一个需求:当我不需要显示目录的时候,只需要在头部输入“toc: false”,就可以了,不写就显示。

如何实现

找到toc组件的js,位置是“themes/icarus/layout/widget/toc.locals.js”,内容如下:

Your browser is out-of-date!

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

×