jekyll lunr js search
1.0.0
Verwenden Sie lunr.js, um eine einfache Volltextsuche mit JavaScript in Ihrem Browser für Ihre statische Jekyll-Website bereitzustellen.
Inspiriert von Pascal Widdershovens Jekyll + indextank und Michael Levins Sitemap.xml Generator-Plugins.
Dieses Jekyll-Plugin übernimmt die Generierung einer lunr.js-kompatiblen .json Indexdatei. Die Konfiguration der Laufzeitsuche wird durch ein einfaches jQuery-Plugin bereitgestellt.
Es ermöglicht die Volltextsuche aller Ihrer Jekyll-Seiten und -Beiträge. Wird vom Client ohne serverseitige Verarbeitung (außer der Bereitstellung statischer Dateien) ausgeführt.
Wählen Sie die Installation entweder als Ruby Gem oder durch Kopieren der vorgefertigten Plugin-Datei auf Ihre Jekyll-Site.
Installieren Sie das Ruby Gem jekyll-lunr-js-search.
gem install jekyll-lunr-js-search
Ändern Sie Ihre Jekyll-Datei _config.yml so, dass sie das Gem enthält.
gems: ['jekyll-lunr-js-search']
build/jekyll_lunr_js_search.rb im Ordner _plugins im Stammverzeichnis Ihrer Jekyll-Site. Der Inhalt aller Jekyll-Beiträge und -Seiten wird in einer js/index.json Datei indiziert, die von lunr.js genutzt werden kann. Dies geschieht jedes Mal, wenn die Site generiert wird.
In js/jquery.lunr.search.js wird ein jQuery-Plugin bereitgestellt, um die Konfiguration von lunr.js mit den von diesem Plugin generierten Suchindex-JSON-Daten zu verwalten.
Die Abhängigkeiten für das jQuery-Plugin sind wie folgt.
Eine vorgefertigte Version des jQuery-Plugins, zusammen mit allen oben genannten Abhängigkeiten, verkettet und minimiert, ist unter build/search.min.js verfügbar.
Das Plugin fügt automatisch die minimierte JavaScript-Datei js/search.min.js zu Ihrer _site hinzu.
Um es zu verwenden, müssen Sie unten auf der angegebenen Suchseite einen Skriptverweis hinzufügen.
<script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>
Kopieren Sie js/jquery.lunr.search.js in das JavaScript-Verzeichnis Ihrer Jekyll-Site.
Fügen Sie am Ende Ihrer nominierten Suchseite einen Skriptverweis für jquery.lunr.search.js und jede der oben beschriebenen Abhängigkeiten hinzu.
<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>
Stellen Sie sicher, dass Sie dieselbe Version von lunr.js wie das Gem verwenden. Die Jekyll-Protokollausgabe enthält die verwendete Version.
Idealerweise würden Sie diese sechs .js Dateien mit uglify/Google-Closure/etc verketten, verkleinern und optimieren, um eine einzige search.min.js Datei als Referenz zu erstellen (oder das vorgefertigte Skript verwenden, wie in 2a oben beschrieben).
<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>
Die Suche erfolgt während der Eingabe, sobald mindestens drei Zeichen eingegeben wurden.
Durch die Bereitstellung der Formularaktion und die Angabe der Get-Methode kann der Benutzer die Eingabetaste drücken, um auch die Suche abzusenden. Ändern Sie die Aktions-URL des Formulars nach Bedarf für die Suchseite auf Ihrer eigenen Website.
<section id="search-results" style="display: none;"> </section>
Dies kann zunächst ausgeblendet sein, da das Plugin das Element bei der Suche anzeigt.
{% 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 %}
Beachten Sie die Verwendung von {% raw %} und {% endraw %} um sicherzustellen, dass die Moustache-Tags nicht von Jekyll entfernt werden.
Folgende Felder stehen zur Anzeige zur Verfügung.
Liste der Suchergebnisseinträge (Pflichtfeld).
Rohes Veröffentlichungsdatum für Beiträge oder Null für Seiten. Kann verwendet werden, um die Anzeige der folgenden Daten in der Vorlage umzuschalten {{#date}}has a date{{/date}} {{#!date}}no date{{/date}} .
Veröffentlichungsdatum des Beitrags, formatiert als „JJJJ-MM-TT“, zur Verwendung in einem HTML5- <time datetime="{{pubdate}}"> Element (nur Beiträge).
Veröffentlichungsdatum des Beitrags, formatiert als „mmm dd, yyyy“, z. B. 12. Oktober 2012 (nur Beiträge)
Titel der Jekyll-Seite oder des Jekyll-Beitrags.
URL der Jekyll-Seite oder des Jekyll-Beitrags, die zum Erstellen eines Hyperlinks <a href="{{url}}">{{title}}</a> verwendet werden kann.
Kategorien (Array) der Jekyll-Seite oder des Jekyll-Beitrags können in einer Schleife {{#categories}}{{.}} {{/categories}} verwendet werden, um sie aufzulisten.
Tags (Array) der Jekyll-Seite oder des Jekyll-Beitrags können in einer Schleife {{#tags}}{{.}} {{/tags}} verwendet werden, um sie aufzulisten.
Booelan-Wert, true, wenn das aktuelle Ergebniselement ein Beitrag ist. Kann verwendet werden, um die Anzeige bestimmter Elemente in der Vorlage {{#is_post}}is a post{{/is_post}} umzuschalten.
<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>
Fügen Sie die folgende Einstellung „ exclude_from_search zur YAML-Konfiguration einer beliebigen Seite hinzu.
exclude_from_search: true
Oder fügen Sie der _config.yml Datei der Site ein Array von Ausschlüssen (als einzelne reguläre Ausdrücke) hinzu.
lunr_search:
excludes: [rss.xml, atom.xml]
Sie können auch eine Stoppwortdatei und eine Mindestlänge der Wörter konfigurieren, die in die Indexdatei aufgenommen werden sollen. Dies kann durch Hinzufügen eines Suchblocks zu _config.yml erfolgen. Die Standardwerte sind:
lunr_search:
stopwords: "stopwords.txt"
min_length: 3
Die Stoppwortdatei muss aus einem Wort pro Zeile in Kleinbuchstaben ohne Satzzeichen bestehen.
Sie können index.json , search.min.js und lunr.min.js in einem anderen Verzeichnis wie diesem speichern:
lunr_search:
js_dir: "javascript"
Das Such-Plugin wird auf 10consulting.com/search bereitgestellt. Einige Beispielsuchabfragen sind /search/?q=git, /search/?q=cqrs.
Es ermöglicht auch das On-Demand-Laden des Such-Plugins .js wenn Sie sich auf das Suchfeld auf der Homepage konzentrieren. Schauen Sie sich die Netzwerkanfragen des Browsers an, indem Sie in die Sucheingabe klicken.
So erstellen Sie die einzelne Plugin-Datei jekyll_lunr_js_search.rb .
Installieren Sie Bundler und führen Sie dann Folgendes aus.
bundle install
Installieren Sie Bower.
Um das Plugin zu erstellen.
rake build
Kopieren Sie dann build/jekyll_lunr_js_search.rb in den _plugins Ordner Ihrer Jekyll-Site und die build/*.min.js Dateien in den js -Ordner Ihrer Site.
Wenn Sie die Dateien .js und .js.map einbinden, stellt Ihre Browser-Entwicklerkonsole eine Verknüpfung zum nicht minimierten Code her.
