Ghost-search: Our First Open Source Library for Ghost

Marketplace
19

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 :100:

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 :face_with_monocle:

For more Example :blush:

2 Likes