I have been using a JavaScript library to generate interactive mathematical diagrams. In previous versions of Hugo, I’d insert the html code which included the JavaScript code in my blog post using an iframe. So in an md file, I’d have something like:
The particular html file would itself call the JavaScript library that I used. I appreciate that there are better ways - but what? I’ve been searching through the documentation, but I’m either searching for the wrong thing, or I have a deep misunderstanding (or of course, both!) Anyway, the above method seems not to work in the newest versions of Hugo.
What is the standard way of using a JavaScript library in Hugo, and of inserting a file that contains the JavaScript code?
Use a script element in one of your templates that loads the JS lib. Add an event listener for DOMContentLoaded that calls the necessary functions of your JS lib. Nothing particular to Hugo, imo.
Many thanks. I’ve never needed to use an event listener in Hugo (it sounds more complicated than it needs to be, but perhaps that’s just me) , but I’ll see what I can do. Are there examples - or even better, for simple-minded folks like me - tutorials? Maybe I need to search the documentation more thoroughly. Thanks again!
As I said: this is not related to Hugo at all. You’d do whatever you do in an HTML file, aka a template, to load and execute JavaScript code. Which partly depends on the library you use.
In fact I can indeed use the JS library I need by importing the entire html file as an iframe. (I made some elementary errors at first!) But there is surely a better and more efficient way.
if I got it right, you want to get rid of that iframe and include the content (or some part of it) somehow. That depends on
How poly.html looks like only the diagram or something more
is it handcrafted or generated externally…
How the js works
The easiest for us would be if you show us whet you have. a working example that one could adapt … guessing how that could look like is not the best option.