Bigfoot footnotes in Jekyll
How to get Bigfoot footnotes to work on a Jekyll site:
Download Bigfoot.
Download jQuery.
Once you decompress the downloaded bigfoot.zip
file, you should have the following files (as of this writing):
bigfoot-default.css
bigfoot-default.scss
bigfoot.js
bigfoot.min.js
changelog.md
license.md
readme.md
If you already have a place you put .js
files being used for your site, then move bigfoot.js
and/or bigfoot.min.js
there. I didn’t, so I created a js
directory at the root of the site folder and moved those files there.
Move bigfoot-default.scss
to the _sass
folder of your site. I think sites created with a slightly older version of jekyll might have a _css
directory instead, in which case you could move bigfoot-default.css
to that directory, or adapt to whatever your current setup is.
Now all the files are in place. You will need to make the following edits to your source files:
Edit _includes/head.html
and add the following lines below the <head>
tag:
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/js/bigfoot.js"></script>
<script type="text/javascript">
var bigfoot = $.bigfoot(
{
actionOriginalFN: "ignore",
positionContent: "true"
}
);
</script>
Note three things about the above:
- The
/js
part of the path will depend on where your.js
files live. - Line
1
is where you move the jQuery.js
file to thejs
directory and refer to it there, so the filename would depend on the version you have. actionOriginalFN: "ignore"
, andpositionContent: "true"
are options that I chose to add to Bigfoot (you can read about all those configuration options on the Bigfoot homepage) and are not required.
Finally, you need to load Bigfoot’s style files that you moved earlier. Edit main.scss
’s last few lines to add a reference to Bigfoot’s style file:
// Import partials from `sass_dir` (defaults to `_sass`)
@import
"base",
"bigfoot-default", // hello there
"layout",
"syntax-highlighting"
;
Update (10/2/2015)
I made a mistake in the last code block above. I had written "bigfoot-number"
, but if you have been following my instructions, it should be "bigfoot-default"
. The mistake is now fixed, so if this is the first time you’re reading this post, the code is good.
If you’re curious, "bigfoot-number"
is what you should include if you’re using this (download link) variant of Bigfoot that makes the footnote links in the body of the text into numbers, as opposed to the default bubble with three dots.
Sherif regrets the error.
That should be all. To add a footnote you add [^1]
in the body of the text, and [^1]: This is my glorious and most important footnote
at the bottom of your .markdown file.