静态博客如何实现站内搜索

许多网站都有站内搜索功能,对于有数据库支持的网站,实现搜索是很简单的事情,而对于静态博客这样没有数据库支持的网站,实现搜索就有点麻烦了。本文总结了静态博客实现站内搜索的几种方法。

1.利用搜索引擎语法

这是最简单的一种,直接利用搜索引擎语法site,如:

    site:blog.werner.wiki 搜索关键词

便是告诉搜索引擎,在网站“blog.werner.wiki”中搜索“搜索关键词”,几乎所有搜索引擎都支持这一语法。实际中如何使用呢?在博客页面中添加如下代码即可(以百度为例):

    <form onsubmit="return baiduWithHttps(this)" action="http://www.baidu.com/baidu" target="_blank">
        <input name="tn" type="hidden" value="SE_zzsearchcode_shhzc78w">
        <input name="si" type="hidden" value="blog.werner.wiki">
        <input name="ct" type="hidden" value="2097152">
        <input type="text"  onfocus="checkHttps" name="word"  size="30">
        <input type="submit" value="百度搜索">
    </form>
    <script src="http://s1.bdstatic.com/r/www/cache/global/js/BaiduHttps_20150714_zhanzhang.js"></script>
    <script>
        function checkHttps () {
            BaiduHttps.useHttps();    
        };
        function baiduWithHttps (formname) {
            var data = BaiduHttps.useHttps();
            if (data.s === 0) {
                return true;
            }
            else {
                formname.action = 'https://www.baidu.com/baidu' + '?ssl_s=1&ssl_c' + data.ssl_code;
                return true;
            }
        };
    </script>

百度支持使用GET参数si来指定网站,需配合&ct=2097152才会生效。上述代码来自百度站长平台,稍有修改,指定了搜索范围限定在网站blog.werner.wiki中,实际运行效果如下:






当然,还可以直接登录百度站内搜索(http://zn.baidu.com/),按照提示生成站内搜索搜索框代码。

此种方法最为简单,但要求搜索引擎对博客内容有所收录。若收录较少,搜索效果会很不太理想。

2.在浏览器端用js实现搜索

这一方法思路来源于《给jekyll添加炫酷简洁的搜索》。原理是在生成静态博客的时候生成一个用于搜索的JSON文件,该文件包含了博客中所有文章的标题和对应的URL。生成这一JSON文件,使用的是类似下面这样的模板:

    {
        "code" : 0 ,
        "data" : [
        {% templatetag openblock %} for post in site.posts {% templatetag closeblock %}
            {
                "title" : "{% templatetag openvariable %} post.title {% templatetag closevariable %}",
                "url" : "{% templatetag openvariable %} post.url {% templatetag closevariable %}"
            }
            {% templatetag openblock %} if not forloop.last {% templatetag closeblock %}
            ,
            {% templatetag openblock %} endif {% templatetag closeblock %}
        {% templatetag openblock %} endfor {% templatetag closeblock %}
        ]
    }

生成的JSON文件点这里可以看到。

在浏览器中,js使用ajax异步加载该JSON文件并解析。当要搜索时,从该JSON文件包含的信息中进行搜索就可以了。考虑到博客内容不是很多,只搜索标题代价就更小了,故而不建索引,不做优化,使用很慢的js进行简单的字符串匹配,也可以获得良好的搜索体验。

李跃东使用这种技术,制作了静态博客Jekyll和hexo的搜索插件。我在自己的博客中使用了他写的插件,双击Ctrl或是点击屏幕右下角的放大镜可以调出搜索框。虽然我既没有用Jekyll也没有用hexo,但原理总是相同的,稍作修改,就可以使用。

该方法的优点是简单可控,缺点是只能搜索标题,最多加上标签、分类,无法进行全文搜索。

3.使用第三方提供的站内搜索服务

简单的说,就是告诉第三方搜索服务提供商自己的博客地址,第三方会排爬虫爬取自己博客的内容,建立索引等待搜索。要搜索时,调用第三方提供的搜索服务即可。提供这种服务的有Swiftype(一个免费限额)、阿里云开放搜索(收费)、微搜索(已挂)。

Swiftype功能强大,可高度定制,提供了很易于使用的API,推荐使用Swiftype。这里有一篇不错的教程:《利用swiftype为hexo添加站内搜索v2.0》,虽然有点过时,但也可供参考。本博客的全文搜索便使用了swiftype。Swiftype的缺点也很明显,便是对中文不太友好。

(2017.09.17更新:Swiftype试用期已过,本博客放弃使用Swiftype实现全文搜索,暂无全文搜索)
(2018.11.10更新:本站已更换为动态博客)

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

20 − 15 =