Wooster by CheckmyWebsite : Rechercher dans un site statique
jeudi 10 avril 2014 à 09:30Quelques soient les raisons qui peuvent pousser à opter pour un site statique, on se retrouve tôt ou tard à devoir implémenter une fonction de recherche. Que ce soit pour rechercher dans une documentation ou dans les archives d’un blog, cette fonctionnalité est un incontournable.
Ce qui est une évidence pour un site « à bases de données » devient plus compliqué qu’il n’y paraît pour un site statique. D’où mon intérêt pour cette solution entièrement construite avec Javascript qui ne demande aucun traitement côté serveur. Elle s’appuie notamment sur Lunr.js.
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: 3stopwords.txtest le nom d’un fichier contenant les mots à exclure de l’index.min_lengthest 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 src="/assets/js/search/mustache.js" type="text/javascript" charset="utf-8">
<script src="/assets/js/search/date.format.js" type="text/javascript" charset="utf-8">
<script src="/assets/js/search/URI.js" type="text/javascript" charset="utf-8">
<script src="/assets/js/search/jquery.lunr.search.js" type="text/javascript" charset="utf-8">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
La recherche vous permet de retrouver n’importe quel mot contenu dans une des pages ou articles de Wooster.
- La section permettant d’afficher les résultats
- Un template
mustache.jspermettant de formatter les résultats trouvés
{\\% raw %}
<script id="search-results-template" type="text/mustache">
{\\% 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'
});
});
});
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 !
Original post of Wooster by CheckmyWebsite.Votez pour ce billet sur Planet Libre.
