Simple Jekyll Search
vements
Una biblioteca de JavaScript para agregar funcionalidad de búsqueda a cualquier blog de Jekyll.
¿Tiene un blog creado con Jekyll y desea una función de búsqueda ligera en su blog, puramente del lado del cliente?
No hay configuraciones de servidor ni bases de datos que mantener .
Sólo 5 minutos para tener un blog con capacidad de búsqueda completamente funcional .
npm install simple-jekyll-searchsearch.json Coloque el siguiente código en un archivo llamado search.json en la raíz de su blog de Jekyll. (También puedes obtener una copia desde aquí)
Este archivo se utilizará como una pequeña fuente de datos para realizar las búsquedas en el lado del cliente:
---
layout : none
---
[
{% for post in site.posts %}
{
" title " : "{{ post.title | escape }}",
" category " : "{{ post.category }}",
" tags " : "{{ post.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ post.url }}",
" date " : "{{ post.date }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
] SimpleJekyllSearch necesita dos elementos DOM para funcionar:
Aquí está el código que puede usar con la configuración predeterminada:
Debe colocar el siguiente código dentro del diseño donde desea que aparezca la búsqueda. (Consulte la sección de configuración a continuación para personalizarla)
Por ejemplo en _layouts/default.html :
<!-- HTML elements for search -->
< input type =" text " id =" search-input " placeholder =" Search blog posts.. " >
< ul id =" results-container " > </ ul >
<!-- or without installing anything -->
< script src =" https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js " > </ script > Personalice SimpleJekyllSearch pasando sus opciones de configuración:
var sjs = SimpleJekyllSearch ( {
searchInput : document . getElementById ( 'search-input' ) ,
resultsContainer : document . getElementById ( 'results-container' ) ,
json : '/search.json'
} ) Una nueva instancia de SimpleJekyllSearch devuelve un objeto, con la única propiedad search .
search es una función que se utiliza para simular la entrada de un usuario y mostrar los resultados coincidentes.
P.ej:
var sjs = SimpleJekyllSearch ( { ... options } )
sjs . search ( 'Hello' )¡Se puede utilizar para filtrar publicaciones por etiquetas o categorías!
Aquí hay una lista de las opciones disponibles, preguntas de uso, solución de problemas y guías.
El elemento de entrada en el que el complemento debe escuchar el evento del teclado y activar la búsqueda y representación de artículos.
El elemento contenedor en el que se deben representar los resultados de la búsqueda. Normalmente un <ul> .
Puede pasar una URL al archivo search.json o los resultados directamente en forma de JSON para ahorrar un viaje de ida y vuelta para obtener los datos.
La plantilla de un único resultado de búsqueda renderizado.
La sintaxis de la plantilla es muy simple: simplemente incluya las propiedades que desea reemplazar con llaves.
P.ej
la plantilla
var sjs = SimpleJekyllSearch ( {
searchInput : document . getElementById ( 'search-input' ) ,
resultsContainer : document . getElementById ( 'results-container' ) ,
json : '/search.json' ,
searchResultTemplate : '<li><a href="{{ site.url }}{url}">{title}</a></li>'
} )se rendirá a lo siguiente
< li > < a href =" /jekyll/update/2014/11/01/welcome-to-jekyll.html " > Welcome to Jekyll! </ a > </ li > Si el search.json contiene estos datos
[
{
"title" : " Welcome to Jekyll! " ,
"category" : " " ,
"tags" : " " ,
"url" : " /jekyll/update/2014/11/01/welcome-to-jekyll.html " ,
"date" : " 2014-11-01 21:07:22 +0100 "
}
]Una función que se llamará cada vez que se encuentre una coincidencia en la plantilla.
Se le pasa el nombre de la propiedad actual, el valor de la propiedad y la plantilla.
Si la función devuelve un valor no indefinido, se reemplaza en la plantilla.
Esto puede resultar potencialmente útil para manipular URL, etc.
Ejemplo:
SimpleJekyllSearch ( {
...
templateMiddleware : function ( prop , value , template ) {
if ( prop === 'bar' ) {
return value . replace ( / ^/ / , '' )
}
}
. . .
} )Vea las pruebas para ver un ejemplo de código detallado
Una función que se utilizará para ordenar los resultados filtrados.
Se puede utilizar, por ejemplo, para agrupar las secciones.
Ejemplo:
SimpleJekyllSearch ( {
...
sortMiddleware : function ( a , b ) {
var astr = String ( a . section ) + "-" + String ( a . caption ) ;
var bstr = String ( b . section ) + "-" + String ( b . caption ) ;
return astr . localeCompare ( bstr )
}
. . .
} )El HTML que se mostrará si la consulta no coincide con nada.
Puede limitar la cantidad de publicaciones representadas en la página.
Habilite la búsqueda difusa para permitir coincidencias menos restrictivas.
Pase una lista de términos que desea excluir (los términos se compararán con una expresión regular, por lo que se permiten URL y palabras).
Una función llamada una vez que se han cargado los datos.
Limite cuántas veces se puede ejecutar la función de búsqueda durante el período de tiempo determinado. Esto es especialmente útil para mejorar la experiencia del usuario cuando busca en un conjunto de datos grande (ya sea con términos poco comunes o porque la cantidad de publicaciones a mostrar es grande). Si no se proporciona ningún debounceTime (milisegundos), se activará una búsqueda con cada pulsación de tecla.
remove_chars como filtro.Por ejemplo: en search.json, reemplace
"content" : " {{ page.content | strip_html | strip_newlines }} "con
"content" : " {{ page.content | strip_html | strip_newlines | remove_chars | escape }} " Si esto no funciona cuando usas páginas de Github, puedes probar jsonify para asegurarte de que el contenido sea compatible con json:
"content" : { { page . content | jsonify } } Nota: no es necesario utilizar comillas " en esto ya que jsonify las inserta automáticamente.
Reemplace search.json con el siguiente código:
---
layout : none
---
[
{% for post in site.posts %}
{
" title " : "{{ post.title | escape }}",
" category " : "{{ post.category }}",
" tags " : "{{ post.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ post.url }}",
" date " : "{{ post.date }}",
" content " : "{{ post.content | strip_html | strip_newlines }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
,
{% for page in site.pages %}
{
{% if page.title != nil %}
" title " : "{{ page.title | escape }}",
" category " : "{{ page.category }}",
" tags " : "{{ page.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ page.url }}",
" date " : "{{ page.date }}",
" content " : "{{ page.content | strip_html | strip_newlines }}"
{% endif %}
} {% unless forloop.last %},{% endunless %}
{% endfor %}
] npm installnpm test cd example ; jekyll serve
# in another tab
npm run cypress -- run¡Gracias a todos los contribuyentes a lo largo de los años! Eress el mejor :)
@daviddarnes @XhmikosR @PeterDaveHello @mikeybeck @egladman @midzer @eduardoboucas @kremalicious @tibotiber ¡y muchos otros!
