Ghost Search

This article explains how to add search functionality to a Ghost blog.

Ghost Search

Fulltext Search Functionality can be added to Ghost using the Ghost Search plugin from HauntedThemes.

Setup the Content API Client Library

To get the latest version of the Ghost Content API Client Library, simply inject the following into the header:

<script src="https://unpkg.com/@tryghost/content-api@{version}/umd/content-api.min.js"></script>

To add the Ghost-Search plugin to a theme, copy the ghost-search.min.js to the assets/js subdirectory of the theme in question. Then open the default.hbs file of the theme and add the following code to load the javascript file into each page.

<script type="text/javascript" src="{{asset "js/ghost-search.min.js"}}"></script>

Once done, create a new ghost-search.hbs-file, to specify the actual search page. In that file, at least an input field and a result div should be created:

<input id="ghost-search-field">
<div id="ghost-search-results"></div>

Finally, to initialize the Ghost-Search plugin, the following script must be added:

<script>
    let ghostSearch = new GhostSearch({
        key: 'yourKey',
        url: 'https://bell0bytes.eu',
    })
</script>

Getting an API Key

To use the search functionality, an API key must be generated.

  1. In the Admin Dashboard, navigate to the Integrations Tab.
  2. Click on the Add custom integration button at the bottom of the screen.
  3. Enter any name for the integration, i.e. Ghost Search.
  4. Click save and copy the Content API key.
  5. Paste the key into the above script, where it says yourKey, or, alternatively, create a api-key.hbs file in the partials folder and paste the key in there. Then load the api-key.hbs into the ghost-search.hbs or default.hbs file:
<script>var apiKey = "{{>api_key}}";</script>
<script src="{{asset "js/ghost-search.min.js"}}"></script>

Reload Ghost and enjoy the new search functionality.

ghost restart

(Optional) World-Times

This blog uses the world times theme. To enable search functionality in this time,
it is enough to get an API key and to set it in the api-key.hbs file in the partials folder of the theme.

Just make sure that there is no endline character at the end of the line: vim actually always adds such a character unless the :set nofixeol and :set noeol options are specified.

DomException

Unfortunately, I have not yet been able to find a solution to the following problem, which occurs when doing a fulltext search through too many posts, as the browser can only store files of a limited size.

Unable to fetch Ghost data. DOMException: The quota has been exceeded.

Comments