Hugo Footnotes Popup is a pure javascript plugin that displays your footnotes in a bottom panel. It is made mainly for Hugo, but after some tweaks it probably can work with Jekyll too. The aim is to add more comfort for mobile users, but it works on desktop just fine.

Hugo—the static site generator this blog uses—supports automatically
generated footnotes for your articles. You can use them by adding index
reference [^1]
(or [^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.
Hugo Footnotes Popup2 is a javascript plugin that makes your footnotes opened in popup at the bottom of the page in a panel. You can see how it works by clicking on any footnote on this page. It is only 2 KB and can be used on every website that uses Hugo or uses similar Markdown scheme.
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.
Footnotes
-
I could't think of any better name, sorry. ↩
-
If you put script that manipulates DOM, just like this plugin, into
head
it will load before thebody
content. So if you target specific elements insidebody
, it will not be loaded yet. That is why you must put it at the end ofbody
. Another way is to call function with<body onload="footnotePopup();">
that triggers given function whenbody
is loaded. ↩