Hugo Footnotes Popup

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.¹ 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 times¹, 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 Popup² 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.³

<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.