How to include simple JavaScript within Hugo

Question

Given the following code:

$('img').mouseenter(function(){
//...
}).mouseleave(function(){
//...
});

I'd like it to be included in my articles. I'd like to avoid editing the theme if possible so to avoid forking etc.

Lettering

Answer 1

This depends a little on which theme you use. This may be an area where we could do a better job, but do this:

In the theme, look in the

layouts/partials folder.

If you find a header.html or similar, copy this to your local layouts/partials. You can then override the content of this file only. Alternatively you can customize by copying the template used for single pages, often: layouts/_default/single.html.

Unduly

Close.I used themes/shiori/layouts/partials/scripts.html. Ideally it could be done independent of theme, and outside the theme file itself incase it changes. Close Enough. – Lettering

Note that you can copy themes/shiori/layouts/partials/scripts.html to your own project's layouts/partials/scripts.html. That way it will be somewhat independent of the theme. But I agree, it would be nice with some "hook feature". See: github.com/spf13/hugo/issues/1510 – Unduly

Answer 2

bep's answer is excellent, but here are some additional details for hugo/frontend newcomers like me

1. Find a place in your HTML where to include the JS

First, one should copy the header.html or footer.html (or similar) of the Hugo theme to your layouts/partials folder. It does not necessarily have to be the header or the footer, but a file that is included in every page on your html (and that's why you would typically use the header.html or footer.html).

I got a theme that had the footer at <theme_folder>\layouts\partials\_shared\footer.html, which I then copied from the theme folder into the project layout folder <project_root>\layouts\partials\_shared\footer.html.

2. Include the script.js in the HTML

Then, I added to the bottom of footer.html

<script defer language="javascript" type="text/javascript"  src="{{ "/js/myscripts.js" | urlize | relURL }}"></script>

The defer attribute can improve the page loading time a bit, and "/js/myscripts.js" is the location of my javascripts. The location is path relative to <project_root>\static\. Here are the documentation about relURL and urlize.

The example script file contains just

// myscripts.js
function myFunction(x) {
    let d = new Date();
    alert("Current datetime: " + d + "\nYou passed in: " + x);
}

3. Use the JS function

This is an example of using the JS function from within Hugo template (any .html belonging to the template):

        {{ $somevar := "spam"}}
        <button onclick="myFunction( {{ $somevar}} )">Click me</button>

---

Inline JS

It looks like also inline JS runs just fine; for example, adding

<script>
    alert("Script loaded!");
</script>

to a template html file ran just fine. I would use this only for quick testing though, since some scripts might be needed in multiple html files, and adding the same script to multiple files would just increase your overall website filesize.

Urochrome

This is helpful for frontend rookie, Thank you! – Tuck

I use your number 2, but when I change the js it does not get updated. Only html gets updated. If I do hugo -D the public js file content gets updated. But again, not the browser regarding js content. – Attorney

Answer 3

I copy themes/whatever/layouts/_default/baseof.html to layout/_default/baseof.html and add the following block at the end of the html tag:

{{ block "page-script" . }}{{ end }}

Then I can add

{{- define "page-script" -}}
<script>console.log("Hello!")</script>
{{- end -}}

in my layouts files to put in a script.

Lilylivered

I'm new to Hugo and this isn't working for me. The {{ - ... snippet just shows up as rendered html for me. If I change {{- ... to {{< ... }} an error about failure to extract a shortcode. What am I missing? – Brewster

What do you want to appear on the page? – Lilylivered

Could this be tied with append? E.g so I could call call the define logic twice in two searate files. – Null