littlefoot is a nice way to support nice popup footnotes. It’s a successor to bigfoot. To use it in Hugo, add the following somewhere at the bottom of your template. In markdown content, apply footnotes with the normal syntax.
<link rel="stylesheet" href="https://unpkg.com/littlefoot/dist/littlefoot.css" />
<script src="https://unpkg.com/littlefoot/dist/littlefoot.js" type="application/javascript" ></script>
<script type="application/javascript"> littlefoot.default() </script>
I’ve been using this for a while and do recommend it – however I’ve noticed that the unpkg.com CDN seemed to be kind of a bottleneck for my site’s performance, so I recommend downloading and hosting it yourself.
YMMV of course, just wanted to give a heads up.
Thanks for the heads up on unpkg.com. I’ve got some other scripts coming from there, so it’s good to know I should host those locally.
Hi there. I’m using the Academic theme, which uses Goldmark by default. I added the relevant CSS and JS scripts lines but when I add a new footnote with the default syntax[^1] littlefoot is not working.
[^1]: An example of a footnote
I guess the normal syntax depends on anything else?
Any help would be greatly appreciated, thanks!
Nevermind. I was wrongly overriding one of the templates of my theme. Now it’s working although I’m having an issue with the CSS styling (conflicts with Academic).