为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在微搜索后台取得。

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

如下图

![](http://7xiewb.com1.z0.glb.clouddn.com/image屏幕快照 2015-04-05 下午8.46.56.png)

![](http://7xiewb.com1.z0.glb.clouddn.com/image屏幕快照 2015-04-05 下午8.46.30.png)


遭遇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文件中,只要改一次,以后不需要再修改。

推荐阅读更多精彩内容

  • 第一章 安装Git工具 下载GitHub for Windows,直接点击安装,安装完成后,可以看到“Git Sh...
    不圆的石头阅读 11,578评论 5 63
  • Zeng's Blog 写在前面的话 阮一峰说过,喜欢写Blog的人,会经历三个阶段。(1)第一阶段,刚接触Blo...
    国境以南_zeng阅读 1,373评论 0 6
  • 本文首发在我的个人博客:http://cherryblog.site/欢迎大家前去参观,顺便求fork,么么哒~ ...
    sunshine小小倩阅读 4,990评论 3 23
  • 1早起,跑步5k.特别喜欢雨后跑步,特别喜欢,一次也不想错过,今天天气特别好 2.练字,微博上随便抄的一些话 3....
    Jane小白917阅读 109评论 4 1
  • 我不是科班出身,也不会写东西,只是记录一下自己每天的所感所想! 有功夫写东西的人,会不会真的很累。累了,睡吧! 日...
    f1910cf26cbc阅读 91评论 0 0
  • 总是定格在那一幕,你静静地躺在那里,已经那么陌生,也许之隔一天,惘若隔日,隔世。今天,你又在哪里,我知道,你并没有...
    jingtu阅读 301评论 0 0
  • 明明知道 一无所知才好。 触碰到的你的温度... 在那笑容下 在那举止中 我已经崩溃。 很少会这么悠闲。 漫黄的天...
    小萨萨阅读 148评论 0 0