jekyll lunr js search
1.0.0
Utilice lunr.js para proporcionar una búsqueda sencilla de texto completo, utilizando JavaScript en su navegador, para su sitio web estático Jekyll.
Inspirado en los complementos Jekyll + indextank de Pascal Widdershoven y Sitemap.xml Generator de Michael Levin.
Este complemento de Jekyll maneja la generación de un archivo de índice .json compatible con lunr.js. La configuración de búsqueda en tiempo de ejecución se proporciona mediante un sencillo complemento jQuery.
Permite la búsqueda de texto completo de todas sus páginas y publicaciones de Jekyll. Ejecutado por el cliente sin ningún procesamiento del lado del servidor (aparte de servir archivos estáticos).
Elija instalar como Ruby Gem o copiando el archivo del complemento prediseñado en su sitio Jekyll.
Instale Ruby Gem jekyll-lunr-js-search.
gem install jekyll-lunr-js-search
Modifique su archivo Jekyll _config.yml para incluir Gem.
gems: ['jekyll-lunr-js-search']
build/jekyll_lunr_js_search.rb dentro de la carpeta _plugins en la raíz de su sitio Jekyll. El contenido de todas las publicaciones y páginas de Jekyll se indexará en un archivo js/index.json listo para que lo consuma lunr.js. Esto sucede cada vez que se genera el sitio.
Se proporciona un complemento jQuery en js/jquery.lunr.search.js para manejar la configuración de lunr.js con los datos JSON del índice de búsqueda generados por este complemento.
Las dependencias del complemento jQuery son las siguientes.
Una versión prediseñadas del complemento jQuery, junto con todas las dependencias anteriores, concatenadas y minimizadas, está disponible en build/search.min.js.
El complemento agregará automáticamente el archivo JavaScript minimizado js/search.min.js a su _site .
Para usarlo, debe agregar una referencia de secuencia de comandos en la parte inferior de la página de búsqueda nominada.
<script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>
Copie js/jquery.lunr.search.js al directorio JavaScript de su sitio Jekyll.
Agregue una referencia de script al final de su página de búsqueda nominada para jquery.lunr.search.js y cada una de las dependencias descritas anteriormente.
<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>
Asegúrese de utilizar la misma versión de lunr.js que la gema. La salida del registro de Jekyll incluye la versión utilizada.
Lo ideal sería concatenar, minimizar y optimizar estos seis archivos .js usando uglify/cierre de Google/etc para producir un único archivo search.min.js al que hacer referencia (o usar el script prediseñado como se describe en 2a arriba).
<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 búsqueda se realiza a medida que escribe, una vez que se hayan ingresado al menos tres caracteres.
Proporcionar la acción del formulario y especificar el método de obtención permite al usuario presionar regresar/entrar para enviar también la búsqueda. Modifique la URL de acción del formulario según sea necesario para la página de búsqueda en su propio sitio.
<section id="search-results" style="display: none;"> </section>
Esto puede estar oculto inicialmente ya que el complemento mostrará el elemento durante la búsqueda.
{% 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 %}
Tenga en cuenta el uso de {% raw %} y {% endraw %} para garantizar que Jekyll no elimine las etiquetas Moustache.
Los campos disponibles para mostrar son los siguientes.
Lista de entradas de resultados de búsqueda (obligatorio).
Fecha de publicación sin procesar para publicaciones o nula para páginas. Se puede utilizar para alternar la visualización de las siguientes fechas en la plantilla {{#date}}has a date{{/date}} {{#!date}}no date{{/date}} .
Fecha de publicación de la publicación, con el formato 'yyyy-mm-dd', que se utilizará en un elemento html5 <time datetime="{{pubdate}}"> (solo publicaciones).
Fecha de publicación de la publicación, con el formato 'mmm dd, aaaa', como 12 de octubre de 2012 (solo publicaciones)
Título de la página o publicación de Jekyll.
URL de la página o publicación de Jekyll que se puede usar para crear un hipervínculo <a href="{{url}}">{{title}}</a> .
Las categorías (matriz) de la página o publicación de Jekyll se pueden usar en un bucle {{#categories}}{{.}} {{/categories}} para enumerarlas.
Las etiquetas (matriz) de la página o publicación de Jekyll se pueden usar en un bucle {{#tags}}{{.}} {{/tags}} para enumerarlas.
Valor boelano, verdadero si el elemento de resultado actual es una publicación. Se puede utilizar para alternar la visualización de elementos específicos en la plantilla {{#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>
Agregue la siguiente configuración exclude_from_search a la configuración YAML de cualquier página.
exclude_from_search: true
O agregue una serie de exclusiones (como expresiones regulares individuales) al archivo _config.yml del sitio.
lunr_search:
excludes: [rss.xml, atom.xml]
También puede configurar un archivo de palabras vacías y una longitud mínima de palabra que se incluirá en el archivo de índice. Esto se puede hacer agregando un bloque de búsqueda a _config.yml . Los valores predeterminados son:
lunr_search:
stopwords: "stopwords.txt"
min_length: 3
El archivo de palabras vacías debe constar de una palabra por línea, en minúsculas y sin puntuación.
Puede optar por almacenar index.json , search.min.js y lunr.min.js en un directorio diferente como este:
lunr_search:
js_dir: "javascript"
El complemento de búsqueda se implementa en 10consulting.com/search. Algunos ejemplos de consultas de búsqueda son /search/?q=git, /search/?q=cqrs.
También presenta la carga bajo demanda del complemento de búsqueda .js cuando se enfoca en el campo de búsqueda en la página de inicio. Mire las solicitudes de red del navegador haciendo clic en la entrada de búsqueda.
Para crear el único archivo de complemento jekyll_lunr_js_search.rb .
Instale Bundler y luego ejecute lo siguiente.
bundle install
Instale la glorieta.
Para construir el complemento.
rake build
Luego copie build/jekyll_lunr_js_search.rb a la carpeta _plugins de su sitio Jekyll y los archivos build/*.min.js a la carpeta js de su sitio.
Si incluye los archivos .js y .js.map la consola de desarrollo de su navegador se vinculará al código no minificado.
