Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (it renders the markdown file?) does so whenever I’ve had to manually enclose the footnotes with <details> in the generated html file.
That is no more! I’m sick of doing it and I don’t know how I just realised that I can just use HTML tags in markdown itself… I’ve literally done that dozens of times already…
The end result looks like this by default:
And when it’s clicked (or you click on a footnote in the article itself):
The coolest thing is that it automatically expands itself!
Add this to the bottom of your markdown files and don’t close the <details> tag:
<details>
<summary><strong>Footnotes</strong></summary>If you close the tag, all the footnotes will be outside it. I don’t know how your website is structured but it works on my machine, also HTML is so foolproof that it automatically closes the tag so that’s why it has to be at the bottom.
Test it out here! 1
Removing the horizontal line that comes with it (might just be me though), add this to your css file:
details hr {
display: none;
}