%

Hugo Search : un moteur de recherche interne (JQueryUI Autocomplete)

Article publié, le et modifié le
3 minutes de lecture

Cet article contient 622 mots.
Source brute de l'article :
Commit version : 5ed7c38

Description

Intégrer une fonction de recherche au sein du site généré par Hugo peut se faire de différentes manières.

On va implémenter une manière très simple avec JQuery+UI, et cela nous prendra vraiment très peu de temps.

Étant donné qu’on peut parcourir l’ensemble des pages du site grâce à la variable globale site.Pages, on va se servir du mécanisme de la méthode autocomplete() fournie par la bibliothèque JQueryUI, pour restituer les différents résultats selon le texte écrit.

Bien sûr, j’assume le fait que vous savez intégrer les appels de scripts JQuery et JQueryUI au sein de votre propre site.

Codes

JQueryUI

Pour la partie JQuery, nous utilisons la gestion des événements de la méthode autocomplete(), à la différence près est que la variable projects va être implémentée par le biais de la fonction Hugo range.

Le code JQuery :

<script>
$(function() {
    var projects = [
        {{- range site.Pages -}}
            {{- $url := .RelPermalink -}}
            {{- $title := .LinkTitle -}}
        {
            value: "{{ $title }}",
			label: "{{- if eq $url $baseURL }}{{ site.Params.description }}{{ else if in $url "tags" }}{{- T "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 );
			$("#replyer").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>

HTML

Quant à la partie HTML, elle est très simple ; il faut à minima les deux éléments input suivants :

<input class="form-control" id="search" placeholder="{{ T "searchHolderTitle" }}">
<input aria-hidden="true" id="replyer" class="hidden">
  • Le premier élément input est celui qui “capte” le texte recherché
  • le second va permettre de retourner les informations trouvées.
  • La déclaration Hugo {{ i18n "searchHolderTitle" }} est juste pour le contexte multilangue de ce site ; à remplacer par du texte selon votre goût…

Que vous faites suivre du code Hugo puis du code JQuery

TL;DR

L’ensemble du code :

<div id="search">
    <input class="form-control" id="search" placeholder="{{ T "searchHolderTitle" }}">
    <input aria-hidden="true" id="replyer" class="hidden">
    {{- $baseURL := site.BaseURL | absLangURL -}}
    <!-- Javascript -->
<script>
$(function() {
    var projects = [
        {{- range site.Pages -}}
            {{- $url := .RelPermalink -}}
            {{- $title := .LinkTitle -}}
        {
            value: "{{ $title }}",
			label: "{{- if eq $url $baseURL }}{{ site.Params.description }}{{ else if in $url "tags" }}{{- T "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 );
			$("#replyer").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>
</div>

Et, voilà ! En quelques minutes, un “moteur de recherche” interne intégré à votre site Hugo.

Démonstration

Pour ce qui est de la démonstration, c’est ce qu’il y a dans le menu, en haut à droite de chacune des pages du site.

Documentations