Hexo主题添加站内搜索

Hexo好多的主题都是默认链接到Google的搜索，并且Hexo官方的辅助函数里也有<%- search_form(options) %>，插入Google的搜索框，同样你可以自定义一个简单的链接指向百度也是可以的。

但是这里要介绍的并不是指向某个搜索引擎的搜索，这里介绍一种站内搜索的方式，同样也是要依靠第三方服务-Swiftype - Site search and enterprise search

首先按照提示注册一个账号，注册完之后按照提示一步一步往下走。


大概过个十来分钟，在Content里就能看到抓到的站点页面。

接下来就是在站点中安装它，根据提示有两部分代码需要添加。

将上图中的一段js代码复制到after_footer.ejs文件中，如下所示：

1
2
3
4
5
6
7
8
9
<!-- 站内搜索-Swiftype -->
<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','sC-iNFrvTTNtiXEVNwo1','2.0.0');
</script>

最后修改一下搜索框的input标签即可。

1
2
3
4
5
 <div class="search">
  <form action="<%- url_for("search/index.html") %>" method="get" accept-charset="utf-8">
     <input type="text" id="search" class="st-default-search-input" placeholder="Search" />
  </form>
</div>

最后的最后，重新部署博客至服务器上，点击搜索，效果如下图。

该服务的实际效果是否有效，需要各位自己去验证；并且该服务并非免费的哦。

技术, Hexo
hexo, 搜索, Swiftype