Here's a helpful npm package I made. This addon allows you to easily and sweetly incorporate search features into your ghost theme. It operates using the Ghost Content API.
npm install ghost-finder
Include script
<script src="{{asset "ghost-finder/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
new GhostFinder({ input: '#search-input', showResult: '#search-result', contentApiKey: //CONTENT API KEY..., })To see how you can get contentApiKey , Click Here
| 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 | 250 | word count to show in ##excerpt variable |
| time_format | 'MMMM dd yyyy' | Time format string for ##published_at variable. Available formats |
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>| Field 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 |
- 3.1.0 - Search on content along with title, Replace laravel-mix with parcel