GhostHunter is one of the most popular ghost search engine scripts. You can easily add custom search compatibility to your theme by using this. Here are the step-by-step guidelines to use in your custom theme :

We may divide our tutorial into five parts :

  1. Add Javascript Files

  2. Complete the HTML Markup for Search Box

  3. Activate GhostHunter by Custom JS

  4. Complete the Ghost Content API

  5. Configure Your Search From Dashboard

Add Javascript Files :

At first, call GhostHunter & ContentAPI js file inside your theme default.hbs.
Here is the example of default.hbs code :

<script src="{{asset "js/jquery.ghosthunter.js"}} type='text/javascript'/>
<script src="https://unpkg.com/@tryghost/[email protected]/umd/content-api.min.js" type='text/javascript'/>

or If you are using the theme from themeix then you should add that inside of gulpfile.js

'./node_modules/@tryghost/content-api/umd/content-api.min.js',
'./assets/js/jquery.ghosthunter.js',

[Note: Make sure you added @tryghost/content-api in your package.json file]

Here is the example of a demo search box,

<form action="#" id="gh-search-input" method="get" target="_top">
<input id="search-text" name="q" placeholder="Search Here" type="text" />
<button id="search-button" type="submit">
<span><i class="fa fa-search"></i></span>
</button>
</form>
<div id="gh-search-results"></div> // Results will show there

You can add your own markup there but keep remember, you just need to add a div for search results. In the above code we added #gh-search-results

Activate GhostHunter by Custom JS

Add theme option code at the top of your app.js


// ================================
// Theme Options
// ================================
if (typeof themeConfig == "undefined") {
  themeConfig = {};
}

var ghosthunter_key = themeConfig.ghostSearchKey;

and the following code for search template

// ================================
// Search
// ================================
var searchHint = '';
if (typeof themeConfig.searchHint !== 'undefined' && themeConfig.searchHint != '') {
$('#gh-search-input').attr('placeholder', themeConfig.searchHint);
}

var includeBodyInSearch = true;
if (typeof themeConfig.includeBodyInSearch !== 'undefined' && themeConfig.includeBodyInSearch != '' && typeof themeConfig.includeBodyInSearch === "boolean") {
includeBodyInSearch = themeConfig.includeBodyInSearch;
}

var searchField = $('#gh-search-input').ghostHunter({
results: '#gh-search-results',
onKeyUp: true,
displaySearchInfo: false,
includebodysearch: includeBodyInSearch,
info_template : "<p class='search-result-info'>Posts found: {{amount}}</p>",
result_template: "<a id="gh-id-{{ref}}" class="gh-search-item" href="{{link}}"></a><h2 class="search-post-title">{{title}}</h2><h6 class="search-post-link">{{link}}</h6>",
onComplete: function(results) {
$('#gh-search-results').fadeIn();
}
});

$(document).keyup(function(e) {
if (e.keyCode === 27) {
searchField.clear();
$('#gh-search-input').val('').blur();
$('#gh-search-results').fadeOut();
}
});

You can add your own markup for the result template.

Complete the Ghost Content API

You can generate a new Content API Key by using the following steps :

Create a content Key for Ghost CMS

1. From Ghost Admin Dashboard click on Integrations
2. And then click add custom integration

3. Write any name for that custom integration and then click Create
4. Now the key will be generate, just hover over it and copy the code.

Configure Your Search From Dashboard

Now open your ghost dashboard and then go to the Code Injection area. Paste the following code there and replace with your own content key. You can change the other settings as well from there.


<script>
var themeConfig = {
ghostSearchKey: 'xxxxxxx',
includeBodyInSearch: true,
searchHint: 'Enter your search terms...’,
};
</script>

In the above code ghostSearchKey is actually your ghost content key. includeBodyInSearch is a option to set true and false value for body content search option enabled or disabled. searchHint is a option to add your custom search box placeholder.

If you have any question regarding ghost search, you may feel free contact us or create a support ticket https://support.themeix.com