Wie man JS/CSS aus dem node_modules-Ordner in Hugo einbindet

In unseren vorherigen Beiträgen:

• Hugo theme code to include custom CSS files
• How to include custom JS in your Hugo theme

haben wir gezeigt, wie man Hugo und Ihr Theme konfiguriert, um benutzerdefinierte JS/CSS-Dateien einzubinden.

Ein Anwendungsfall, der oft relevant ist (insbesondere im Hinblick auf EU-DSGVO-Gesetze), ist es, Javascript und CSS nicht von einem CDN einzubinden, sondern sie lokal von Ihrer Site einzubinden.

In der Praxis bedeutet das, dass wir sie aus dem node_modules-Ordner einbinden möchten statt z.B. von jsDelivr.

In diesem Beispiel binden wir die katex-Bibliothek aus dem node_modules-Ordner ein. Es setzt voraus, dass Sie Hugo so konfiguriert haben, dass es sowohl benutzerdefiniertes CSS als auch benutzerdefiniertes Javascript akzeptiert, wie in den vorherigen Beiträgen gezeigt.

Es setzt voraus, dass Sie katex in Ihrem node_modules-Ordner installiert haben:

npm install --save katex

Hugo unterstützt das Einbinden aus dem node_modules-Ordner nicht direkt. Der empfohlene Weg ist die Verwendung von Modul-Mounts, um die relevanten node_modules-Unterverzeichnisse in Hugos assets-Dateisystem einzubinden.

Hinweis: In Hugo-Versionen vor v0.162.0 war das Symlinking von Dateien aus node_modules in den assets-Ordner ein gängiger Workaround. Ab v0.162.0 lehnt Hugo jedoch symlinked-Einträge in resources.Get aus Sicherheitsgründen (CVE-2026-50135) ab, sodass Modul-Mounts nun der korrekte Ansatz sind.

Fügen Sie Folgendes zu Ihrer hugo.yaml hinzu, um das katex-dist-Verzeichnis in assets/vendor/katex einzubinden:

module:
  mounts:
    - source: assets
      target: assets
    - source: static
      target: static
    - source: node_modules/katex/dist
      target: assets/vendor/katex

Wichtig: Wenn Sie module.mounts definieren, werden alle Standard-Mounts ersetzt — Sie müssen also assets und static explizit neu mounten, wie oben gezeigt.

Jetzt können Sie in Ihrer hugo.yaml die eingebundenen Dateien so referenzieren:

params:
  custom_css:
    - 'css/techoverflow.css'
    - 'css/kicad.css'
    - 'vendor/katex/katex.min.css' # KaTeX CSS, mounted from node_modules
  custom_js:
    - 'js/kicad.js'
    - 'js/algolia.js'
    - 'vendor/katex/katex.min.js' # KaTeX JS, mounted from node_modules

Wichtig: Dies ist kein Beitrag darüber, wie man KaTeX für Hugo konfiguriert (dafür sind weitere Schritte erforderlich)! Es geht nur darum, wie man JS/CSS aus dem node_modules-Ordner in Hugo einbindet.

Hugo wird die Assets nicht automatisch aus dem assets-Ordner in den public-Ordner kopieren, daher müssen Sie sicherstellen, dass Ihr Build-Prozess diese Dateien einschließt. Das bedeutet, Sie müssen resources.Get irgendwo in Ihrem Theme verwenden, um die Dateien einzubinden.

<link rel="stylesheet" href="{{ (resources.Get "vendor/katex/katex.min.css").RelPermalink }}" />
<script defer src="{{ (resources.Get "vendor/katex/katex.min.js").RelPermalink }}"></script>