Rechercher dans un site statique

jekyll-lunr-js-search

jekyll-lunr-js-search est un ensemble de scripts permettant d’implémenter une fonction de recherche dans un site Jekyll.

Le premier élément est un plugin pour Jekyll nommé jekyll_lunr_js_search.rb. Comme tous les plugins Jekyll, il va dans le dossier _plugins de votre projet. Il va générer à la construction du site un fichier search.json à la racine du site dans lequel se trouve tout le contenu indexé.

Pour que ce plugin fonctionne et qu’il ne casse la construction du site, il faut impérativement ajouter ceci à votre fichier de configuration _config.yml.

lunr_search:
  stopwords: "stopwords.txt"
  min_length: 3

• stopwords.txt est le nom d’un fichier contenant les mots à exclure de l’index.
• min_length est le nombre de caractères minimum qu’un mot doit contenir pour être indexé.

Il faut ensuite appeler l’ensemble des scripts Javascript nécessaires. L’exemple donné ci-dessous implique que vous ayez déjà chargé JQuery avant.

<script src="/assets/js/search/lunr.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/assets/js/search/mustache.js" type="text/javascript" charset="utf-8"></script>
<script src="/assets/js/search/date.format.js" type="text/javascript" charset="utf-8"></script>
<script src="/assets/js/search/URI.js" type="text/javascript" charset="utf-8"></script>
<script src="/assets/js/search/jquery.lunr.search.js" type="text/javascript" charset="utf-8"></script>

Tous ces scripts sont disponibles sur ou depuis le dépôt du projet.

Placer le code HTML nécessaire là ou vous souhaitez avoir un formulaire de recherche. Ce code contient trois parties distinctes :

• Le formulaire de recherche

<div id="search" class="text-center">
    <p>La recherche vous permet de retrouver n’importe quel mot contenu dans une des pages ou articles de Wooster.</p>
        <input type="text" id="search-query" class="search-query" name="q" placeholder="Saisir un mot-clé" autocomplete="off">
</div>

• La section permettant d’afficher les résultats

<section id="search-results">
    <div class="entries">
    </div>
</section>

• Un template mustache.js permettant de formatter les résultats trouvés

{\\% raw %}
    <script id="search-results-template" type="text/mustache">
        
            <article>
                <h3><small><time datetime="" pubdate></time></small><a href=""></a></h3>
            </article>
        
    </script>
{\\% endraw %}

À noter la balise {\\% raw %} qui permet de ne pas faire interpréter cette partie par Liquid, le moteur de template de Jekyll. Enlevez l’\\ pour utiliser ce template.

Ne reste plus qu’à placer l’appel Javascript dans la page recevant le formulaire de recherche.

<script>
$(function() {
    $('#search-query').one('focus', function() {  
        $(this).lunrSearch({
            indexUrl: '/search.json',
            results:  '#search-results',
            entries:  '.entries',
            template: '#search-results-template'
        });
    });
});
</script>

Une petite astuce que m’a fourni William permet de ne charger le fichier d’index qu’au moment où l’internaute clique dans la case de recherche.

Il est possible d’exclure facilement des pages de l’index en ajoutant exclude_from_search: true dans l’en-tête YAML des pages à exclure.

Limites de cette recherche

C’est pas mal de scripts à charger, et même si l’ensemble ne pèse pas trop lourd, la solution embarque son moteur de template, son formatage des dates… Tout ceci peut s’avérer redondant avec ce que vous avez déjà sur votre site.

Le navigateur charge l’index et si votre site contient beaucoup de contenu, celui-ci peut devenir conséquent. Sur Wooster, à date de parution de ce billet, le fichier pèse 255 KO pour l’ensemble des documentations et articles disponibles.

Cette fonction de recherche n’en reste pas moins efficace et nous avons décidé de commencer à l’utiliser sur Wooster, même si elle est un peu cachée pour le moment !