LACKAWANNA
EXPRESSO

为博客添加简单的全局搜索

Adding Simple Global Search to Jekyll Blog

# 这不是一篇教程

看到Spotlog有非常酷炫的搜索功能,虽然心里知道Hux在创造Hux Blog这个主题的时候就是本着简介明了的原则来创作的,但是还是手痒。无奈Spotq同学没有放出具体实现的代码,况且又封了仓(GitHub),于是便只能自己动手来制作。

# 前端苦手

Hux在创作主题的时候使用的是Bootstrap 3.3,于是便想利用便利的框架来直接将搜索框插入Navbar。无奈,多次尝试之后以失败告终,网上copy来的代码要不就是根本不起效,要不就是不够美观。

失败了一个下午之后,只好决定将搜索框放到右侧的侧边栏中,唯一的问题就是在移动设备上搜索框会出现在界面的最下方。我设想的形式是左边有一个搜索标志,右侧是输入框,结果直接在下方的<ul>中显示。

首先遇到的问题是,Hux Blog的侧边栏有一个bug,也就是Featured Tags栏目下方的elements也被计算作了tags,导致这一<section>下方的<hr>以及我添加的<input>都被套上了<a>,搜索框每次被点击都会自动跳转。经过长时间的研究,发现问题应该就在这一句中:


{{ tags | split:'</a>' | sort | join:'</a>'}}

但——我解决不了,因为我的liquid知识实在太少。最后,折衷的办法是,从不存在这一bug的旧版的Hux Blog主题中拷贝代码,最后的结果就是侧边栏的tags不能再自动排序。

Edit:这一问题在最新的Hux Blog主题中已经由Hux修复,解决的方法是将_includes/featured-tags.html中的部分代码修改为:


...
<a>...</a>__SEPARATOR__
{% endif %}{% endfor %}
{% endcapture %}
{{ tags | split:'__SEPARATOR__' | sort }}

具体的做法请参阅Hux Blog的Commits。

解决了这一问题之后,便着手编写搜索框的代码。结构很简单,一个<div>里装着搜索glyph,一个<input>用于输入。我想像Bootstrap Docs一样使得左边的<div>与右边的<input>同高,但始终做不到,传统的display: inline-block写法在PC上同高,但到了移动设备上又不同高了。查阅资料发现,要让两者同高,得采用display: flex的方式,让两个元素同处一个限位<div>之中,并以盒模型的方式显示,才能够让两者真正保持统一高度。

于是,就有了以下的的代码:

See the Pen Search Bar by DotIN13 (@DotIN13) on CodePen.

# 造轮子

有的时候,造轮子真的对一个蹩脚的木匠来说,比登天还难,但有一位伟大的哲人Hyt曾经说过:“我觉得造轮子就是一个学习的过程,等你会造轮子了,也就真正知道轮子怎么用了”。

在不断的尝试、不断的试错中,人才能成长,不是吗。