So fügen Sie Ihrer Hugo-Site eine Suche hinzu / Sudo Null IT News

Hugo ist ein statischer Website-Generator, aber was ist, wenn Sie ein interaktives Element hinzufügen möchten? Die Suchmaschine ist ein wichtiges und oft notwendiges Feature auf einer Website, aber das Schreiben mit Hugo allein ist angesichts der Art des Tools einfach nicht möglich. Deshalb musst du dich der dunklen Seite anschließen und dich an JS erinnern …

Idee

Die Suchmaschine verwendet die JSON-Datei als Suchindex, wo Informationen über Seiten gespeichert werden (normale Seite, auch bekannt als Single). Um nicht von sich aus Informationen zu jeder neuen Seite einzutreiben, muss die Datei selbst die Struktur erzeugen, die wir brauchen.

Seite im JSON-Format

Zuerst müssen Sie in der Konfiguration (config.toml) eine Seite deklarieren, die im JSON-Format vorliegen wird. Die einfachste Option ist die Hauptoption. Ihre Homepage wird dadurch übrigens nicht zerstört, d.h. Es wird auch nach Ihrer index.html gerendert.

config.toml

[outputs]

Zuhause = [“HTML”, “JSON”]

Suchindex

Lassen Sie uns nun eine selbst generierte JSON-Datei erstellen, in der die Informationen gespeichert werden, die wir für jede Seite benötigen. Lassen Sie uns eine index.json-Datei erstellen (im selben Verzeichnis wie index.html, in meinem Fall layouts).

index.json

{{ $number := 0 -}} {{ $pages := len .Site.RegularPages }}
[
{{- range.Site.RegularPages -}}
{{- $number = add $number 1 -}}
{
“title”: “{{ .Title }}”,
“url”: “{{ .RelPermalink }}”,
“plain”: “{{ .PlainWords }}”,
“parent”: “{{ .Parent.Title }}”
}
{{- if and (ge $number 1) (lt $number $pages) }},{{ end -}}
{{- end }}
]

Mal sehen, was dieses Baby macht. Wir gehen alle regulären Seiten der Site (reguläre Seite, auch bekannt als Single) ab Zeile 4 durch und ziehen die Parameter heraus, die wir benötigen (title – title, url – link, plain – Seiteninhalt, parent – Verzeichnis, in dem sich die Seite befindet gelegen). $number und $pages zusammen mit if und werden benötigt, um Kommas zwischen JSON-Elementen zu setzen, nicht mehr.

Erstellen einer Suchleiste

Lassen Sie uns einen Container für das Suchfeld und die Suchergebnisse erstellen.

index.html

Suchen Sie etwas?

Zum Beispiel hänge ich auch meine CSS-Datei an. Kein Mitleid.

style.css

.search-wrapper { Textausrichtung: Mitte ; Polsterung: 15px } .input {Rand: 1px fest #373b42; Randradius: 5px Höhe: 25px; Breite: 30% Schriftgröße: 14px; Polsterung: 2px 23px 2px 30px Hintergrundfarbe: #21262d; Farbe: #ffffff; Schriftfamilie: JetBrains Mono, regular; } .input:hover, .input:focus { Rahmen: 1px fest #58a6ff; } .searchResults { Position: absolut; links: 46% Breite: 23 % oben: 25 %; Hintergrundfarbe: #0d1117; Rand: 1px solide #373b42; } .search-result-item { padding: 20px; } .search-result-item a { text-decoration: none; Farbe: #58a6ff; }

Jetzt ist es an der Zeit, sich unserem besten Freund zuzuwenden – JS. Was wir wollen, ist, dass eine Aktion beginnt, eine JSON-Datei (auch bekannt als unser Suchindex) zu generieren. Der einfachste Weg, dies zu tun, besteht darin, den Benutzer auf das Eingabefeld der Suchanfrage zu fokussieren.

Lassen Sie uns eine JSON-Startfunktion schreiben.

const GetPostsJSON = async () => { let response = await fetch(‘/index.json’) let data = await response.json() return data }

Sowie die Funktion, Ergebnisse basierend auf der Abfrage zu filtern. Dieselbe Funktion fügt HTML-Code hinzu, um die Ergebnisse in unserem Container anzuzeigen.

const filterPostsJSON = (query, element) => { let result, itemsWithElement; query = new RegExp(query, ‘ig’) result = dataJSON.filter(item => query.test(item.title) | query.test(item.plain)) itemsWithElement = result.map(item => ( `< div class="search-result-item">

` )) element.style.display = ‘block’; element.innerHTML = itemsWithElement.join(”); }

In diesem Fall suche ich nach einer Übereinstimmung im Seitennamen (Artikel.Titel) und Seiteninhalt (Artikel.einfach).

Als nächstes bleibt nur noch die Verarbeitung von Ereignissen hinzuzufügen.

const searchInputAction = (event, callback) => { searchInput.addEventListener(event, callback) } // – Wenn der Fokus auf der Suche liegt, rufen Sie getPostsd auf searchInputAction(‘focus’, () => getPostsJSON().then(data => dataJSON = data)) // – Ergebnisse nach Anfrage filtern searchInputAction(‘keyup’, (event) => filterPostsJSON(event.target.value, searchResult))

In der Tasche

Mit einer Prise JS können Sie also Ihrer Hugo-Site eine einfache Suchmaschine hinzufügen. Es ist keine elastische Suche für Sie, aber es ist perfekt für kleine Lösungen.

Wenn Sie daran interessiert sind, mehr über komplexere Systeme zu erfahren, empfehle ich Ihnen, Kontakt aufzunehmen dieses Projekt.

Similar Posts

Leave a Reply

Your email address will not be published.