Simple Jekyll Search
vements
Eine JavaScript-Bibliothek zum Hinzufügen von Suchfunktionen zu jedem Jekyll-Blog.
Sie haben einen Blog, der mit Jekyll erstellt wurde, und möchten eine einfache Suchfunktion in Ihrem Blog, rein clientseitig?
Es müssen keine Serverkonfigurationen oder Datenbanken verwaltet werden .
In nur 5 Minuten haben Sie ein voll funktionsfähiges, durchsuchbares Blog .
npm install simple-jekyll-searchsearch.json Platzieren Sie den folgenden Code in einer Datei namens search.json im Stammverzeichnis Ihres Jekyll-Blogs. (Eine Kopie erhalten Sie auch hier)
Diese Datei wird als kleine Datenquelle verwendet, um die Suchen auf der Clientseite durchzuführen:
---
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 benötigt zwei DOM Elemente, um zu funktionieren:
Hier ist der Code, den Sie mit der Standardkonfiguration verwenden können:
Sie müssen den folgenden Code im Layout dort platzieren, wo die Suche erscheinen soll. (Weitere Informationen zum Anpassen finden Sie im Konfigurationsabschnitt unten.)
Zum Beispiel in _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 > Passen Sie SimpleJekyllSearch an, indem Sie Ihre Konfigurationsoptionen übergeben:
var sjs = SimpleJekyllSearch ( {
searchInput : document . getElementById ( 'search-input' ) ,
resultsContainer : document . getElementById ( 'results-container' ) ,
json : '/search.json'
} ) Eine neue Instanz von SimpleJekyllSearch gibt ein Objekt mit der einzigen Eigenschaft search zurück.
search handelt es sich um eine Funktion, mit der eine Benutzereingabe simuliert und die passenden Ergebnisse angezeigt werden.
Z.B:
var sjs = SimpleJekyllSearch ( { ... options } )
sjs . search ( 'Hello' )Es kann verwendet werden, um Beiträge nach Tags oder Kategorien zu filtern!
Hier finden Sie eine Liste der verfügbaren Optionen, Fragen zur Verwendung, Fehlerbehebung und Anleitungen.
Das Eingabeelement, auf dem das Plugin auf Tastaturereignisse warten und die Suche und Darstellung von Artikeln auslösen soll.
Das Containerelement, in dem die Suchergebnisse gerendert werden sollen. Typischerweise ein <ul> .
Sie können entweder eine URL an die Datei search.json oder die Ergebnisse direkt in Form von JSON übergeben, um einen Hin- und Rückweg zum Abrufen der Daten zu sparen.
Die Vorlage eines einzelnen gerenderten Suchergebnisses.
Die Vorlagensyntax ist sehr einfach: Sie schließen einfach die Eigenschaften, die Sie ersetzen möchten, in geschweifte Klammern ein.
Z.B
Die Vorlage
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>'
} )wird wie folgt rendern
< li > < a href =" /jekyll/update/2014/11/01/welcome-to-jekyll.html " > Welcome to Jekyll! </ a > </ li > Wenn die search.json diese Daten enthält
[
{
"title" : " Welcome to Jekyll! " ,
"category" : " " ,
"tags" : " " ,
"url" : " /jekyll/update/2014/11/01/welcome-to-jekyll.html " ,
"date" : " 2014-11-01 21:07:22 +0100 "
}
]Eine Funktion, die immer dann aufgerufen wird, wenn eine Übereinstimmung in der Vorlage gefunden wird.
Es werden der aktuelle Eigenschaftsname, der Eigenschaftswert und die Vorlage übergeben.
Wenn die Funktion einen nicht undefinierten Wert zurückgibt, wird dieser in der Vorlage ersetzt.
Dies kann potenziell nützlich sein, um URLs usw. zu manipulieren.
Beispiel:
SimpleJekyllSearch ( {
...
templateMiddleware : function ( prop , value , template ) {
if ( prop === 'bar' ) {
return value . replace ( / ^/ / , '' )
}
}
. . .
} )Ein ausführliches Codebeispiel finden Sie in den Tests
Eine Funktion, die zum Sortieren der gefilterten Ergebnisse verwendet wird.
Es kann beispielsweise verwendet werden, um die Abschnitte zu gruppieren.
Beispiel:
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 )
}
. . .
} )Der HTML-Code, der angezeigt wird, wenn die Abfrage mit nichts übereinstimmt.
Sie können die Anzahl der auf der Seite gerenderten Beiträge begrenzen.
Aktivieren Sie die Fuzzy-Suche, um weniger restriktive Übereinstimmungen zu ermöglichen.
Übergeben Sie eine Liste von Begriffen, die Sie ausschließen möchten (Begriffe werden mit einem regulären Ausdruck abgeglichen, sodass URLs und Wörter zulässig sind).
Eine Funktion, die aufgerufen wird, sobald die Daten geladen wurden.
Begrenzen Sie, wie oft die Suchfunktion im angegebenen Zeitfenster ausgeführt werden kann. Dies ist besonders nützlich, um die Benutzererfahrung bei der Suche in einem großen Datensatz zu verbessern (entweder bei seltenen Begriffen oder weil die Anzahl der anzuzeigenden Beiträge groß ist). Wenn keine debounceTime (Millisekunden) angegeben ist, wird bei jedem Tastendruck eine Suche ausgelöst.
remove_chars als Filter.Beispiel: Ersetzen Sie in search.json
"content" : " {{ page.content | strip_html | strip_newlines }} "mit
"content" : " {{ page.content | strip_html | strip_newlines | remove_chars | escape }} " Wenn dies bei der Verwendung von Github-Seiten nicht funktioniert, können Sie jsonify ausprobieren, um sicherzustellen, dass der Inhalt JSON-kompatibel ist:
"content" : { { page . content | jsonify } } Hinweis: Sie müssen hier keine " verwenden, da jsonify diese automatisch einfügt.
Ersetzen Sie search.json durch den folgenden Code:
---
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 -- runVielen Dank an alle Mitwirkenden im Laufe der Jahre! Du bist der beste :)
@daviddarnes @XhmikosR @PeterDaveHello @mikeybeck @egladman @midzer @eduardoboucas @kremalicious @tibotiber und viele andere!
