Hugo—the static site generator this blog uses—supports automatically
generated footnotes for your articles. You can use them by adding index
[^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
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.
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. ↩