Jekyll-Search: JSON und das goldene Vlies

Die Geschichte von Iason, dem Anführer der Argonauten, umfasst auch die Suche nach dem Goldenen Vlies. Sie wurde schon öfter verfilmt, aber nichts kommt an die Darstellung von Popeye aus dem Jahr 1960 heran.

[ Youtube Video Link ]

Heute 3500 Jahre nach dem Zeitalter der griechischen Helden erlebt Jason in Form von JSON neue Beliebtheit.

… ganz besonders, wenn es darum geht in Jekyll-Seiten eine Suchfunktion einzubauen.

Jekyll generiert aus Markdown Texten fertige statische HTML Seiten. Eine Jekyll-basierte Webseite führt also auf dem Server keinen Code aus, womit eine Volltextsuche im Gegensatz zu anderen online CMS Lösungen erst einmal ausfällt.

Aber man kann dieses Manko umgehen:

Lösung

Wir lagern alle für eine Suche relevanten Daten in eine JSON Datei aus, die dann von der HTML-Seite mittels Javascript eingebunden und durchsucht werden kann.

Ich habe einige fertige Jekyll-Designs gesehen, die es sich recht einfach machen und quasi alle Seiten als Text ohne HTML in eine einzelne Datei herausschreiben.
Das funktioniert natürlich, allerdings muss man sich im Klaren sein, dass bei einer Suchanfrage, quasi alle je geschriebenen Texte heruntergeladen werden müssen. Je nach Größe der Seite wird das auch ein entsprechend großer Download. Andere kürzen jeden Beitrag auf z.B. 200 Zeichen … aber das ist dann keine Volltextsuche mehr.

Daher habe ich diese Lösung modifiziert:

Ich lasse jeden Beitrag in ein Array von eindeutigen Worten zerlegen. Das reduziert vor allem längere Texte gewaltig, schließlich wiederholen wir ja Wörter in Sätzen immer wieder. Daraus bilden wir jetzt JSON Objekte, die Titel, URL und die Wort-Liste beinhalten. Das ganze wird dann in eine JSON Datei exportiert.

 [
   {
     "title": "Blog Post Title",
     "url": "/yyyy/mm/blog-post-title/",
     "tags": ["info"],
     "category": ["news"],
     "description": "This is a short info about ...",
     "words": ["this", "is", "a", "short", "info", "about" ...],
     "date": "2018-11-23 21:33:00"
  }
]

Dann noch ein kleiner Javascript Codeblock, der die Benutzereingabe in der Objekt- und Wort-Liste sucht und die Ergebnisse wieder auf die Seite schreibt … und fertig.

Die Wortsuche ist in Javascript besonders einfach, weil Arrays die Methode indexOf() unterstützen.

Das hätte man natürlich auch in XML abbilden können, aber die Vorteile von JSON liegen klar auf der Hand:

• Das JSON-Dokument ist automatisch eine gültige Javascript-Variable. Folglich entfallen eigene APIs zum Laden und Parsen der Daten.
• JSON braucht um einiges weniger Platz. Man bedenke die vielen langen XML Tags…

Natürlich ist auch die Wortliste nicht gerade klein, aber vorerst, habe ich auf diesem Blog noch nicht so viele Daten, dass das ein Problem wird.

Sollte die JSON Datei mehrere Megabytes groß werden, habe ich aber auch schon die nächste Optimierung parat: Wir erzeugen pro Anfangsbuchstaben eine eigene JSON Datei. Jetzt braucht das Script nur noch jene Dateien herunterladen, deren Buchstabe mit dem Anfangsbuchstaben der Suchbegriffe übereinstimmt. Und schon haben wir wieder Zeit gewonnen.

Hier geht’s zur Blog-Suche