文章目录

    现在像Jekyll Hexo之类的优秀的博客、CMS开源系统有很多,新兴的Node.js开源项目更是后起之秀,百家争鸣,在markdown盛行的今天,很多博客也采用了这种高逼格的方式,去除了繁琐的后台开发和使用,直接使用了markdown开编写文章,但是生成的文章界面都是静态界面,往往这些博客程序都没有数据库一说,那么问题来了,静态博客怎么搜索呢?

    肯定我们都是使用搜索引擎的站内搜索来实现,但是这的搜索引擎收录了你页面才能搜索,况且如今google无法使用,百度的搜索结果相对差强人意,最好的办法就是我们有个类似搜索引擎的工具来抓取页面数据。

    我使用的hexo,我在hexo官方网站上看到有搜索功能,我查看代码后发现他们使用的是一款‘swiftype’的工具,网站https://swiftype.com。于是我也去注册了一个,发现效果很不错,注册后填写你的网站即可生成索引,他索引生成频率是有时间限制的。

    他有网页搜索模式,同时也提供的灵活的JS API接口,我博客就使用的JS接口,相对灵活,我可以自己定义搜索结果的样式和排版。

搜索页面示列,实际上引入它们的脚本就好了。注意容器节点的ID!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="search_page">
<div class="page" id="main">
<form class="search-form">
<input type="text" id="st-search-input" placeholder="请输入关键字" class="st-search-input" />
</form>
<div id='st-results-container' style='width:100%;text-align:center'></div>
</div>
<script type="text/javascript">
require(["jquery"],function(){
$("header .search").remove();
if(location.hash){
var h = location.hash.replace(/^#/,"").split("&");
var map = {};
if(h)for(var i=0;i< h.length;i++){
var kv = h[i].split("=");
map[kv[0]] = kv[1];
}
if(map.stq){
$("#st-search-input").val(map.stq);
$("#st-results-container").html("正在加载搜索结果,请稍等...");
}
}
})
</script>
<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/v1/st.js','_st');
_st('install','你的API key');
</script>
</div>

此文是本站原创,转载请标注作者和链接出处!