TheOverAnalyzed

Backstory ¶

Exactly 20 days ago, I publicly committed myself to integrating fancy footnotes into my blog (as seen on Marco.org and Six Colors). And guess what? I’ve done it!

Ever since I started following prominent Apple bloggers a few years ago, the concept of footnotes really grew on me subconsciously.^[1]

I’m sure by now you have concluded that I can talk incessantly and often go off on long tangents. I think that is just how my brain works. Occasionally, whilst conversing with people, I often step outside myself and say/think, “Am I really still talking right now? Is this person not yet burned out?”^[2]

And so it would not surprise you that, in my writing, I find myself often having to use parenthesis and em dashes to explain my thoughts in more detail. Peruse my longform articles and I’m sure you’ll find that to be the truth. Problem is, parsing through all those em dashes and parenthesis gets daunting for the reader. I bet if someone analyzed my average sentence length^[3], I would be far past the ‘readability length.’

Searching ¶

I searched high and low and came up on a post by Marco, in which he plugged a project by Chris Sauvé^[4] of lemondesign.com^[5] called bigfoot.js. I read through that and then did a few DuckDuckGo searches. I found this post^[6] on Reckless Unicorn, and after much trial and error^[7], I finally got them working.

(Note my liberal use of fancy schmancy footnotes in this post? Yay Bigfoot.js.^[8])

bigfoot-number.css Troubles ¶

I was having trouble getting the footnotes to reset their count for each new post on my Archive page. By default, for bigfoot-number.css, the footnotes will number sequentially for the entire page. For example, if the first post on a page has two footnotes, and the second post down has one footnote, the number of the footnote on the second post will be 3. Ideally, the first footnote on the second post should be 1, as the footnote numbers should reset for each post.

This isn’t a super big deal, except that it totally is.

I looked everywhere for help. Unfortunately, there wasn’t a single write-up out there that told me exactly what it was that I needed to do. So I contacted the author of bigfoot.js (again), and I didn’t really get anywhere after talking with him, as there is only so much he can do since every CMS implements things differently. I saw some posts, one from Crate of Penguins, and another from Reckless Unicorn. Those authors weren’t much help beyond what they already wrote in their posts^[9]

bigfoot-number.css Solution ¶

Somewhat fortuitously, I saw a thread on Twitter between Jason Snell and a few other heavyweights talking about this very thing. I tried again tonight and it worked!

The key was passing a particular object literal in the Header field of the Code Injection area.

Here is how to get there:

1. From the main site editor (with the horizontal panes to the left such as Pages, Design, etc.), choose Settings

2. Next, Advanced

3. After that, Code Injection

4. In the Header field, on a new line immediately following the script type="text/javascript" line, copy and paste the following:

   $.bigfoot (
   	{
   		numberResetSelector: “article”
   	}
   );
   

What you are essentially doing here is telling the bigfoot.js script to reset the count of the footnotes every time the script recognizes a repeated tag. In this case, that repeated tag is the ‘new article’ tag that Squarespace choose to utilize. In this situation, the article tag.^[10]

So, for completeness, this is what my Header in the Code Injection field looks like:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/s/bigfoot.js"></script>
<link rel="stylesheet" type="text/css" href="/s/bigfoot-number.css">
<script type="text/javascript">
	$.bigfoot (
		{
			numberResetSelector: "article"
		}
	);
</script>

And there you have it! Bigfoot away!