Gergelim

I've Added Nice Footnotes to My Website

written by Gian on 2018-12-25

Erm, Bigfoot for some reason stopped working... I've found an alternative and I'll try to fix my poor notes when I find time.

I often read jamesclear.com, and I really like the way they do footnotes -- they're actually popups that appear when clicking on a button. I wanted to try something similar for this very website and ended up discovering the amazing bigfoot.js.

Solution: hexo + hexo-footnotes + bigfoot

I was already using hexo-footnotes1, a hexo plugin that simplifies writing footnotes. When I want to write one, I do something like:

Hey, this is a footnote[^1]!

and then somewhere else I write the content:

[^1]: This is what you're going to read following the footnote.

This generates HTML looking like this:

<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>

for the origin, and

<div id="footnotes">
    <hr>
    <div id="footnotelist">
        <ol style="list-style:none; padding-left: 0;">
        <li id="fn:1">
            <span style="display: inline-block; vertical-align: top; padding-right: 10px;">1.</span>
            <span style="display: inline-block; vertical-align: top;">
            This is what you're going to read following the footnote.
            </span>
            <a href="#fnref:1" rev="footnote"></a>
        </li>
        </ol>
    </div>
<div>

for the destination.

Now we need to install bigfoot. Here's what I've done, step by step:

  1. Downloaded the bundle from the website2, and copied bigfoot.min.js into my theme's directory (themes/landscape/source/js), together with a minified version of jQuery.
  2. Copied bigfoot-default.css into themes/landscape/source/css
  3. Added @import "bigfoot.css" at the end of my main style file inside the css directory, style.styl

Now I just need to write the following snippet in the posts where I want to use it:

<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/bigfoot.min.js"></script>
<script type="text/javascript">
    $.bigfoot();
</script>

and use my footnotes exactly the way I did before.

Parting thoughts

You can see examples of the footnotes throughout this post. What I don't really like is that I need to repeat the <script> boilerplate in the files where I want to use bigfoot, and I am sure there's a more elegant and less repetitive way of doing it. Well, I'll leave it for next time for now.

Happy footnoting!


  1. I've also found that the project had out-of-date dependencies, so I created a PR for it. I've got low expectations for it to be merged soon, as the project seems to have been inactive in the last year, and there's no CONTRIBUTING-like file, nor does it seem easy to reach out to the author.

  2. http://www.bigfootjs.com/