Ghost Finder - The most advanced ghost search plugin

Marketplace
1

image
image1280×720 71.8 KB

Hello guys, I made this search plugin for the ghost theme developer community

Ghost Finder

Installation

Include script

<script src="{{asset "ghost-search/dist/ghost-finder.js"}}"></script>

Setup markup

<div>
    <input id="search-input" type="text" placeholder="Type to search" />
    <div id="search-result"></div>
</div>

Activate the plugin

<script>
    new GhostFinder({
        input: '#search-input',
        showResult: '#search-result',
        contentApiKey: //CONTENT API KEY...,
    })
</script>

To see how you can get contentApiKey , Click Here

Options

Name Default Value Details
input null Required DOM selector of search input
showResult null Required DOM selector where search result will be pluged-in
homeUrl current website url Your ghost site url
contentApiKey null Required content api key
resultTemplate see bellow Result wrapper template for search result
singleResultTemplate see bellow Single search result template
excerpt_length 15 word count to show in ##excerpt variable
time_format 'MMMM Do YYYY' Time format string for ##published_at variable

Default templates

Result Template

<ul class="search-results-wrapper">
    <p>Search match(es): ##resultCount</p>
    ##results
</ul>

Single Result Template

<li><a href="##url">##title</a></li>

Variables

Variable Name Purpose
##title Post title
##url Post url
##primary_tag_name Name of primary tag
##primary_tag_url Url of primary tag
##primary_author_name Name of primary author
##primary_author_url Profile url of primary author
##primary_author_avater Profile photo of primary author
##excerpt show some words of the post content. Default words count is 15
##published_at Post publication date. Format can be change by time_format option
##feature_image Post featured image url
##resultCount Matched result count
6 Likes
2

Sounds good. But is there any demo or pictures/gifs of the work?

1 Like
3

We used this in our theme → http://delas.electronthemes-ghost.com/
In this theme for search result we only used ##title and ##excerpt variable.
You can use also these variables

Variable Name Purpose
##title Post title
##url Post url
##primary_tag_name Name of primary tag
##primary_tag_url Url of primary tag
##primary_author_name Name of primary author
##primary_author_url Profile url of primary author
##primary_author_avater Profile photo of primary author
##excerpt show some words of the post content. Default words count is 15
##published_at Post publication date. Format can be change by time_format option
##feature_image Post featured image url
##resultCount Matched result count
4

Amazing stuff. Thank you!
The content API-key will be different for local dev instance and production, yes?
How do you approach this?
Run locally with the production API search, or replace it after deploy, or…

5

Use the plugin file from dist

6

Is it possible to filter the search results to display from a specific tag?

7

After adding CSS. It stops working. Means results are not displaying.

8

Hi I’m getting this error:

ghost-finder.js?v=bcdabca04f:23355 Uncaught TypeError: Cannot read property 'addEventListener' of null
at new GhostFinder (ghost-finder.js?v=bcdabca04f:23355)

Any ideas?!
Thanks

9

Awesome work, Thanks!
I will use it to my next theme

10

Not sure if you fixed it, but how I’ve set it up is as follows:

  1. Go to his Github and download the file as a zip.

  2. Extract the files, and only take “ghost-finder.js” from the /dist folder.

  3. It is recommended that you minify this file to improve page loading speeds.

  4. Download your theme from the Ghost admin interface.

  5. Place the minified file above into your theme’s /assets/js folder.

  6. In your theme files, determine where you want to add the search bar. For this example, let’s say you want to add it under your home page, index.js.

  7. Open up index.js in your themes folder (or whichever page) and scroll to the bottom where you will see {{#contentFor “scripts”}}

  8. You will put the javascript files call here to load the Ghost finder search.

  9. Paste the following code:

    {{!-- Load ghost search script --}}
    <script type=“text/javascript” src=“{{asset “js/ghost-finder.js”}}”>
    <script>
    new GhostFinder({
    input: ‘.search-field’,
    showResult: ‘.search-results’,
    time_format: ‘DD MMM YYYY’,
    singleResultTemplate: <a href="##url" class="search-result"> <img class="search-result-thumbnail" src="##feature_image" alt="##title"> <div class="search-result-title-container"><p class="search-result-title">##title</p></div> </a>,
    contentApiKey: YOUR API KEY HERE FROM GHOST ADMIN INTERFACE
    })
    </script>

  10. Note how we import the script first then call the new GhostFinder() instance.

  11. singleResultTemplate is your html styling for a single search result in the list. Then, you can style the other parts yourself.

  12. Insert the html:
    <div class=“search-container”>
    <input class=“search-field” type=“text” placeholder=“Search the site” autocomplete=“off”>
    <div class=“search-results”>
    </div>
    Whereever you want your serach bar to be in the same index.js page.

  13. Go wild with your CSS styling using <style></style> tags.

3 Likes