{% if site.algolia %} <!– Including InstantSearch.js library and styling –> <script src=“cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.js”>> <script src=“cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js”>> <link rel=“stylesheet” type=“text/css” href=“cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.css”> <link rel=“stylesheet” type=“text/css” href=“cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch-theme-algolia.min.css”>
<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 }}'
});
const hitTemplate = function(hit) {
let date = ''; if (hit.date) { date = moment.unix(hit.date).format('MMM D, YYYY'); } let url = `{{ site.baseurl }}${hit.url}#${hit.anchor}`; const title = hit._highlightResult.html && 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(' > ') } const content = hit._highlightResult.html && hit._highlightResult.html.value; return ` <div class="post-item"> <h3 class="uk-heading-line post-link""><a class="uk-link-text" href="${url}">${title}</a></h3> <span uk-icon="calendar"></span> <span class="uk-article-meta post-meta">${date}</span><br> {{#breadcrumbs}}<a href="${url}" class="post-breadcrumbs">${breadcrumbs}</a>{{/breadcrumbs}}<br> <div class="content"> <div class="post-snippet">${content}</div> </div> </div> `;
}
search.addWidget(
instantsearch.widgets.searchBox({ container: '#search-searchbar', placeholder: 'Search your feelings...', 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.start(); </script>
<style> .ais-search-box {
max-width: 98%; margin-bottom: 15px; font-size: 16px;
} .post-item {
margin-bottom: 30px;
} .post-link .ais-Highlight {
color: #1e87f0; font-style: normal; text-decoration: underline;
} .post-breadcrumbs {
padding-top: 15px; color: #424242; display: block;
} .post-breadcrumb {
font-size: 18px; color: #424242;
} .post-breadcrumb .ais-Highlight {
color: #1e87f0; font-weight: bold; font-style: normal;
} .post-snippet .ais-Highlight {
color: #1e87f0; font-style: normal; font-weight: bold;
} .post-snippet img {
display: none;
} </style> {% endif %}