文章目录
  1. 1.   Step2:安装配置
  2. 2.   Step 3 hexo的Pacman主题配置

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

  如果是已经完成了注册与网站数据的抓取,可以直接跳到step2 Install部分。

  开头先废话几句,自上次写了利用“swiftype为hexo添加站内搜索”
http://www.jerryfu.net/post/search-engine-for-hexo-with-swiftype.html),发现很多人用上了这个方法,很是开心。前段时间忙着玩别的东西了,所以对这个没太关注,最近查看评论的时候吓了一跳,发现好多人回复遇到了问题。

  反映最多的一个问题是swiftype升级了,所以老的教程里面的很多东西找不着了,于是乎我花了点时间把自己博客所用的swiftype升级了一下。

  注意swiftype有两个不同老版本的升级,分别是2013 Swiftype Search Widget和2014 Search Widget,如果是新用户的话不用关注,如果以前按照我那篇文章配置好的同学想升级的话那么你的就应该是2014 Search Widget,也即是本文适用内容,具体可以参见官方文档:https://swiftype.com/documentation/tutorials/upgrade_to_search_widget_designer

  下面言归正传。

#Step1:前期准备工作#

  首先,老一套的要去swiftype的网站https://swiftype.com注册一个账号,然后根据指引建立好自己网站对应的索引。对了有人说注册以后是30天试用,这个没关系,网站给的是30天高级账户的使用(那种有可以建立多个搜索引擎、多账户共同管理、一个引擎index多个域名的功能的账户),30天到期后你可选择花钱继续用这个高级账户(土豪自便),或者选择降级成为免费的账户类型,也就是我现在用的那种,所以,不用担心。

  登陆后会自动切换到dashboard,一开始会有什么welcome to swiftype,不用搭理直接close即可。然后下面的Create an engine选项便出现了,点吧,如图所示:

  然后到下一步,给你的网站建立一个索引:

  接着让你输入网址,写吧:


  然后让你起个名字,起吧:

  然后他开始抓取你网站的数据,等等吧:

  抓好之后你的dashboard会变成这个样子:

  可以点进去看看抓了些什么数据:

  可以看到抓了一些目录和tag数据过来,如果你不想要的话可以手动删除。

  Step2:安装配置

  如图,点击开始安装:

  开始:

  跳转到配置页面,先来配置一下外观:

  SEARCH RESULTS 、AUTO COMPLETE、 COLORS改不改随意,不想折腾保持默认即可

  然后保存一下,进入下一个配置:

  之后会跳转到preview页面,不用搭理,直接next,这个时候会给你一个Install Code,复制一份,留待备用,我的是这个:

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/v2/st.js','_st');

_st('install','WvPe3DphyTP1Egm6xRFi','2.0.0');
</script>

  继续next,下面开始设置search field,选择 “Yes, my site has an input field”,别的保持默认,直接next

  之后便来到了Activate界面,下面需要进行结果页面的配置,如果不配置的话默认的结果展现方式是这个样子的(弹出一个结果展现框):

  如果你喜欢这种弹出式的风格的话保持默认直接active即可,如果想要实现类似我的这种单开一个页面显示搜索结果的话就要进行一下配置,点击”Edit”进行编辑

  照着上图填写即可,注意把其中的网址(www.jerryfu.net)替换成自己的网址。

  然后点击Save保存一下,之后active激活

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

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

  Step 3 hexo的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
8

<% } 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="search" class="st-default-search-input" maxlength="20" placeholder="Search" />
</form>

  如下所示:

  注:这里和1.0版本不同的地方在于input里添加了一个class=”st-default-search-input” 的标签,这个和step2中默认的那个input class是一致的,你如果前面步骤有改过input class这里也要做相应的改动。

  Header.ejs的处理完成。

  接下来处理search.ejs。

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

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

  注意这里的最后的脚本代码也要为上面复制备用的你自己的那段Install Code代码。

  注:对于landscape主题注意请将该部分的代码(即处理search.ejs的代码)写入到上文建立的/source/search/index.md中即可生效,感谢微博网友mmmmm57提供。

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
43
<% if(theme.swift_search.enable) { %>
<div id="container" class="page">
<div id="st-results-container" class="st-search-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>结束的代码块要替换成自己上面保存的Install Code代码--!>
<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','auhSjJgvzA1Ct722dXyr','2.0.0');
</script>

<% } %>

  注:这里和1.0版本不同的地方在于显示内容的div里添加了一个class=”st-search-container”的标签,这个和step2中默认的那个container标签是一致的,你如果前面步骤有改过这里也要做相应的改动。

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

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

  如下图所示:
 

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

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

  Enjoying it!

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

文章目录
  1. 1.   Step2:安装配置
  2. 2.   Step 3 hexo的Pacman主题配置