I've added nice footnotes to my website

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-footnotes2, a hexo plugin that simplifies writing footnotes. When I want to write one, I do something like:

1
Hey, this is a footnote[^1]!

and then somewhere else I write the content:

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

This generates HTML looking like this:

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

for the origin, and

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 website1, 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:

1
2
3
4
5
<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. 1.http://www.bigfootjs.com/
  2. 2.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.