Suchbegriffe in der Seite hervorheben

Veröffentlichungsdatum: 25. Januar 2019
Änderungsdatum: 28. Januar 2019

weblication cms suche volltextsuche ergebnis hervorheben highlight

Ein Highlighting von Suchbegriffen in der Ergebnisseite erleichert dem Seitenbesucher speziell bei langen Seiten das Auffinden des gesuchten Wortes.

Hervorheben von Begriffen
Hervorheben von Begriffen

Die BASE Projekte sind in aktueller Fassung bereits für ein Hervorheben von Suchbegriffen in der Ergebnisseite vorbereitet. Hierfür genügt es, im Volltextsuche Formular die Checkbox "Treffer in Detailseite markieren" zu aktivieren. Den Suchergebnissen wird dann in der Liste der URL-Parameter highlight angefügt, damit beim Aufruf einer Ergebnisseite die entsprechenden Begriffe in der Seite hervorgehoben werden können (URL-Beispiel: /de/unternehmen/index.php?highlight=energie).

Wie funktioniert das Highlighting?

Grundsätzlich braucht es für das Highlighting nicht unbedingt die Volltextsuche. Allerdings ist diese ein prominentes Beispiel für dessen Einsatz.

Um beim Seitenaufruf die Grundlage dafür zu haben, welche Begriffe in der Seite hervorgehoben werden sollen, wird der URL ein URL-Parameter angefügt, welcher in unserem Beispiel der Parametername "highlight" ist.

Über JavaScript wird bei Seitenaufruf geprüft, wo in der Seite das dem highlight-Parameter als Wert übergebene Wort zu finden ist.

Die design.js definiert hierfür über die Variable "wHighlightBlockRoot" den Block, welcher in der Seite durchsucht werden soll (z.B. 'blockLeftContentRightInner' oder 'blockContentInner'):

Beispiel: Auszug aus der design.js zur Variablen wHighlightBlockRoot

wHighlightBlockRoot                     = 'blockLeftContentRightInner'; //Wurzelemenent beim Hervorheben über den Highlight-Parameter

// Hinweis: In älteren Versionen hatte die Variable einen Schreibfehler (wHightlightBlockRoot), welcher Anfang 2019 behoben wurd!

Auf diese Variable wird in der ui.js abgefragt und entsprechend die Seite durchsucht.
Beim Laden der Seite werden die Treffer in der Seite mit einem span-Tag und der Klasse "wglHighlightWord" ergänzt (aktuelle ui.js vorausgesetzt).

Beispiel: Auszug aus der CSS-Datei zum wglHighlightWord Selektor

.wglHighlightWord {
  background:yellow;
}

In der BASE Classic ist die CSS-Definition in der design.css abgelegt, in der BASE (Mobile First) in der html.scss.

Scrollen zum ersten hervorgehobenen Begriff

Soll für Seitenbesucher zum ersten hervorgehobenen Begriff in der Seite gescrollt werden, ist dies über JavaScript umsetzbar.

In den aktuellen BASE Projekten ist dies bereits auskommentiert definiert und muss daher nur aktiviert werden (Kommentare entfernen) und sieht dann wie folgt aus:

Beispiel: Auszug aus der design.js innerhalb der window onload Funktion zum Scrollen

////////////////////////////////////////////////////////////////
//
// Nach dem vollständigen Laden der Seite und der Bilder etc.
//
////////////////////////////////////////////////////////////////

jQuery(window).on('load', function(){
  
  // Scrollen zum ersten hervorgehobenen Begriff
  window.setTimeout(function(){
    wScrollSmoothToElement('.wglHighlightWord');
  }, 500);
  
});

Den Zeitfaktor passen Sie ggf. individuell an.