How to Install and use the Ghost search on your Ghost site?
- login to your Ghost site
- Create a New Page for Search
- Next in the Post Editor Sidebar, you can find the Code injection
- in Page Footer box Add the ghost-search library and initialize it
<script src="https://unpkg.com/@tryghost/content-api@1.3.4/umd/content-api.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ghost-search@1.1.0/dist/ghost-search.min.js" integrity="sha256-yNPbNNfIwEJkDLzw2jUIQwqvwqjDIgc9rupcm4uqFqI=" crossorigin="anonymous"></script>
<script>
let ghostSearch = new GhostSearch({
key: '22444f78447824223cefc48062', // This is just a demo key. Replace the key with a real one. See Step 3.
url: 'https://demo.ghost.io', // This is just a demo host. Replace the demo url with a real one. See Step 3.
input: '#my-custom-input',
results: '#my-custom-results',
options: {
keys: [
'title',
'plaintext'
],
},
on: {
afterDisplay: function(results) {
if (results.total == 0 && document.getElementById('my-custom-input').value != '') {
let resultsElement = document.getElementById('my-custom-results');
let e = document.createElement('p');
resultsElement.setAttribute("style", "text-align:center;");
e.innerHTML = 'No Search results';
resultsElement.appendChild(e.firstChild);
};
}
},
api: {
resource: 'posts',
parameters: {
fields: ['title', 'slug', 'plaintext'],
formats: 'plaintext',
},
},
template: function(result) {
let url = [location.protocol, '//', location.host].join('');
return '<ul><li><a href="' + url + '/' + result.slug + '/' + '">' + result.title + '</a></li></ul>';
}
})
</script>
Note:
- Replace the Default Key and URL with your’s
- That’s all successfully we installed
Example
- Add this below HTML code on the HTML Block
<input id="my-custom-input" type="text">
<div id="my-custom-results"></div>
- Save the page & test the search
For more Example