TechOverflow Logo
TechOverflow

Wie man benutzerdefiniertes JS in Ihr Hugo-Theme einbindet

English 简体中文 Deutsch

Sie können den folgenden Code in Ihrem Hugo-Theme verwenden, um eine Reihe benutzerdefinierter Javascript-Dateien einzubinden. Dies funktioniert ähnlich wie das Einbinden benutzerdefinierter CSS, siehe How to include custom CSS files.

Sie müssen es irgendwo im HTML-<body> einbinden. Je nach Situation binden Sie es oben ein, nach den <style>-Tags, aber ich empfehle, es am Ende des <body> einzubinden (d.h. direkt vor </body>), um sicherzustellen, dass die Seite vollständig geladen ist, bevor die Skripte ausgeführt werden (dies wird die Seitenladezeit verbessern).

In meinem Theme tailbliss kann es am Ende von themes/tailbliss/layouts/partials/footer.html hinzugefügt werden:

include_custom_js_footer.html
<!-- Custom JS code-->
{{ range $customJS := .Site.Params.custom_js }}
{{ $built := resources.Get $customJS | js.Build }}
<script type="text/javascript" src="{{ $built.RelPermalink }}" defer></script>
{{ end }}

Jetzt können Sie eine Liste benutzerdefinierter JS-Dateien in hugo.yaml konfigurieren:

hugo_params_js.yml
params:
  custom_css:
    - 'js/myscript.js'

Platzieren Sie die Dateien z.B. in assets/js/myscripts.js. Der Pfad in der Hugo-Konfigurationsdatei ist relativ zum assets-Verzeichnis.

Check out similar posts by category: Hugo