简单实用的站内搜索实现，你值得拥有！(精)

发表于   |   分类于   |   阅读次数   |   字数统计: 4,858(字)   |   阅读时长: 26(分)

摘要

很多的博客都需要搜索框，近段时间发现，用到的Swiftype等都需要收费了，所以说”世上没有免费的午餐“，就此我决定放弃使用第三方的搜索，还是规规矩矩的使用本地搜索的功能，虽然使用了本地搜索，但是不甘于其太过简单，经过个人搜索了一大堆搜索框的优化方法，终于建立起一个实用的搜索框。特此分享出来。

HEXO-建站系列
HEXO-优化系列
HEXO-进阶系列

正文

前沿

本文所实现的搜索框源代码借鉴于flashlab，flashlab的源代码实现了，搜索框针对本地搜索、百度搜索、谷歌搜索。百度搜索-通过百度针对你网站且关键字收录搜索，谷歌同理，我的搜索框在此基础上做了简单的修改，来，先睹为快，

search

搜索框实现

前提

本搜索框借助于插件hexo-generator-search，请先安装并启用Search

1
npm install hexo-generator-search --save

启用Search

1
2
3
search:
  path: search.xml
  field: post

文件结构

文件描述：
layout/_layout.swig- 确保localsearch.swig被引入，此文件为页面初始化接口文件
layout/_partials/header.swig- 此文件包含位于导航栏的搜索按钮的实现代码
layout/_partials/search.swig- 此文件包含判断是否使用相关搜索，搜索包含（tinysou、swiftype、localsearch）
layout/_partials/search/localsearch.swig - (重要)此文件是实现搜索显示的INPUT代码文件(即你可以将这里的代码放到你想要显示的搜索input的地方)
layout/_scripts/third-party/localsearch.swig -此文件包含实现搜索的核心JS代码
source/css/_common/components/third-party/localsearch.styl-包含搜索框的样式代码
source/css/_common/components/third-party/third-party.styl-包含样式代码引入页面的代码
注意:
除了上面标注为重要的文件都是标准代码未见，为模板的存在，而标注为重要文件的代码是可以放到其他代码文件位置，主要是让你希望INPUT的搜索框放在哪些你想要显示的页面。

代码实现

如果您已经了解上面的代码文件，并清楚知道文件的位置，在操作前先对你的代码原文件进行备份一下，接着请移步到”flashlab“, 此页面列出以上需要修改的代码文件，请将你的文件按照我给出的此链接位置的说明进行对应替换。通常情况下，将所有以上替换后，并不能确保你的搜索框正常显示，但是没问题，因为以上代码替换后，你已经将要实现的搜索框的代码和接口一并完成，剩下的就是如何调用和放置的问题，此部分我会详细解析

搜索框显示

记得我上面说过的layout/_scripts/third-party/localsearch.swig ，此文件的代码是搜索框显示和调用的代码，你可以将代码拷贝到对应的页面想要显示的代码位置。OK，看下面的例子
代码如下：

1
2
3
4
5
6
7
8
9
10
<form class="site-search-form" >
  <input type="text" id="search-input">
  <div id="search-result"><ul class="search-result-list"><li><a href="//www.baidu.com/s?wd=XXX%20site%3A{{config.url}}" class="search-result">百度搜索 <i class="search-keyword">XXX</i></a></li><li><a href="//www.google.com/search?q=XXX%20site%3A{{config.url}}" class="search-result">谷歌搜索 <i class="search-keyword">XXX</i></a></li><li><a href="#" class="popup-trigger search-result">本地搜索</a></li></ul>
  </div>
</form>
  <div class="popup">
  <input type="text" id="local-search-input">
  <div id="local-search-result"></div>
  <span class="popup-btn-close">close</span>
  </div>

在导航栏显示

编辑layout/_partials/header.swig 定位导航栏代码区，如下找到hasSearch，原意：对是否启用搜索的判断，你可以拷贝上述提示”重要”的代码到此位置，实现导航栏显示搜索框INPUT,通常这样的实现比较适合于”导航栏在页面顶部的位置”，如果你的导航栏在左侧或者右侧，不建议放在这个位置，显然不好看，而且不一定看到搜索框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    {% if hasSearch %}
      <li class="menu-item menu-item-search">
        {% if theme.swiftype_key %}
          <a href="#" class="st-search-show-outputs">
        {% elseif config.search %}
          <a href="#" class="popup-trigger">          #此位置，你完全可以将`layout/_scripts/third-party/localsearch.swig`的代码拷贝进去并替换
        {% endif %}
          {% if theme.menu_icons.enable %}
            <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
          {% endif %}
          {{ __('menu.search') }}
        </a>
      </li>
    {% endif %}
  </ul>
{% endif %}

右侧浮动显示

技巧：
一个很好的搜索方式，如我的博客,将搜搜框浮动放置到右侧，实现的方法，你可以网上搜搜一大堆对应的浮动样式代码，一般这些样式代码都只会操作特定的属性的标签(div)，你可以将”重要”的代码拷贝到你的浮动框div中，使得搜索框随同div浮动显示在右侧。

如果你不想网上找，你也可以使用我的代码:
在你的source/css/_common/components/third-party/localsearch.styl 添加以下样式代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#tstart-toolbar-top-jory
{
top:0;/*最上*/             
color: #3E3E3E;
right: 0;
position: fixed;
text-align: left;
width: 100%;
z-index: 10000;
overflow:visible;
}
#tstart-toolbar-top-jory .tstart-right
{
float: right;/*在右*/             
margin: 10px 30px 5px 5px;
padding: 10px;        
-moz-box-shadow: 0px 0px 5px #000;
-webkit-box-shadow: 0px 0px 5px #000;
}

使用我的div(里面已经插入搜索框代码)，你可以将此代码放到你的layout/_partials/header.swig 任意位置，但是提示一下：请留意文件中的HTML的div嵌套问题，请不要将此代码嵌套在一些宽度和长度比较少的的div里面，否则你的我提供的div并不能跳出上级的div标签，从而无法达到显示在右侧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="tstart-toolbar-top-jory">
	<div id="tstart-toolbar-top-jory-right" class="tstart-right">
	
	   <form class="site-search-form" >
          <input type="text" id="search-input">
          <div id="search-result"><ul class="search-result-list"><li><a href="//www.baidu.com/s?wd=XXX%20site%3A{{config.url}}" class="search-result">百度搜索 <i class="search-keyword">XXX</i></a></li><li><a href="//www.google.com/search?q=XXX%20site%3A{{config.url}}" class="search-result">谷歌搜索 <i class="search-keyword">XXX</i></a></li><li><a href="#" class="popup-trigger search-result">本地搜索</a></li></ul>
         </div>
       </form>
		  <div class="popup">
		  <input type="text" id="local-search-input">
		  <div id="local-search-result"></div>
		  <span class="popup-btn-close">close</span>
		  </div>
		  
	</div>       
</div>

建议的位置：
你可以找到一下代码位置，在其下面添加上述代码即可

1
2
3
4
5
6
7
<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

代码小优化
你可以加个对应搜索框代码的判断，可以实现是否启用搜索框显示(此操作非必需)

1
2
3
4
5
{% if config.search %}

   搜索框INPUT显示代码
   
{% endif %}

小结

我给的代码已经可以实现你的搜索框显示和显示在右侧浮动，如果你的搜索框不太好看，请自行解决，多多动手咯

结语

如果你还需要了解更多技术文章信息，请继续关注Jory博客

看一看，共同关注，共同分享与讨论！