<div id=“search-searchbar”></div> <div id=“search-hits”></div> <div id=“search-pagination”></div>
<script src=“/assets/js/instantsearch.min.js”></script> <script src=“/assets/js/moment.min.js”></script> <script>
const search = instantsearch({ appId: '{{ site.algolia.application_id }}', apiKey: '{{ site.algolia.search_only_api_key }}', indexName: '{{ site.algolia.index_name }}' }); const hitTemplate = function(hit) { let date = ''; if (hit.date) { date = moment.unix(hit.date).format('MMM D, YYYY'); } let url = `{{ site.baseurl }}${hit.url}`; let url_detail = `{{ site.baseurl }}${hit.url}#${hit.anchor}`; const title = hit._highlightResult.title.value; let breadcrumbs = ''; if (hit._highlightResult.headings) { breadcrumbs = hit._highlightResult.headings.map(match => { return `<span class="post-breadcrumb">${match.value}</span>` }).join(' > ') } let content = ""; if (hit.html) { content = hit.html; } if (hit._highlightResult.html) { content = hit._highlightResult.html.value; } return ` <ul> <li><a class="post-link" href="${url}">${title}</a> {{#breadcrumbs}}<a href="${url_detail}" class="post-breadcrumbs">${breadcrumbs}</a>{{/breadcrumbs}} ${content}</li> </ul> `; } search.addWidget( instantsearch.widgets.searchBox({ container: '#search-searchbar', autofocus: true, placeholder: 'Search...', poweredBy: true // This is required if you're on the free Community plan }) ); search.addWidget( instantsearch.widgets.hits({ container: '#search-hits', templates: { item: hitTemplate } }) ); search.addWidget( instantsearch.widgets.configure({ hitsPerPage: 5, enablePersonalization: true, }) ); search.addWidget( instantsearch.widgets.pagination({ container: '#search-pagination', }) ); search.start();
</script>