Simple Jekyll Search
vements
Une bibliothèque JavaScript pour ajouter une fonctionnalité de recherche à n'importe quel blog Jekyll.
Vous avez un blog construit avec Jekyll et souhaitez une fonctionnalité de recherche légère sur votre blog, purement côté client ?
Aucune configuration de serveur ou base de données à maintenir .
Juste 5 minutes pour avoir un blog consultable entièrement fonctionnel .
npm install simple-jekyll-searchsearch.json Placez le code suivant dans un fichier appelé search.json à la racine de votre blog Jekyll. (Vous pouvez également en obtenir une copie ici)
Ce fichier servira de petite source de données pour effectuer les recherches côté client :
---
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 a besoin de deux éléments DOM pour fonctionner :
Voici le code que vous pouvez utiliser avec la configuration par défaut :
Vous devez placer le code suivant dans la mise en page où vous souhaitez que la recherche apparaisse. (Voir la section de configuration ci-dessous pour le personnaliser)
Par exemple dans _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 > Personnalisez SimpleJekyllSearch en transmettant vos options de configuration :
var sjs = SimpleJekyllSearch ( {
searchInput : document . getElementById ( 'search-input' ) ,
resultsContainer : document . getElementById ( 'results-container' ) ,
json : '/search.json'
} ) Une nouvelle instance de SimpleJekyllSearch renvoie un objet, avec la seule propriété search .
search est une fonction utilisée pour simuler une entrée utilisateur et afficher les résultats correspondants.
Par exemple :
var sjs = SimpleJekyllSearch ( { ... options } )
sjs . search ( 'Hello' )il peut être utilisé pour filtrer les publications par balises ou catégories !
Voici une liste des options disponibles, des questions d'utilisation, des dépannages et des guides.
L'élément d'entrée sur lequel le plugin doit écouter l'événement clavier et déclencher la recherche et le rendu des articles.
L'élément conteneur dans lequel les résultats de la recherche doivent être rendus. Généralement un <ul> .
Vous pouvez soit transmettre une URL au fichier search.json , soit les résultats directement sous forme de JSON, pour enregistrer un aller-retour pour obtenir les données.
Le modèle d’un seul résultat de recherche rendu.
La syntaxe du modèle est très simple : il vous suffit de placer les propriétés que vous souhaitez remplacer par des accolades.
Par exemple
Le modèle
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>'
} )rendra à ce qui suit
< li > < a href =" /jekyll/update/2014/11/01/welcome-to-jekyll.html " > Welcome to Jekyll! </ a > </ li > Si le search.json contient ces données
[
{
"title" : " Welcome to Jekyll! " ,
"category" : " " ,
"tags" : " " ,
"url" : " /jekyll/update/2014/11/01/welcome-to-jekyll.html " ,
"date" : " 2014-11-01 21:07:22 +0100 "
}
]Une fonction qui sera appelée chaque fois qu'une correspondance dans le modèle est trouvée.
Il reçoit le nom de la propriété actuelle, la valeur de la propriété et le modèle.
Si la fonction renvoie une valeur non définie, elle est remplacée dans le modèle.
Cela peut être potentiellement utile pour manipuler des URL, etc.
Exemple:
SimpleJekyllSearch ( {
...
templateMiddleware : function ( prop , value , template ) {
if ( prop === 'bar' ) {
return value . replace ( / ^/ / , '' )
}
}
. . .
} )Voir les tests pour un exemple de code détaillé
Une fonction qui sera utilisée pour trier les résultats filtrés.
Il peut être utilisé par exemple pour regrouper les sections.
Exemple:
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 )
}
. . .
} )Le HTML qui sera affiché si la requête ne correspond à rien.
Vous pouvez limiter le nombre de publications affichées sur la page.
Activez la recherche floue pour permettre une correspondance moins restrictive.
Transmettez une liste de termes que vous souhaitez exclure (les termes seront comparés à une expression régulière, donc les URL et les mots sont autorisés).
Une fonction appelée une fois les données chargées.
Limitez le nombre de fois que la fonction de recherche peut être exécutée sur la fenêtre de temps donnée. Ceci est particulièrement utile pour améliorer l'expérience utilisateur lors de la recherche sur un grand ensemble de données (soit avec des termes rares, soit parce que le nombre de publications à afficher est important). Si aucun debounceTime (millisecondes) n'est fourni, une recherche sera déclenchée à chaque frappe.
remove_chars comme filtre.Par exemple : dans search.json, remplacez
"content" : " {{ page.content | strip_html | strip_newlines }} "avec
"content" : " {{ page.content | strip_html | strip_newlines | remove_chars | escape }} " Si cela ne fonctionne pas lorsque vous utilisez les pages Github, vous pouvez essayer jsonify pour vous assurer que le contenu est compatible avec json :
"content" : { { page . content | jsonify } } Remarque : vous n'avez pas besoin d'utiliser des guillemets " car jsonify les insère automatiquement.
Remplacez search.json par le code suivant :
---
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 -- runMerci à tous les contributeurs au fil des années ! Vous êtes le meilleur :)
@daviddarnes @XhmikosR @PeterDaveBonjour @mikeybeck @egladman @midzer @eduardoboucas @kremalicious @tibotiber et bien d'autres !
