文章目录

  这是针对老版本的swiftype的教程,新版本教程请戳这里:利用swiftype为hexo添加站内搜索v2.0

  如何为hexo这样的静态博客添加搜索功能,一直是一个比较头疼的事情,我在网上找了许多的方法都不是很满意。

  网上使用hexo搭博客的筒子们大多数是采用谷歌(被墙2333)或者百度的站内搜索服务,或者直接没弄,点搜索直接404。

  使用百度的站内搜索个人感觉很不爽,虽然操作起来很简单,但是效果太差,别人一看就能发现是调用百度的数据。

  不过由于很简单所以有兴趣的可以看一下coney的实现效果:

  coney的百度站内搜索演示:演示

  具体的实现方法戳这里:
  实现

  Coney在基础的百度站内搜索展示界面的基础上做了一些样式的修改,使得看起来稍微像那么一点自己的搜索,不过缺点就是点击搜索页面的导航栏的各个链接,比如“首页”等都无法进行跳转,而且这种搜索方式你提交的sitemap链接需要被百度站内搜索收录才能在搜索结果中显示出来。

  后来在rimo的博文中了解到可以使用swiftype来实现hexo等静态博客的站内搜索,参见:
静态博客如何实现站内搜索。Rimo的博客完美了实现了hexo的搜索功能,但是他提供的是对应于hexo下的chenall主题的搜索功能实现代码。Pacman的主题并不使用,于是我便开始了自己的探索,倒腾半天终于实现了与之类似的搜索功能。

  先放一下演示:swiftype搜索演示

  顺利的搜索出了结果。

  下面给出实现步骤。

  首先你要去swiftype的网站https://swiftype.com注册一个账号,然后根据指引建立好自己网站对应的索引,不得不说swiftype很棒,只要输入一个网址它便会自动的抓取这个站点的所有页面,并自动添加关键字。

  然后切换到install面板,如下图:

  进入安装面板后需要先配置一下自己的站点,按照下图的配置来操作:

  其中的网址注意把www.jerryfu.net部分替换成自己的网址。

  然后点击配置界面左侧的“SWIFTYPE INSTALL CODE”来获取所需要的js代码,获取的代码如下:

1
2
3
4
5
6
7
8
<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','auhSjJgvzA1Ct722dXyr'); //其实每个人不同的也就是这个userID
</script>

  将这段代码先copy一下,最后配置部分要用到。

  至此swiftype网站部分的配置结束,下面要对本地的Pacman主题进行一些简单的配置就可以了。

  首先打开pacman主题下的_config.yml文件在末尾添加如下代码:

1
2
swift_search:
enable: true

 
  我这是填了一个swift_search的功能,你们也可以直接改掉自带的google search。

  然后到hexo的source目录(注意不是pacman主题的source目录)下建立一个search文件夹,再在其下建立一个index.md,index.md中写入如下代码:

1
2
3
layout: search
title: search
----

  然后再切换的到pacman\layout_partial目录下,最后需要做的收尾工作全部都在这个目录下。
先打开header.ejs,在

1
2
3
4
5
<% if	(theme.google_cse&&theme.google_cse.enable){ %>
<form class="search" action="<%- config.root %>search/index.html" method="get" accept-charset="utf-8">
<label>Search</label>
<input type="text" id="search" autocomplete="off" name="q" maxlength="20" placeholder="<%= __('search') %>" />
</form>

1
2
3
4
5
6
7
<% } else { %>  //注意这个else前面有一个}是我后加的,为了和后加的代码完成闭包
<form class="search" action="//baidu.com/search" method="get" accept-charset="utf-8">
<label>Search</label>
<input type="text" id="search" name="q" autocomplete="off" maxlength="20" placeholder="<%= __('search') %>" />
<input type="hidden" name="q" value="site:<%- config.url.replace(/^https?:\/\//, '') %>">
</form>
<% } %>

  之间添加如下一段代码:

1
2
3
4
5
<% }else if	(theme.swift_search&&theme.swift_search.enable){ %>
<form class="search" action="<%- config.root %>search/index.html" method="get" accept-charset="utf-8">
<label>Search</label>
<input type="text" id="st-search-inpu" maxlength="20" placeholder="Search" />
</form>

  如下所示:

  Header.ejs的处理完成。

  接下来处理search.ejs。

  将原来的search.ejs中的代码清空,替换为如下的代码:

  其实主要就是为了控制结果的显示样式。

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
35
36
37
38
39
40
41
42
<% if(theme.swift_search.enable) { %>
<div id="container" class="page">
<div id="st-results-container" style="width:80%">正在加载搜索结果,请稍等。</div>
<style>.st-result-text {
background: #fafafa;
display: block;
border-left: 0.5em solid #ccc;
-webkit-transition: border-left 0.45s;
-moz-transition: border-left 0.45s;
-o-transition: border-left 0.45s;
-ms-transition: border-left 0.45s;
transition: border-left 0.45s;
padding: 0.5em;
}
@media only screen and (min-width: 768px) {
.st-result-text {
padding: 1em;
}
}
.st-result-text:hover {
border-left: 0.5em solid #ea6753;
}
.st-result-text h3 a{
color: #2ca6cb;
line-height: 1.5;
font-size: 22px;
}
.st-snippet em {
font-weight: bold;
color: #ea6753;
}</style>

<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','auhSjJgvzA1Ct722dXyr');
</script>

<% } %>

  最后打开footer.ejs(其实header也行,随便你),在最后一个标签之前添加一开始拷贝的那段js代码,我的是:

1
2
3
4
5
6
7
8
		<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','auhSjJgvzA1Ct722dXyr');
</script>

  如下图所示:

  至此所有的操作均已经完成。

  最后你要做的只需hexo g&&hexo d,重新部署一下hexo即可。

  Enjoying it!

  转载的话请注明出处,给咱新开的小博客添点人气,谢谢!


如果觉得文章很有趣或对你带来了帮助,欢迎请我喝杯咖啡哦~

文章目录