1.swiftype官网进行注册swiftype注册
2.登陆swiftype后,点击CREATE SEARCH ENGINE,之后填入自己需要加入搜索功能页面的网址
3.进入install页面进行设置,分别为:外观、安装代码、搜索框、起动。
4.在外观(appearance)一项,建议使用默认,一直NEXT,最后SAVA&PREVIEW
5.进入安装代码(install code)一项,将生成的代码复制一份,后面用到。
6.进入搜索框(search field)一项,注意不同用户设置的id值是不同的,具体是什么在swiftype中会给出。
7.进入最后一项(activate),找到右下角的ACTIVATE SWIFTYPE按钮,点击即可,此时你已经完成了swiftype网站上的所有配置。
8.liuhong-blog\themes\yilia\layout_partial\footer.ejs下粘贴第5步复制的代码:
<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','JEb1Y8kupG5T1657HWBP','2.0.0');
</script>
9.打开Yilia主题下的_config.yml文件,在其末尾处,添加代码:
swift_search:
enable: true
10.到hexo的source目录下(注意不是主题目录),建立search文件夹,再在这个文件夹下建立index.md,在这个文件中写入:
layout: search
title: RESULT
toc: false
comments: false
<div id="st-results-container">
</div>
因为Yilia主题中可以控制评论时候开启,所以在这里直接将comments设置为false,这样在搜索界面就不会出现多说评论框了。同时加入<div></div>
表明这是一个显示搜索结果页面。
11.打开目录hexo\themes\yilia\layout_partial,打开文件left-col.ejs。选择将搜索框添加到左侧头部处,在如下位置加入如下代码(if语句处的代码):
<div class="overlay"></div>
<div class="intrude-less">
<% 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-input" class="st-search-input_my" maxlength="30" placeholder="Search" />
</form>
<% } %>
<header id="header" class="inner">
<a href="/" class="profilepic">
12.同时在此文件夹下,新建一个search.ejs文件,将如下代码拷贝其中:
<% 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','71Sb61uESndnsvWykuYK');//换成自己的ID
</script>
<% }
%>
(注意:一定要换成swiftype为你所生成的代码)
13.打开目录hexo\themes\yilia\source\css,在myStyle.css文件的末尾添加如下代码:
.search {
padding: 1em 0 0 2.5em;
}
.search input {
line-height: 1.8em;
border: 1px solid color-white;
color: color-white;
background: transparent;
padding-left: 4em;
}
@media tablet {
.search input {
width: 4em;
-webkit-transition: 0.5s width;
-moz-transition: 0.5s width;
-ms-transition: 0.5s width;
transition: 0.5s width;
}
.search input:focus {
width: 8em;
}
}
.search label {
display: none;
}
form input.st-search-input_my {
font-size: 12px;
padding: 4px 9px 4px 27px;
height: 20px;
width: 190px;
color: #666;
border: 1px solid #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.17);
-moz-box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.17);
-webkit-box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.17);
box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.17);
outline: none;
background: #fcfcfc url("/img/search.png") no-repeat 7px 7px;
}
14.浏览页面测试搜索效果