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
I was already using
hexo-footnotes2, 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:
This generates HTML looking like this:
<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>
for the origin, and
for the destination.
Now we need to install bigfoot. Here’s what I’ve done, step by step:
- Downloaded the bundle from the website1, and copied
bigfoot.min.jsinto my theme’s directory (
themes/landscape/source/js), together with a minified version of jQuery.
@import "bigfoot.css"at the end of my main style file inside the css directory,
Now I just need to write the following snippet in the posts where I want to use it:
and use my footnotes exactly the way I did before.
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.
- 1.http://www.bigfootjs.com/ ↩
- 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. ↩