title: Roundtrip tagline: Algolia Online Search description: Using Algolia Index API for static sites
tags: [ Template, Roundtrip, Search, Engine, Algolia] index: [] categories: [ pages ]
permalink: /pages/public/start/roundtrip/search_engine/ regenerate: true
resources: [ algolia ] resource_options:
- masthead: opacity: 0.2 slides: - url: /assets/images/widescreen/featured-1920x800.jpg alt: featured-1920x800
// Enable the Liquid Preprocessor // —————————————————————————– :page-liquid:
// Set other global page attributes here // —————————————————————————–
// Liquid procedures // —————————————————————————– {% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
// Initialize entry document paths // —————————————————————————– {% include {{set_env_entry_document}} init_folders=all %}
// Load tags and urls // —————————————————————————– include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc
// Additional Asciidoc page attributes goes here // —————————————————————————–
// Include sub-documents // —————————————————————————–
The module *Site Search* is based on an Elasticsearch Index hostet at Algolia. To access the `Algolia index`, the Javascript library InstantSearch (instansearch.js) is fully integrated with J1. *Site Search* is bundled with the template like all other modules, e.g. Toccer, Header or Navigator – simple to use as only a configuration is need to make this functionality available with a site.
J1
Template integrates the `jekyll-algolia` Gem, a data collector create the search *record data* needed and push the content in an Algolia index in a single step.
Find the default search client below; packed with the *Site Search* module as well.
Algolia Site Search¶ ↑
++++
<!-- See: https://community.algolia.com/instantsearch.js/v2/getting-started.html --> <!-- CurrentRefinedValues widget --> <div id="current-refined-values"></div> <!-- ClearAll widget --> <div id="clear-all"></div> <!-- SearchBox widget --> <div id="search-searchbar" class="mb-4"> </div> <!-- HitsPerPage widget --> <!-- div id="hits-per-page-selector"></div --> <div id="searcher" class"row"> <div class="col-md-4 col-xs-6"> <!-- CurrentRefinedValues widget --> <div id="current-refined-values"></div> <!-- RefinementList widget --> <div id="refinement-list" class="limit-y"></div> </div> <div class="col-md-8 col-xs-6"> <!-- Pagination widget --> <div id="pagination"></div> <!-- Hits widget --> <ul class="list-unstyled"> <div id="search-hits" class="result-list" > <div class="result-item"></div> </div> </ul> </div> </div>
++++
++++ <style>
refinement-list {
scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */
}
refinement-list::-webkit-scrollbar {
width: 0px; /* WebKit */
}
input:focus{
outline: none;
// box-shadow: 0px 0px 5px #61C5FA;
border: 1px solid #424242;
}
input:hover {
border: 1px solid #424242; border-radius: 5px;
}
input:focus:hover{
outline: none; box-shadow: 0px 0px 5px #424242; border: 1px solid #3f51b5; border-radius:0;
}
.limit-y {
max-height: 800px; overflow-y: auto;
}
.ais-pagination {
-webkit-box-shadow: 0 !important; box-shadow: 0 !important; width: 100%;
}
.ais-refinement-list {
margin-top: 1.25rem;
}
.search-result-item {
margin-bottom: 0px;
}
.ais-search-box {
max-width: 100%;
// margin-bottom: 15px; }
.ais-search-box–input {
padding-left: 2.5rem !important;
}
.ais-search-box–magnifier {
top: 1rem !important; right: 1rem !important; left: 1rem !important;
}
.ais-search-box–reset {
top: 1rem !important; right: 1rem !important;
}
em.ais-Highlight {
font-weight: bold; /* font-size: 1.125rem; */ /* font-style: inherit; */ color: #ef2929; font-style: unset !important;
}
</style> ++++
What's next?¶ ↑
Hopefully you've enjoyed exploring all the possibilities J1
offers for managing themes. But much, much more can the J1
do for your Web Site.
This was the last place to go for the roundtrip. More details of the most common elements of Bootstrap can be found on the previewer for a theme. Have a look at the {previewer-theme}[Theme Previewer, window=“_blank”].
To make things real for your new Web, go for *Web in a Day*. This tutorial guides you through all the steps to build a Web - your Web using Jekyll
and the Template J1
. It's really a nice journey to explore and learn J1
- start with {kickstarter-web-in-a-day}[Web in a Day here, window=“_blank”]!