algolia_search.html

<style>
    #search-searchbar{
      width: 100%;
      text-align: center;
      margin-top: 20px;
    }

    .ais-search-box {
    margin-top: 15px;
    margin-bottom: 15px;
}

.ais-hits--item{
    float:left;
 }
 #search-container{
     width: 100%;
 }

</style>

    <script>
    /* Instanciating InstantSearch.js with Algolia credentials */
    const search = instantsearch({
      appId: '{{ site.algolia.application_id }}',
      indexName: '{{ site.algolia.index_name }}',
      apiKey: '{{ site.algolia.search_only_api_key }}'
    });

    search.addWidget(
      instantsearch.widgets.searchBox({
        container: '#search-searchbar',
        placeholder: 'Search into posts...',
        poweredBy: true
      })
    );

    search.addWidget(
      instantsearch.widgets.hits({
        container: '#search-hits',
        templates: {
          item: function(hit) {
            return `
                        <div class="card blog-post">
                            <img class="card-img-top" src="${ hit.thumbnail }" alt="${ hit.title }">
                            <div class="card-body center">
                                <img src="{{site.url}}{{site.baseurl}}/assets/img/{{ site.author_logo }}" class="author-profile-img">
                                <h4 class="card-title">${ hit.title }</h4>

                                <h6 class="card-subtitle mb-2 text-muted">${moment.unix(hit.date).format('MMM D, YYYY')}</h6>
                                <p class="card-text">${hit.summary }</p>

                                <a href="${hit.url}" data-disqus-identifier="${hit.url}" class="btn btn-primary btn-sm">Read</a>
                                <span class="disqus-comment-count" data-disqus-identifier="${ hit.url }"></span>

                            </div>
                        </div>
            `;
          }
        }
      })
    );

    search.start();

    </script>