%

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

Comment intégrer un moteur de recherche dans Hugo, avec JQuery UI autocomplete()

Détails relatifs à l'article

Article publié, le
et modifié le
3 minutes de lecture
Cet article contient 622 mots.

Identifiant de l'article : tag:doc.huc.fr.eu.org,2019-12-06:/fr/web/hugo/hugo-search-jqueryui-autocomplete

Source brute de l'article :
Commit version : 9bf3d7b

Cet article est aussi disponible sur le protocole Gemini :
gemini://gmi.it-log.fr.eu.org/fr/web/hugo/hugo-search-jqueryui-autocomplete.gmi

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

Enjoy-ID!
Enjoy-IT!