%

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

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

Cet article contient 736 mots.
Source brute de l'article :

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 .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

Hugo

Pour récupèrer les pages en codant Hugo :

Code : hugo

{{- $currentNode := . -}}
{{- $currentNode.Scratch.Set "pages" .Site.Pages -}}
{{- $pages := ($currentNode.Scratch.Get "pages") -}}

Nous créeons une variable $pages qui contient l’ensemble des pages du site, que nous allons inclure dans le code JQuery.

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 var projects va être implémentée par le biais de la fonction Hugo range appliquée sur la variable $pages.

Le code JQuery :

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

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

Code : html

<input id="search" class="form-control" placeholder="{{ i18n "searchHolderTitle" }}">
<input id="replyer" type="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 :

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>

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

Les plus attentifs remarqueront de subtiles différences entre ce code entier et les explications ci-dessus…
Je vous laisse chercher ! ;-)

Pour ce qui est de la démonstration, c’est ce qu’il y avait sur la page d’accueil de ce site.
Maintenant, c’est la version appelant le flux de syndication JSON qui fonctionne. (cf : Hugo Search : un moteur de recherche interne (JQueryUI: Autocomplete + JSON) !

Documentations