hexo默认提供的是google的搜索,但是国内很蛋疼,无意中了解到swiftype效果不错,之前也看了一些方法不是很凑效,无奈自己研究了一下,可以正常使用了,这里就把方法share给大家,下面就直接进入正题吧。
注册swiftype账号
创建搜索引擎
注册完账号,接下来就是创建搜索引擎了,这里都是以图片引导,关键步骤都有;
1、CREATE AN ENGINE:
2、继续点击创建:
3、填写自己的域名,不带最后的反斜杠,点击VERIFY,4个验证项,通过之后会让你输入引擎的名字:
4、接下来是让你配置sitemap(关于sitemap自行搜索教程),地址统一是:域名/sitemap.xml
5.1、点击COMPLETE SETUP,创建完成,会进入到如下界面,这里提供的代码就是需要在hexo配置的:
5.2、向下滚动,可以点击content 查看自己的哪些数据被抓取出来了,跳转后页面右侧而且还可以测试搜索功能:
6、点击上面的INTEGRATE -> INSTALL SEARCH ,进行一些关键的配置:
7、点击CHANGE CONFIGURATION:
8、进行一些更详细的配置,4个部分,样式默认就好,也可以自己选,这里就说下面两个部分(results container - 搜索结果页),我使用的是默认的,本页面底部有自定义搜索页的案例。
9、配置Search field,这个就是搜索框-input的相关配置了,hexo主题默认就有,而且swiftype提供的SEARCH FIELD都是一样的input标签:
如果都保持默认设置的话,完成到步骤5.1就可以看下面的教程了。
hexo主题配置(pacman)
我的主题是Pacman的,这里就以pacman为例,其实没有本质的区别,大部分都是在主题目录的文件。
1、首先打开pacman\_config.yml文件在末尾添加如下代码,提供对swiftype的支持:
swift_search:
enable: true
2、 在hexo\source目录(注意不是pacman主题的source目录)下新建一个search文件夹(如果不存在的),在里面新建一个index.md,index.md中写入如下代码:
layout: search
title: search
---
3、 切换的到pacman\layout\_partial目录下,大部分的代码配置都在这里完成的。先打开header.ejs,把
<li>
...
...
</li>
之间的代码清空(我的默认是google的搜索,这里再添加上swftype的搜索,也就是第一个if部分),整合代码如下,直接copy过去就行:
<% 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" class="st-default-search-input" maxlength="20" placeholder="Search" />
</form>
<% }else 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>
<% } else { %>
<form class="search" action="//google.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>
<% } %>
4、将原来的search.ejs中的代码清空,替换为以下的代码,其实主要就是为了控制结果的显示样式(后期可以自己调整),注意:将最下面的<script ... > ...
部分替换成swiftype给你的js代码。
<% 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 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','w7ca3xWstLkz2UvAeyAJ','2.0.0');
</script>
<% } %>
5、打开footer.ejs或header.ejs,在最后一个标签(</div>
)之前添加swiftype分配给你的js代码(同上),我的是:
<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','w7ca3xWstLkz2UvAeyAJ','2.0.0');
</script>
到这里所有的修改都已经完成了,如果没有问题的话,命令行执行:
> hexo clean
> hexo d -g
等部署完成,你就可以打开你的Blog任性的搜索了
推荐
这里推荐一篇其他大神的Blog,可以自定义搜索结果页面,点我跳转.