本人博客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.操作简单,方便。
如有任何疑问,欢迎留言讨论。
原创文章,转载请注明出处。