diff options
Diffstat (limited to '_includes/search/algolia-search-scripts.html')
| -rw-r--r-- | _includes/search/algolia-search-scripts.html | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/_includes/search/algolia-search-scripts.html b/_includes/search/algolia-search-scripts.html new file mode 100644 index 0000000..a6bc9d2 --- /dev/null +++ b/_includes/search/algolia-search-scripts.html @@ -0,0 +1,54 @@ +<!-- 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" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css"> +<link rel="stylesheet" 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 ` + <div class="list__item"> + <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork"> + <h2 class="archive__item-title" itemprop="headline"><a href="{{ site.baseurl }}${url}">${title}</a></h2> + <div class="archive__item-excerpt" itemprop="description">${content}</div> + </article> + </div> + `; +} + +// 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.ui-text[site.locale].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> |
