After creating the searchinghost library, I felt something was missing for non-developper and non-designer people. I though it would be great to have a solution that any Ghost user could install on its own blog. That’s why I decided to start a brand new project…
SearchinGhostEASY helps you to install a search bar by only using the Ghost administration interface, zero code needed! It is a convinent, real quick and super easy way to install a search bar to your blog. No need to worry about theme design, it comes with everything built-in and works with all Ghost themes (casper, massively, nubia, …).
How to install it ? Follow these 3 steps and you are done!
If you have any question, remark or improvement that comes into your mind, please let me know in the comments
This is awesome! Got search up and running in no time and looks great!
Using Casper theme 3.0.12
Injected a search icon with searchinghost-easy as href in the code injection panel - instead of modifying the hbs.
The only issue is that on mobile the menu stops scrolling (horizontally) - on both Safari and Firefox for mobile. On one instance, scrolling actually became unresponsive across the entire page.
Hi @danhi, thank you for the review! I did not notice for the scrolling issue on mobile, I will check that today or tomorrow.
About the injection of icon (instead of a word), could you explain me how you did that to report this in the README? (please send me a PM so we can talk about it)
The issue found by @danhi is now solved, it was only impacting iOS devices.
To fix it, you can update the version used in the URL with ‘1.0.2’ or simply remove the version reference to always be up to date. Everything is described in the README.
Thank to @danhi, I also added information in the Q&A section to explain how to easily use a search icon using jQuery.
I anyone else found a bug or something to improve, please leave a comment!
even though the instructions are described in great detail, something is not working for me. I have just set up a Ghost Blog and it works as expected. ( OS: CentOS Linux, v7
Node Version: v10.20.1
Ghost version: 3.22.1
Ghost CLI version: 1.14.1)
I then set up the search function. The sourcecode is also delivered with the page, but no search field is displayed. What is the easiest way to narrow down the error?
If I check source code at Safari browser it says : ReferenceError: Can’t find variable: SearchinGhostEasy
Finally, add a link in the menu that open the search box. To do so, go to the “Design” section and add a new item. It can be in the “navigation” or “secondary navigation”. You can name it with any label (“Search” feels natural) but the link must ends with #searchinghost-easy . Click on “save”.
I went on your website to find a potential issue. Good news, your SearchinGhostEASY installation is OK and should/will work! I manage to make it work, here is the screenshot:
Your issue comes from another JS script/plugins, probably the “cookie policy checking” thing. If you look carefully at the errors, even the jQuery object (i.e. $) is not defined on your page! (tested on Chrome with a default configuration)
If I were you, first, I would comment/remove that line from your section: <script src="https://cmp.osano.com/AzyvvoS3fxVKu3vwM/56b53a80-b02c-4004-b9eb-dec8f5f15ec3/osano.js"></script>
Thank you so much! You are right, it works without the Cookie Plugin. Also Disqus works now.
I am very happy that SearchinGhostEasy works well, i will check for another GDPR solution regarding cookies.
If you would like to change the default search bar “Search” placeholder, it is now possible. I added a new “placeholder” option that allows you to set it to what ever you like.
I will update the documentation, maybe it wasn’t clear enough: you should NOT use these scripts in the <head> section. You must place them at the end of the <body>. That’s why we inject these lines into the “Ghost footer” instead of the “Ghost header”.
The reason is pretty straightforward: the anchor links must already be defined at launch time because we add them some Javascript event listeners
Here is a working example (using the default Casper API):
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#searchinghost-easy">A link to open search</a><br>
<a href="#searchinghost-easy">A second one that works exactly the same way!</a>
<script src="https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-backpack.js"></script>
<script>
new SearchinGhostEasy({
contentApiKey: '22444f78447824223cefc48062',
apiUrl: 'https://demo.ghost.io'
});
</script>
</body>
</html>
