Create Local Search for Your Hexo Blog

Posted on | Post modified: |
| 424 | 2

I created my blog with Hexo and in this article I’ll talk about how to create Local Search with hexo-generator-search plugin. I use hexo-theme-next version 5.1.4. (for the previous version localsearch.swig file needs to be modified.)

Install Plugin

First, install hexo-generator-search plugin plugin by the command below:

1
$ npm install hexo-generator-search --save

Then configure this plugin in _config.yml file of your theme.

1
2
3
4
search:
  path: search.xml
  field: post
  content: true

Parameters can be changed for your preference.

  1. path: file path, default is search.xml
  2. field: the search scope you want to search, you can choose:
    • page - will only covers all the pages of your blog.
    • all - will covers all the posts and pages of your blog.
    • post (by default) - will only covers all the posts of your blog.
  3. content: whether contains the whole content of each article. If false, the generated results only cover title and other meta info without mainbody. By default is true.
    More information can be found here.

Extra Info

Version 5.1.3 hexo NexT theme localsearch.swig file looks like

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocomplete="off"
             placeholder="{{ __('search.placeholder') }}" spellcheck="false"
             type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>

Bug Fixed

The above setting works pretty well until one day I encountered a loading failure. The local search function failed to load the popup search window, keeping loading. The issue can be found here. So in this case, we just need to uninstall the hexo-generator-searchdb module with the following command:

1
$ npm uninstall hexo-generator-searchdb --save

Because of some confliction between hexo-generator-searchdb and hexo-generator-search, we cannot have the two modules in the system at the same time.

Reference

[1] 实现 Hexo next 主题博客本地站内搜索
[2] How to create Local Search for your Blog with hexo-generate-search plugin

Relevant Articles

[1] Add Article Views to Your Hexo Blog
[2] Add Comments Section to Your Hexo Blog

0%