3 minute(s) to read
This article has 562 words.
RAW source of the article: MD
Description
Adding a function search
into static website made with Hugo can be done in differents ways.
We will code this simply with JQuery+UI, in few minutes.
We will use the Hugo .Site.Pages
variable, and the JQueryUI autocomplete()
method.
I assume you known how to add correctly the both JQuery and JQueryUI librairies on your site.
Codes
Hugo
To obtain all pages:
Code: hugo
{{- $currentNode := . -}}
{{- $currentNode.Scratch.Set "pages" .Site.Pages -}}
{{- $pages := ($currentNode.Scratch.Get "pages") -}}
We create a $pages
variable that contains all pages informations of the
site. Now, we include it into the code JQuery:
JQueryUI
As explain into the description section, we use the events of the method autocomplete()
.
We build the $projects
variable to iterate over the Hugo $pages
variable
with the Hugo range
function.
The JQuery code:
Code: javascript
$(function() {
var projects = [
{{- range $pages -}}
{{- $url := .Permalink | safeURL -}}
{{- $title := safeHTML .Title -}}
{
value: "{{ $title }}",
label: "{{ $title }}",
url:"{{ $url }}"
},
{{- end -}}
];
$( "#search" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#search" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#search" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
return false;
}
})
.data('ui-autocomplete')._renderItem = function(ul, item) {
return $('<li>')
.append('<a href="' + item.url + '" alt="'+ item.label + '">' + item.value + '</a>' )
.appendTo(ul);
};
});
HTML
And for the simplest code HTML, we use two elements input
as:
Code: html
<input id="search" class="form-control" placeholder="{{ i18n "searchHolderTitle" }}">
<input id="replyer" type="hidden">
- the first catch the searched text
- the second return all found titles, and in the background the equivalent URL.
- the syntax
{{ i18n "searchHolderTitle" }}
exists for the multilanguage context on this website; You can replace with your personal text.
TL;DR
The fully code:
Code: html
<div class="">
<input id="search" class="form-control" placeholder="{{ i18n "searchHolderTitle" }}">
<input id="search-return" type="hidden">
{{- $currentNode := . -}}
{{- $currentNode.Scratch.Set "pages" .Site.Pages -}}
{{- $pages := ($currentNode.Scratch.Get "pages") -}}
{{- $baseURL := (printf "%s%s/" $.Site.BaseURL $.Site.Language.Lang) | absLangURL -}}
<!-- Javascript -->
<script>
$(function() {
var projects = [
{{- range $pages -}}
{{- $url := .Permalink | safeURL -}}
{{- $title := safeHTML .Title -}}
{
value: "{{ $title }}",
label: "{{- if eq $url $baseURL }}{{ .Site.Params.description }}{{ else if in $url "tags" }}{{- i18n "pageListTitle" }}{{ $title }}{{ else }}{{- safeHTML .Params.description -}}{{ end -}}",
url:"{{ $url }}"
},
{{- end -}}
];
$( "#search" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#search" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#search" ).val( ui.item.label );
$( "#search-return" ).val( ui.item.value );
return false;
}
})
.data('ui-autocomplete')._renderItem = function(ul, item) {
return $('<li>')
.append('<a href="' + item.url + '" alt="'+ item.label + '">' + item.value + '</a>' )
.appendTo(ul);
};
});
</script>
<hr>
</div>
Voilà !
In few minutes, an “internal search engine” is born on your static website Hugo.
Actually, on the homepage, it’s this modified code running…
Documentation
- Hugo Documentation: Tools > Search
- Hugo Documentation: Functions > Range
- Hugo Documentation: Functions > I18n
Others Documentations
- Inspired by Dot theme - (cf : banner.html)
- JQuery UI
autocomplete()
method: https://jqueryui.com/autocomplete - More explains about JQueryUI
Autocomplete()
method: See the documentation - Another method to build internal search engine, with VueJS + Axios librairies