HUGO

Littlefoot for fancy popup footnotes

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>
5 Likes

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.

2 Likes

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.

1 Like

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).