Hexo主题添加站内搜索

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

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

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


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

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

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

<!-- 站内搜索-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标签即可。

 <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> 

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

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

Comments
Write a Comment