Hugo—the static site generator this blog uses—supports automatically generated footnotes for your articles. You can use them by adding index reference
[^wiki]) to your text.1 Then, at the end of your article (or wherever you want to) put this:
[^1]: This is a footnote content.
Hugo will generate references and link them to their content. You can use the same reference multiple times1, but you have to number them manually as Hugo can’t do this for you.
The default mechanism works by adding anchored links to every index reference and then adds a
[return] button that scrolls you back to your previous position. While it is ultimately better than having to scroll by yourself, I wanted something better.
To set up this plugin add following code to the end of every page that needs it, just before the
</body> closing tag. You can’t put the script inside your head, because it would not get the DOM elements it need as they are not yet loaded at the time.3
<div class="bottom-panel" id="bottom-panel"> <div class="popup-wrapper" id="popup-wrapper"></div> </div> <script src="./footnotes.js"></script>
You can get the code from GitHub repository. It contains JS file
footnotes.js and examaple pages with basic styling using CSS. Feel free customize apperance of your own footnote popups. Make sure that you import all required styles, otherwise footnotes will not work.
Just like this. ↩︎
I could’t think of any better name, sorry. ↩︎
If you put script that manipulates DOM, just like this plugin, into
headit will load before the
bodycontent. So if you target specific elements inside
body, it will not be loaded yet. That is why you must put it at the end of
body. Another way is to call function with
<body onload="footnotePopup();">that triggers given function when
bodyis loaded. ↩︎