Hugo mit JavaScript und CSS erweitern

Veröffentlicht am 11. Oktober 2023 • 2 Min. Lesezeit • 319 Wörter

Wie fügt man eigene JavaScripts (JS) und Cascading Style Sheets (CSS) zu Hugo hinzu?

Hugo mit JavaScript und CSS erweitern
Foto von freepik  auf Freepik 

Kaum ist die “Hugo Webseite” am Laufen, schon kommen neue Begehrlichkeiten auf, die Funktionalität und Darstellung jenseits der Template-Möglichkeiten zu erweitern. Vielleicht sind außer mir noch andere ins Straucheln gekommen, wie diese Dateien in die vorhandene Hugo Infrastruktur einzubetten sind. Deshalb hier mein Weg.

JavaScript Files sind i.Allg. unveränderliche Files und werden innerhalb des Hugo-Projekts in static/js gespeichert. Ebenso wird mit Style-Sheet Dateien verfahren, die im Ordner static/css abgelegt werden.

Da man nie so genau weiß wie viele derartige Skripte im Laufe der Zeit noch dazukommen, habe ich den Weg über einfache Listen gewählt, um die Komplexität überschaubar zu halten.

Hierzu erstellt man im Konfigurations-File params.toml eine Liste aller hinzufügender JS- und CSS-Files.

[main]
    customJS = ["js/tool.js", "js/feature.js"]
    customCSS = ["css/border.css"]

Da die neuen Funktionen voraussichtlich auf allen generierten Seiten zur Verfügung stehen sollen, bindet man sie über den Header ein, der in Hugo oft im File layouts/partials/head/head.html definiert ist. Dazu ergänzt man am Ende des Files die Zeilen für js und css.

{{ define "head" }}

    [... Header Funktionen aus dem Template ...]

    <!-- js -->
    {{ range site.Params.main.customJS -}}
        <link type="text/js" rel="stylesheet" href="{{ . | absURL }}">
    {{- end }}
    <!-- css -->
    {{ range site.Params.main.customCSS -}}
        <link type="text/css" rel="stylesheet" href="{{ . | absURL }}">
    {{- end }}
{{ end }}

Mit Hilfe einer for-Schleife, jeweils über alle Elemente der customJS bzw. customCSS Liste, wird html Code zum Einbinden der Dateien erzeugt.

Nach einem Neustart des Hugo-Servers, bzw. einem erneuten Generieren der statischen Webseite, sieht der relevante Teil im <head> ... </head> Abschnitt einer Seite in etwa so aus:

<!doctype html>
<html lang="de">
[...]
    </head>
[...]
        <link type="text/js" rel="stylesheet" href="http://<MeineDomain/js/tool.js">
        <link type="text/js" rel="stylesheet" href="http://<MeineDomain/js/feature.js">
        <link type="text/css" rel="stylesheet" href="http://<MeineDomain/css/border.css">
    </head>
[...]
</html>

Fazit

Mit Hilfe von allgemeinen Listen der zu ergänzenden JavaScript und Style Sheet Dateien im zentralen params.toml File der Hugo Konfiguration sowie ein bisschen Coding, lassen sich in eigene Script Files in jede Seite eines Hugo Projektes einbinden.