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