Hugo

jquery loading multiple times when rendering a datatable

I have been trying to include a datatable where the container responds to the table size, rather than a fixed size. This is possible in other Hugo themes example as well as just plain html example.

I submitted a StackOverflow question here and someone helping me with the problem said this:

Found the problem, jquery loaded multiple times. Related question. Please file an issue to the Hugo academic theme repo. This is beyond what I can debug

Here is a link to a reproducible example and here is a link to the GitHub repo for the page.

Please note that the example is from a docs page but I tried this on every other layout in the Academic theme. I also tried several combinations of additional tools, all with the same result.

jQuery is already present in the templates of the Academic theme.

Yet -for whatever reason- you are loading the same library again from within an iframe in your linked content file that points to this file.

By the way the above is a pretty convoluted way to manage a Hugo project. Loading scripts through iframes in content files is very messy.

I recommend that you familiarize yourself with Hugo’s Documentation and try to simplify your project. It will be more manageable in the long run.

thank you @onedrawingperday for your thoughts and advice. I will go through the documentation again.

All I am trying to do is get a DT datatable to render in a responsive container in an .Rmd file. I am not committed to the iframe approach howerer it was the only way I could find that would render the table at all in the Academic theme. I have been working on this problem for quite a while so if there is a good solution I am all ears.

DT is a very popular R package, Academic is a popular Hugo theme. There should be a way for them to work together.

You can always load a library from the template conditionally, based on the existence of a front matter parameter.

Similarly you can exclude loading of jQuery on a specific page.

To override the Academic theme’s partial templates, you can provide your own in the /layouts/ directory under the root of your project.