How to Add Search to Ghost Using ghostHunter

Having search functionality is quite important for a blog or any website with a lot of content. Even though Ghost does not has this feature yet, it's relatively simple to add search to your Ghost blog. In this tutorial I will show you the steps to add search functionality to your Ghost blog using ghostHunter.

First of all make sure the Public API is enabled. For this go to your Ghost Admin panel, and then click Labs and look for Public API, make sure it is checked. From Ghost 1.0 the Public API is enabled by default.

Now, you have to open the ghosthunter javascript source file and save the content of this file in your theme.

For this you should create a new .js file in your theme, for example:

your_theme / assets / js / ghostHunter.js;

After the new file is in the theme assets folder, you should add a reference to it and initialize the plugin in the default.hbs file (at the bottom, before the ending </body> tag) located in the root folder of the theme.

// reference
<script type="text/javascript" src="{{asset 'js/ghostHunter.js'}}"></script>

//Initialize ghostHunter
<script>
  $("#search-field").ghostHunter({
    results   : "#results",
    onKeyUp: true
  });
</script>

You have to create the input for the search as well, depending on where you want the search to appear place the following lines of code:

<form>
  <input id="search-field" />
  <input type="submit" value="search" />
</form>
<section id="results"></section>

The <form> will be the input field, while the <section> with the "results" id will hold the results.

ghostHunter options

ghostHunter comes with a few options, which can be passed when initializing the plugin:

results
onKeyUp
result_template
info_template
displaySearchInfo
zeroResultsInfo
includepages
subpath
onPageLoad
before
onComplete
item_preprocessor
indexing_start
indexing_end

Let's take a look at the most important options.

Results

This is required and should be set to the id of the DOM object into which search results should be inserted.

results: '#results';

onKeyUp

If you want to have instant search (search as you type), this is the option you need to set to true.

By default this is set to false.

onKeyUp: true;

result_template

This is the default type:

<a class='gh-search-item' href='{{link}}'>
  <p>
    <h2>{{title}}</h2>
    <h4>{{prettyPubDate}}</h4>
  </p>
</a>

If you want a custom template you can create one and pass it to the result_template option when initializing the plugin.

info_template

You can pass a custom Handlebars template if you want to change the default one. The default template looks like this:

<p>Number of posts found: {{amount}}</p>

includepages

If you want to include static pages in the search result you can set this option to true, the default value being false.

Here's an example of ghostHunter initialization with multiple options passed:

$('#search-field').ghostHunter({
  results: '#results',
  onKeyUp: 'true',
  includepages: true,
  onComplete: function (results) {
    if ($('.search-field').prop('value')) {
      $('.my-search-area').show();
      $('.my-display-area').hide();
    } else {
      $('.my-search-area').hide();
      $('.my-display-area').show();
    }
  },
});

For a complete overview of the options you can check ghostHunter readme.

If you modified your theme locally you should save the changes and upload the theme using the Ghost admin panel and the search functionality should work.

If you have any questions, comment below or contact us via mail.

推荐订阅源

Example blog