<script src=“cdn.jsdelivr.net/npm/instantsearch.js@2.10.4/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.3.3/dist/instantsearch.min.css”> <link rel=“stylesheet” type=“text/css” href=“cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch-theme-algolia.min.css”>
<script> const search = instantsearch({
appId: '{{ site.algolia.application_id }}', apiKey: '{{ site.algolia.search_only_api_key }}', indexName: '{{ site.algolia.index_name }}', searchParameters: { restrictSearchableAttributes: [ 'title', 'content' ] }
});
const hitTemplate = function(hit) {
let date = ''; if (hit.date) { date = moment.unix(hit.date).format('MMM D, YYYY'); } const url = hit.url; const title = hit._highlightResult.title.value; const content = hit._highlightResult.html.value; return ` <div class="post-item"> <h2><a class="post-link" href="${url}">${title}</a></h2> <div class="post-snippet">${content}</div> </div> `;
}
search.addWidget(
instantsearch.widgets.searchBox({ container: '#search-searchbar', placeholder: 'Search into posts...' })
);
search.addWidget(
instantsearch.widgets.hits({ container: '#search-hits', templates: { item: hitTemplate } })
);
search.start(); </script>
<style> .ais-search-box {
max-width: 100%; margin-bottom: 15px;
} .post-item {
margin-bottom: 30px;
} .post-link .ais-Highlight {
color: #111; font-style: normal; text-decoration: underline;
} .post-snippet .ais-Highlight {
color: #2a7ae2; font-style: normal; font-weight: bold;
} </style>