Como incluir JS personalizado no seu tema Hugo

Você pode usar o seguinte código no seu tema Hugo para incluir uma variedade de arquivos Javascript personalizados. Isso funciona similar a incluir CSS personalizado, veja Como incluir arquivos CSS personalizados.

Você precisa incluí-lo em algum lugar do <body> HTML. Dependendo da situação, inclua-o no topo, após as tags <style>, mas eu recomendo incluí-lo no final do <body> (ou seja, logo antes de </body>) para garantir que a página seja totalmente carregada antes que os scripts sejam executados (isso melhorará o tempo de carregamento da página).

No meu tema tailbliss, ele pode ser adicionado ao final de 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 }}

Agora você pode configurar uma lista de arquivos JS personalizados em hugo.yaml:

hugo_params_js.yml

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

Coloque os arquivos em, por exemplo, assets/js/myscripts.js. O caminho no arquivo de configuração do hugo é relativo ao diretório assets.