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

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

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更新：本站已更换为动态博客）