datat.fi/_includes/search/algolia-search-scripts.html

53 lines
1.6 KiB
HTML
Raw Permalink Normal View History

<!-- Including InstantSearch.js library and styling -->
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch-theme-algolia.min.css">
<script>
// Instanciating InstantSearch.js with Algolia credentials
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) {
const url = hit.url;
const title = hit._highlightResult.title.value;
const content = hit._highlightResult.html.value;
return `
<article class="entry">
<h3 class="entry-title"><a href="{{ site.baseurl }}${url}">${title}</a></h3>
<div class="entry-excerpt">${content}</div>
</article>
`;
}
// Adding searchbar and results widgets
search.addWidget(
instantsearch.widgets.searchBox({
container: '.search-searchbar',
{% unless site.algolia.powered_by == false %}poweredBy: true,{% endunless %}
placeholder: '{{ site.data.theme.t.search_placeholder_text | default: "Enter your search term..." }}'
})
);
search.addWidget(
instantsearch.widgets.hits({
container: '.search-hits',
templates: {
item: hitTemplate
}
})
);
// Starting the search
search.start();
</script>