hexo中主题yilia下的搜索功能

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.浏览页面测试搜索效果

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家