Templating JS?

support
1

Here’s the situation. I have a file called joe.js that I’ve placed in /content/joe/

It has variables in it like {{ .Site.BaseURL }} in it.

How do I get this processed by hugo?

I’ve attempted a number of things with zero success. I’m coming from Jekyll where this sort of thing “just works”, so I’m sure I’m missing something really obvious.

Thank you.

2

I’m not sure what it looks like in Jekyll, but I think you want https://gohugo.io/templates/output-formats/. :slight_smile:

3

I’ve been trying to use output formats, and I can’t figure out how to make it work.

currently I have

    mediaTypes:
        text/javascript:
            suffixes: js

and it appears to do nothing.

4

(Removed misleading answer… I thought this had to do with output formats.)

5

I’m totally lost.

I’ve defined what I understand to be an output format.

mediaTypes:
    text/javascript:
        suffixes: js
outputFormats:
    javascript:
        mediaType: text/javascript
        isPlainText: true

So at this point I do not understand why this does nothing, or how to “use” it if necessary.

I’ve read the documentation fully, which confuses me even more because it says that “application/javascript” with a suffix of “js” is a built-in output format.

I checked kaushalmodi’s examples, and it seems like it’s for a single file? (otherwise the code on line 11 of list.atom.xml doesn’t make sense to me).

I simply don’t understand what I need to do in order to make Hugo process all of my javascript.

I’ve been trying to make this work for nearly 5 hours now.

6

For these “one time” template tasks, you may want to look into this:

7

OK, let me start from scratch. I assumed that you need to get custom output format working… but may be not?

Why? You cannot have Go templating syntax in your content files. The only syntax that’s allowed in content files, that’s not your chosen markup like Markdown, is for shortcodes.

At this point, it’s not clear what you intend to do with the .js file in the content dir… why not put it in layouts or partials dir if you intend to have Go template syntax parsed from it? These are very open/broad questions.

Step 1: Link a repo showing the stuff you tried.

Then with that link, you can explain what your expectations were with that .js file, and what didn’t work.

8

Ok. So I can not have go templating in content files. I understand this.

I believe I found something that works.

I placed my “joe/joe.js” in /assets/

Then in /layouts/partials/head.html I added these lines:

{{ $js := resources.Get "joe/joe.js" }}
{{ $jsProc:= $js | resources.ExecuteAsTemplate "/joe/joe.js" . }}
 <script type="text/javascript" src="{{ $jsProc.Permalink }}"> </script>

The result is that I now have BaseURL/joe/joe.js and the go templating has been processed.

With that said, maybe this solution helps better explain my goals. I’m curious if I’m still perhaps doing this incorrectly.

And once again thank you for everyone that’s helped thus far. I’m transitioning a large site from Jekyll to Hugo and the learning process is difficult.

9

I haven’t yet used ExecuteAsTemplate, but it looks alright, as per the docs. If it works, you are good :slight_smile:

Unrelated (question for my knowledge): When do you use “text/javascript” vs “application/javascript”?

10

This sounds like a case of http://xyproblem.info .

You should not want to do this. JS files are code and combining code and templating leads to madness. Trust me from experience on this one, the results are instantly unreadable spaghetti.

So why do you want to do this? If you need some data in your JS, you should read in the data from the DOM. E.g., your HTML has <div data-site-url="{{ .Site.BaseURL }}"></div> and then using JS, you can pick up the data attribute. But in the case of the baseURL, it’s not clear why you wouldn’t just use window.location instead. Is your site not the domain root?

1 Like
11

I totally agree it sounds like an XY problem. I was thinking of that before I posted, however I’m in the state of “I don’t know what I don’t know”.

Using data in the DOM is clearly the better solution, however I’m simply trying to convert my working Jekyll site to Hugo at this time. There is some complexity in this case because the script is sometimes injected in to iframes that are not the domain root. I used {{ .Site.BaseURL }} as an example, but that’s not the only variable I’m using in this case. I left out as many details as possible to try to simplify the question.

I have noted to redo this these scripts once I convert the site, but first I need to be able to see things working… hacks and all.

So far it has been a good learning experience to encounter these things.

12

did you find a solution?

13

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.