博客中的搜索功能我也是用过不少了。速度是很关键的一个问题。今天突然想起来之前next主题的搜索速度很理想。所以移植一下。next主题的一键就可以了，绕道吧。

安装插件

在博客根目录下运行

npm install hexo-generator-search --save

然后在博客根目录下添加以下语句

search:
  path: search.xml
  field: post
  content: true

引用js和css

因为和next的框架不同，所以js和css我做了以下调整。可以直接调用我的链接（不保证稳定性），也可以下载后放入自己调用的地方。

js: https://cdn.jsdelivr.net/gh/drew233/css/fsearch.min.js
css: https://cdn.jsdelivr.net/gh/drew233/css/rfsearch.min.css

你也可以根据你的实际情况，调整css（我的css没调太好，牵扯太多，懒

设置弹出搜索框元素

在你主题下的对应模板文件中
如Sakura主题中的layout.ejs中添加

<div class="site-search">
      <div class="popup search-popup" style="display: none;">
      <div class="search-header">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <div class="search-input-container">
      <input autocomplete="off" autocorrect="off" autocapitalize="none" placeholder="输入关键词搜索" spellcheck="false" type="text" id="search-input">
    </div>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    </div>

    <div id="search-result">
      <div id="no-result"><i class="fa fa-frown-o fa-5x"></i>
      </div>
    </div>
    </div>
    <div class="search-pop-overlay" style="display: none;"></div>
</div>

添加搜索

此时你已经可以使用本地搜索了，只需要在你觉得合适的模板文件添加一下代码即可

<a role="button" class="popup-trigger">“这里的内容可以自己随意调整”</a>

效果图

Demo(点此查看效果)

结语

其实我现在才知道这种搜索方式之所以速度不会卡太久，是因为只有你点击了搜索，才会加载本地的用来检索的文件。这样想来，确实也没什么可以说的了，不是主题自带的搜索不好用，是我不会用，菜是原罪。

赏