Skip to content
Pure JavaScript plugin to make your footnotes displayed in a panel. Works with footnotes generated from Markdown in Hugo.
HTML JavaScript CSS
Branch: master
Clone or download
Latest commit 0c2c0ae Jul 12, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Initial commit May 4, 2018 Update Jul 11, 2019
demo.gif Initial commit May 4, 2018
footnotes.js fixed #5 Jul 9, 2019
index.html Index and close btn now optional. Simplified HTML markup. Feb 25, 2019
main.css Index and close btn now optional. Simplified HTML markup. Feb 25, 2019

Hugo Footnotes Popup


Hugo Footnotes Popup is a pure JavaScript plugin to display footnotes at the bottom of your page. It is only 2 KB and can be used on Hugo website (for Jekyll see below). With JavaScript disabled, nothing will change and users can freely use the default anchor-style footnotes.


To use this plugin download footnotes.js file and insert it to your static directory inside Hugo. Then put following code at the end of your HTML template. Inner content will be created at the runtime so no artifacts will appear when you disable JavaScript.

<div class="bottom-panel" id="bottom-panel">
    <div class="popup-wrapper" id="popup-wrapper"></div> 
<script src="./footnotes.js"></script>

You can change the visibility of footnote number and close button inside footnotes.js file. And the end of footnotes.js file edit function call parameters. To disable footnote number or close button, set their values to false.

footnotePopup(false, false);

This plugin requires basic CSS to work. View reference styles in main.css.

Jekyll users

Check this issue. You can use this plugin with Jekyll but further configuration is required.

You can’t perform that action at this time.