使用swiftype实现站内搜索

前言

首先,以下的内容是基于最新的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)一项,如果你的博客已经有搜索框,则可以按下图设置,并将搜索框的class格式设置为st-default-search-input,如图红色下划线所示,当然你也可以根据自己的喜好设置其他样式。

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

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

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

1
2
3
4
5
6
7
8
<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\light\layout\_widget\search.ejs中,修改代码如下,如果的主题跟我不同,那就在你的搜索框的input属性上加入id="chillax-search-input",记得将id改成第6步记下来的id。

1
2
3
4
5
<div class="search">
<form>
<input type="text" id="st-search-input" class="st-default-search-input" />
</form>
</div>

总结

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

版权声明:本文为博主原创文章,转载请注明出处 Chillax’s Blog