Swiftype 专业站内搜索工具

文章目录

开始使用Hexo以后就一直为站内搜索头疼，毕竟静态博客要自建搜索引擎就是吃饱了撑的，肯定需要用到第三方搜索引擎。

Google就不用想了，原因大家都懂。百度站内搜索一直没能成功实现，原因不明，也懒得找明，只有指定域的方法可行。

一早听说了Swfitype这枚神器，但是始终没腾出来时间研究。随便百度时无意找到了这篇文章（http://www.jerryfu.net/post/search-engine-for-hexo-with-swiftype.html），才好好研究了一下。

原文引导作用很好，就是有若干处错误，所以在下干脆就重新整理了(图均借用了原文)。

虽然本文是基于自己的主题Gacman（当然，也完全适用于Jacman和Pacman），但是其实各个主题都大同小异。先展示一下效果吧：我要搜索“装甲纵队”

首先前往Swiftype的官网https://swiftype.com注册一个账号，然后根据指引建立好自己网站对应的索引。

然后切换到install面板，如下图：

进入安装面板后需要先配置一下自己的站点，按照下图的配置来操作：

其中的网址注意把www.jerryfu.net部分替换成自己的网址。

然后点击配置界面左侧的“SWIFTYPE INSTALL CODE”来获取所需要的js代码，获取类似下边的代码：

<script type="text/javascript">
(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
(w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
})(window,document,'script','//s.swiftypecdn.com/install/v1/st.js','_st');
_st('install','your install code'); //每个网址的install code都不同
</script>

直接把这段代码拷贝到主题目录中layout_partial的footer.js或者header.js中，以保证每个页面都运行了Swiftype代码。可以考虑加上判断条件，比如下文的if(theme.swiftype.enable)。

在主题下的_config.yml文件中添加如下代码（注意不要打断其它配置，可以考虑加在自定义搜索附近或干脆文件最后），增加一个swiftype的配置选项：

swiftype:
  enable: true

然后到Hexo根目录中的source目录下建立一个search文件夹，再在其下建立一个index.md，index.md中写入如下代码：

layout: search
title: search
----

然后到主题目录中layout_partial目录下打开header.ejs，在搜索模块的各条件之间添加一个条件（这里的class样式是Gacman特定的，各个主题都应该用自己的）：

<% } else if(theme.swiftype.enable){ %>
<form class="search" action="<%- config.root %>search/index.html" method="get" accept-charset="utf-8">
    <label>Search</label>
    <input type="text" id="st-search-input searchbox" class="text-input" placeholder="" />
    <input type="submit" class="search-btn" value="SEARCH">
</form>
<% } else { %>

还是layout_partial目录，打开search.ejs，同样是为Swiftype增加一个条件：

<% } else if(theme.swiftype.enable) { %>
<div class="container">
    <div id="st-results-container">正在加载搜索结果，请稍后...</div>
</div>
<% } %>

嗯，这样就完成了。hexo g，hexo d，all done~