jekyll lunr js search
1.0.0
Utilisez lunr.js pour fournir une recherche simple en texte intégral, en utilisant JavaScript dans votre navigateur, pour votre site Web statique Jekyll.
Inspiré des plugins Jekyll + indextank de Pascal Widdershoven et Sitemap.xml Generator de Michael Levin.
Ce plugin Jekyll gère la génération d'un fichier d'index .json compatible lunr.js. La configuration de la recherche au moment de l'exécution est fournie par un simple plugin jQuery.
Il permet la recherche en texte intégral de toutes vos pages et publications Jekyll. Exécuté par le client sans aucun traitement côté serveur (en dehors de la diffusion de fichiers statiques).
Choisissez d'installer en tant que Ruby Gem ou en copiant le fichier du plugin prédéfini sur votre site Jekyll.
Installez le Ruby Gem jekyll-lunr-js-search.
gem install jekyll-lunr-js-search
Modifiez votre fichier Jekyll _config.yml pour inclure le Gem.
gems: ['jekyll-lunr-js-search']
build/jekyll_lunr_js_search.rb dans le dossier _plugins à la racine de votre site Jekyll. Le contenu de tous les articles et pages de Jekyll sera indexé dans un fichier js/index.json prêt à être consommé par lunr.js. Cela se produit à chaque fois que le site est généré.
Un plugin jQuery est fourni dans js/jquery.lunr.search.js pour gérer la configuration de lunr.js avec les données JSON d'index de recherche générées par ce plugin.
Les dépendances du plugin jQuery sont les suivantes.
Une version prédéfinie du plugin jQuery, ainsi que toutes les dépendances ci-dessus, concaténées et minifiées, sont disponibles sur build/search.min.js.
Le plugin ajoutera automatiquement le fichier JavaScript minifié js/search.min.js à votre _site .
Pour l'utiliser, vous devez ajouter une référence de script au bas de votre page de recherche désignée.
<script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>
Copiez js/jquery.lunr.search.js dans le répertoire JavaScript de votre site Jekyll.
Ajoutez une référence de script au bas de votre page de recherche désignée pour jquery.lunr.search.js et chacune des dépendances décrites ci-dessus.
<script src="/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/lunr.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/mustache.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/date.format.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/URI.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.lunr.search.js" type="text/javascript" charset="utf-8"></script>
Assurez-vous d'utiliser la même version de lunr.js que la gemme. La sortie du journal Jekyll inclut la version utilisée.
Idéalement, vous concatèneriez, réduisez et optimisez ces six fichiers .js en utilisant uglify/Google Closure/etc pour produire un seul fichier search.min.js à référencer (ou utilisez le script prédéfini comme décrit en 2a ci-dessus).
<script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>
<form action="/search" method="get">
<input type="text" id="search-query" name="q" placeholder="Search" autocomplete="off">
</form>
La recherche s'effectue au fur et à mesure que vous tapez, une fois qu'au moins trois caractères ont été saisis.
Fournir l'action du formulaire et spécifier la méthode get permet à l'utilisateur d'appuyer sur retour/entrée pour soumettre également la recherche. Modifiez l'URL d'action du formulaire si nécessaire pour la page de recherche de votre propre site.
<section id="search-results" style="display: none;"> </section>
Cela peut être initialement masqué car le plugin affichera l'élément lors de la recherche.
{% raw %}
<script id="search-results-template" type="text/mustache">
{{#entries}}
<article>
<h3>
{{#date}}<small><time datetime="{{pubdate}}" pubdate>{{displaydate}}</time></small>{{/date}}
<a href="{{url}}">{{title}}</a>
</h3>
{{#is_post}}
<ul>
{{#tags}}<li>{{.}} </li>{{/tags}}
</ul>
{{/is_post}}
</article>
{{/entries}}
</script>
{% endraw %}
Notez l'utilisation de {% raw %} et {% endraw %} pour garantir que les balises Moustache ne sont pas supprimées par Jekyll.
Les champs disponibles à afficher sont les suivants.
Liste des entrées des résultats de recherche (obligatoire).
Date de publication brute pour les articles, ou nulle pour les pages. Peut être utilisé pour basculer l'affichage des dates suivantes dans le modèle {{#date}}has a date{{/date}} {{#!date}}no date{{/date}} .
Date de publication de la publication, au format « aaaa-mm-jj », à utiliser dans un élément html5 <time datetime="{{pubdate}}"> (publications uniquement).
Date de publication de la publication, au format « mmm jj, aaaa », par exemple 12 octobre 2012 (publications uniquement)
Titre de la page ou du message Jekyll.
URL de la page ou de la publication Jekyll pouvant être utilisée pour créer un lien hypertexte <a href="{{url}}">{{title}}</a> .
Les catégories (tableau) de la page ou de la publication Jekyll peuvent être utilisées en boucle {{#categories}}{{.}} {{/categories}} pour les lister.
Les balises (tableau) de la page ou de la publication Jekyll peuvent être utilisées dans une boucle {{#tags}}{{.}} {{/tags}} pour les lister.
Valeur Booelan, vraie si l'élément de résultat actuel est une publication. Peut être utilisé pour basculer l'affichage d'éléments spécifiques dans le modèle {{#is_post}}is a post{{/is_post}}
<script type="text/javascript">
$(function() {
$('#search-query').lunrSearch({
indexUrl : '/js/index.json', // url for the .json file containing search index data
results : '#search-results', // selector for containing search results element
template : '#search-results-template', // selector for Mustache.js template
titleMsg : '<h1>Search results<h1>', // message attached in front of results (can be empty)
emptyMsg : '<p>Nothing found.</p>' // shown message if search returns no results
});
});
</script>
Ajoutez le paramètre exclude_from_search suivant à la configuration YAML de n'importe quelle page.
exclude_from_search: true
Ou ajoutez un tableau d'exclusions (sous forme d'expressions régulières individuelles) au fichier _config.yml du site.
lunr_search:
excludes: [rss.xml, atom.xml]
Vous pouvez également configurer un fichier de mots vides et une longueur minimale de mot à inclure dans le fichier d'index. Cela peut être fait en ajoutant un bloc de recherche à _config.yml . Les valeurs par défaut sont :
lunr_search:
stopwords: "stopwords.txt"
min_length: 3
Le fichier de mots vides doit être composé d'un mot par ligne, en minuscules, sans ponctuation.
Vous pouvez choisir de stocker index.json , search.min.js et lunr.min.js dans un répertoire différent comme celui-ci :
lunr_search:
js_dir: "javascript"
Le plugin de recherche est déployé sur 10consulting.com/search. Quelques exemples de requêtes de recherche sont /search/?q=git, /search/?q=cqrs.
Il propose également le chargement à la demande du plugin de recherche .js lorsque vous vous concentrez sur le champ de recherche de la page d'accueil. Regardez les requêtes réseau du navigateur en cliquant sur l'entrée de recherche.
Pour créer le fichier de plugin unique jekyll_lunr_js_search.rb .
Installez Bundler, puis exécutez ce qui suit.
bundle install
Installez Bower.
Pour construire le plugin.
rake build
Copiez ensuite build/jekyll_lunr_js_search.rb dans le dossier _plugins de votre site Jekyll et les fichiers build/*.min.js dans le dossier js de votre site.
Si vous incluez les fichiers .js et .js.map la console de développement de votre navigateur sera liée au code non minifié.
