I've been running this site for a couple of months now and wanted to implement some form of footnoting.
When I write, I tend to include a lot of text in parentheses (just like this) as they indicate a side thought. An alternative way of rendering that side thought is via a footnote1
I'd come across a site also created in Hugo by But She's a Girl which had quite elegant footnotes. I wanted something similar. BSAG pointed me in the direction of Bigfoot but while I was looking into that I came across references to littlefoot and barefoot which are a little more lightweight and/or vanilla.
I opted for barefoot and then spent some time getting to grips with how to install it on my site. The steps for posterity are:
<link rel="stylesheet" href="/css/barefoot.min.css"> <script src="/js/barefoot.min.js"></script> <script> lf: new BareFoot(); lf.init(); </script>
In my case I directly edited the layout files under the theme. This means my changes could be overwritten if I ever update the theme, but that's when this post will come in handy.
My understanding is that Hugo utilises blackfriday as its rendering engine. blackfriday by default renders footnotes correctly. What barefoot does is take that and make it neater and more elegant.
After that, to create a footnote all you need do is include it like this in the text - with unique numbering/lettering:
this is the primary text[^2]
And the footnote text is added as follows:
[^2]:this is the footnote text
This will render as:
this is the primary text2
I think barefoot (and bigfoot and littlefoot) are elegant solutions that neaten up a site. It took me some time to get it working on this site, but that's more a reflection on my limited understanding of hugo and html than the footnoting applications themselves. I'm sure there were quicker and easier ways of getting this running, but I'm here now.
Grav was with by Trilby Media.