Jak vložit custom JS do vašeho Hugo theme

Můžete použít následující kód ve vašem Hugo theme pro vložení řady custom Javascript souborů. To funguje podobně jako vkládání custom CSS, viz Jak vložit custom CSS soubory.

Musíte ho vložit někde do HTML <body>. V závislosti na situaci ho vložte na začátek, po <style> tagách, ale doporučuji ho vložit na konec <body> (tj. těsně před </body>) pro zajištění, že stránka je plně načtena před spuštěním skriptů (to zlepší dobu načítání stránky).

V mém theme tailbliss to může být přidáno na konec themes/tailbliss/layouts/partials/footer.html:

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 }}

Nyní můžete konfigurovat seznam custom JS souborů v hugo.yaml:

hugo_params_js.yml

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

Umístěte soubory např. do assets/js/myscripts.js. Cesta v hugo config souboru je relativní k assets adresáři.