为hexo添加站内搜索功能

前言

最近发现超赞的hexo主题，next! 。
喜欢之余，又在上面做了些修改.本文主要写为Hexo-Next主题增加站内搜索功能，立刻去体验效果！在线预览 | http://lizhuolun.com

也可以直接去我的github上下载我目前使用的Hexo主题.

本文没有使用google站内搜索或者百度站内搜索，因为他们实在太丑了，体验也不好。最后选择了swiftype以及tinysou。
Swiftype这个国外团队才进行了B轮融资，有点水土不服~没有对中文进行优化，中文词都被拆开，虽然可以高度自定义搜索结果，但是效果还是不好...发现国内也有一个团队在做类似的功能，名字叫微搜索，相比之下，似乎tinysou在中文下更具优势，目前的免费版对于博客站点也足够用了，不过颜值还是有差距，细节上处理也不够好，用了你就知道了。。。

重新整合两种站内搜索模块，可自行选择用哪一种，微搜索的搜索框样式高仿Swiftype。

发现一个很奇怪的BUG，写在最下面

edit:

已解决，在hexo issue下找到了，执行generate之前，先执行hexo clean,原文

Swiftype/tinysou站内搜索

相比百度站内搜索和Google站内搜索，Swiftye/tinysou在颜值上有巨大优势，但是在搜索准确度上比不上专业搜索引擎。

使用说明

支持Swifype站内搜索

在站点的配置文件中增加

`

swiftype_key: yourswiftypekey

`

在swiftype控制面板中选择install，可看到自己的swiftype_key,在st('install','yourswiftypekey')中

默认使用Swiftype的overplay样式，感觉和主题蛮搭的。在Swiftype的官网后台设置一下，将样式改为overplay。

无需自行添加searchfield代码，保存即可。

支持tinysou站内搜索

在站点的配置文件中增加

tinysou_Key: yourtinysou_engineKey

enginekey在微搜索后台取得。

请记得在微搜索官网手动进行爬虫步骤，建议添加规则已取得最佳效果

如下图



---

遭遇Bug

在写代码中我似乎遇到了一个BUG

我在header.styl中添加了自己定制的tinysou样式，

//searchbar

input.menu-search-input {

background-repeat: no-repeat;

background-position: 5px center;

width:70px;

height:20px;

padding:3px 9px 3px 23px;

border-radius:25px;

border:1px solid #C4C4C4;

box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,0.17);

color:#555555;

font-size: 13px;

//这里有问题

background-image: url(/images/searchicon.png);

background-size: 15px 15px;

}

在使用hexo g命令时，生成的main.ccs中没有background-image以下的所有属性，如果我把

background-image: url(/images/searchicon.png);

放在这个样式的最前，整个样式都不会生成。很奇怪，想请教一下这是什么原因呢？我用的hexo3.0

解决办法

edit:

已解决，在hexo issue下找到了，执行generate之前，先执行hexo clean,[原文]
(https://github.com/hexojs/hexo/issues/568)

最笨的办法，手动将

background-image: url(/images/searchicon.png);

background-size: 15px 15px;

放入生成以后的main.css文件中，只要改一次，以后不需要再修改。