使用swiftype实现站内搜索

本人博客opiece.me，欢迎访问。

前言

首先，以下的内容是基于最新的swifytpe的教程，应该是2.0.0。
站内搜索顾名思义就是将范围限定在你的网站内，以此范围进行关键字搜索。
常见的站内搜索是google和baidu的，但是现在google需要翻墙，因此不予考虑，所以主要考虑百度的，我自己试过百度的站内搜索，感觉不是很好用，主要是新博客，收录的内容很少速度很慢。后来找到了一款名为swiftype的工具，感觉还不错，就使用了swiftype进行站内搜索。

效果图

首先，看一下swiftype应用在博客内的效果。

搜索框界面

搜索结果界面

正文

下面开始设置自己的站内搜索。
1.到swiftype官网进行注册swiftype注册
2.登陆swiftype后，点击CREATE SEARCH ENGINE，之后填入自己的网址等等几个操作。
3.进入install页面，如下图，左边有4个大的选项，分别为：外观、安装代码、搜索框、起动。

4.在外观(appearance)一项，建议使用默认，一直NEXT，最后SAVA&PREVIEW
5.进入安装代码(install code)一项，将生成的代码复制一份，后面用到。
6.进入搜索框(search field)一项，如果你使用的主题跟我差不多，可以跟我的配置一样，只要改个id就行了，如下图。

如果你的博客没有搜索框，则可以选择下图这种

7.进入最后一项(activate)，找到右下角的ACTIVATE SWIFTYPE按钮，点击即可，此时你已经完成了swiftype网站上的所有配置。

8.在E:\hexo\themes\lightum\layout\_partial\after_footer.ejs中添加第5步复制的代码。

<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/v2/st.js','_st');  _st('install','gngcYKRA61Ss_pfLd6uz','2.0.0');</script>

9.在E:\hexo\themes\lightum\layout\_widget\search.ejs中，修改代码如下，如果的主题跟我不同，那就在你的搜索框的input属性上加入id="chillax-search-input"，记得将id改成第6步记下来的id。

<div class="search">  <form>    <input type="search" id="chillax-search-input" placeholder="<%= __('search') %>">  </form></div>

总结

swiftype在搜索框这一栏提供了多种选择，用户可以根据自己的需求选择合适的。
swiftype的优点：
1.效果出现的很快，部署完所有东西后，很快就能进行站内搜索。
2.操作简单，方便。
如有任何疑问，欢迎留言讨论。

原创文章，转载请注明出处。