Hopefully the Ghost team will stop kicking the ball down the road and implement a standard search feature into the core product. Until that day comes, we are left to implement something ourselves. I spent today researching some options and have come across four. All of them are well documented in other places. I only wish to give an overview of what's available, of what I've found during my research today.
Make sure to first read this thread on the Ghost forum.
- Add google custom search: this is actually a good solution even if the end result is pretty...ugly. By this I mean that the search results will appear Google-style and will not match your blog theme. But in terms of practicality (such as the relevancy of results) it should give possibly the best results.
→ Adding Search to Ghost on GhostForBeginners.com - Integrate ElasticSearch (or some other server-side search library): this is the most complicated path to take. Since the search happens on the server-side, for large blogs this is the only performant solution.
→ Intégrez ElasticSearch comme moteur de recherche à votre site Internet - Make use of a JavaScript-based solution. These basically download all of your posts to the user's browser and perform the search there. If you want to enable searching through your post contents, not just your post titles, then this approach can lead to issues once you have a lot of blog posts. I've found three such libraries
- Ghost Finder: this is the newest of the three, first published to GitHub in October 2019. It also has the fewest stars/commits, but maybe that's just because it's the newest.
→ Add search option to ghost theme
→ How to Add search option on ghost theme - HauntedThemes/ghost-search: this is the second-newest, published on September 2018. It is the search used in the Zvikov theme. It is an improvement on the original search library for Ghost below. Instead of lunr.js, it uses fuzzysort. I've implemented this theme in my blog, however, I occasionally ran into issues with search phrases that were over 6-7 characters long. The browser would freeze for 12-16 seconds.
→ ghost-search: Our First Open Source Library for Ghost - jamalneufeld/ghostHunter: this is the oldest library with the most stars and commits. However, as I found out, it is not at all easy to work with.
→ How to Add Search to Ghost Using ghostHunter
→ How to add GhostHunter Custom Search in Ghost Theme
→ How to Add Search to Ghost Using GhostHunter - There are other options as well, such as integrating algolia search.
Lessons learned installing ghostHunter:
(1) When setting the item_preprocessor option, make sure to remove your local storage database. The plugin stores your blog data in this database, and this cache needs to be flushed for your modified item_preprocessor to take effect:
When writing your item_preprocessor (or setting a custom result_template), your given "item" will have the following attributes (as an example):
id: "5e374af63367d2080152c2a6"
uuid: "ac2f3f41-ed41-474a-a7f9-fcbf60882dab"
title: "Debugging with Visual Studio: Step into .Net Source Code"
slug: "debugging-with-visual-studio-step-into-net-source-code"
comment_id: "5e374af63367d2080152c2a6"
plaintext: "Have you ever needed to step into .Net code? Unfortunately doing so can be a↵real pain. Supposedly setting your debug options (Options → Debugging, "Enable↵.NET Framework source stepping" and "Enable source server support") and using↵"Microsoft Symbol Servers" (Options → Debugging → Symbols) should "just work".↵Except when it doesn't. For example if you've installed any windows updates that↵have overwritten your .Net framework files. Or if Visual Studio just doesn't↵feel like it. ↵↵JetBrains dotPeek to the rescue! I've tried other methods but this was the only↵one that worked for me. This is a free piece of software that decompiles the↵files on your computer during runtime, spins up a symbol server on your machine,↵and serves the decompiled source code to your Visual Studio. It "just works"!↵↵(1) Download JetBrains dotPeek [https://www.jetbrains.com/decompiler/] and run↵it↵↵Set Tools → Options as follows:↵↵Use the copy to clipboard link to copy your local debug URL...."
feature_image: null
featured: false
created_at: "2020-02-02T23:19:34.000+01:00"
updated_at: "2020-02-03T10:56:30.000+01:00"
published_at: "2020-02-02T23:34:32.000+01:00"
custom_excerpt: null
codeinjection_head: null
codeinjection_foot: null
custom_template: null
canonical_url: null
tags: Array(5)
0: {id: "5cf7c2999d2bd50861ccf35d", name: "WPF", slug: "wpf", description: null, feature_image: null, …}
1: {id: "5cf7c2999d2bd50861ccf35f", name: "ClickOnce Apps", slug: "clickonce-apps", description: null, feature_image: null, …}
2: {id: "5e374e783367d2080152c2da", name: "Visual Studio", slug: "visual-studio", description: null, feature_image: null, …}
3: {id: "5cf7c2999d2bd50861ccf35e", name: ".Net Framework", slug: "net-framework", description: null, feature_image: null, …}
4: {id: "5e374e783367d2080152c2db", name: "C#", slug: "c", description: null, feature_image: null, …}
length: 5
__proto__: Array(0)
primary_author: null
primary_tag: {id: "5cf7c2999d2bd50861ccf35d", name: "WPF", slug: "wpf", description: null, feature_image: null, …}
url: "https://kb.zensoft.hu/debugging-with-visual-studio-step-into-net-source-code/"
page: false
excerpt: "Have you ever needed to step into .Net code? Unfortunately doing so can be a↵real pain. Supposedly setting your debug options (Options → Debugging, "Enable↵.NET Framework source stepping" and "Enable source server support") and using↵"Microsoft Symbol Servers" (Options → Debugging → Symbols) should "just work".↵Except when it doesn't. For example if you've installed any windows updates that↵have overwritten your .Net framework files. Or if Visual Studio just doesn't↵feel like it. ↵↵JetBrains dot"
og_image: null
og_title: null
og_description: null
twitter_image: null
twitter_title: null
twitter_description: null
meta_title: null
meta_description: ""
(2) The documentation says to instantiate your ghostHunter, but it doesn't note that this must not be done in any of your .hbs pages, because then Ghost will throw an error (link is a twig function) and it won't work even if you fix that error. So, make sure to put your intantiation code in a separate .js file somewhere.
Here's mine:
(function($) {
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
$("#search-field").ghostHunter({
results: "#results",
onKeyUp: true,
includebodysearch: true,
item_preprocessor: function(item) {
var ret = {};
var dateSplit = item.updated_at.split('T');
dateSplit = dateSplit[0].split('-');
var month = monthNames[dateSplit[1]-1];
var date = moment(dateSplit[2]+'-'+month+'-'+dateSplit[1], "DD-MM-YYYY").format('DD MMM YYYY');
ret.prettyDate = date;
ret.tag = item.primary_tag ? item.primary_tag.name : "";
return ret;
},
result_template: "<div id='gh-{{ref}}' class='gh-search-item'><h5>{{tag}}</h5><ul class='list-box'><li><time>{{prettyDate}}</time><a href='{{link}}'>{{title}}</a></li></ul></div>"
});
})(jQuery);
