Backlinks for custom (automated) footnotes

Support
1

I’m developing a custom, shortcode-based footnote formatting for my articles. The intent is to automate the creation and coordination of footnotes, by relying on the nth argument provided for shortcodes. Zola docs even mention it as a useful tool for creating footnotes and such.

The problem is: with the way footnote count is automated, there’s no way for me to link back to a specific note without having to manually count the notes in a finished article before publishing. The intent, may I remind you, is to avoid this part of manual work.

While there is a way to label a custom footnote element with a unique ID, there’s no way to extract the footnote’s actual, user-facing ID (which is numeric and ascending, as is common for footnotes, and – again, generated automatically). What I could have done, if it were possible, is give a footnote a unique ID (along with a user-facing one), and then link back to this particular note using its unique ID by displaying its user-facing ID.

For example:

In this book¹¹, George talks about <...>
¹¹ On Nature of Things, Kevin George, 1998, p. 11
<...>
As mentioned in the book²¹, the conversation...
²¹ same book as in note 11, pp. 182—187

…where each footnote numeral (e.g. In this book¹¹) links to said footnote’s element (e.g. ¹¹ On Nature of Things) with a <a href="#footnote{{nth}}"> element.

In the example above, getting notes 11 and 21 is easy, but getting note 21 to link to 11 – without me going back and looking up which note that is – is basically impossible.

So far, I’ve tried creating a global reference object within the article Markdown document, manually entering the unique ID (but not the user-facing one) into it as a key, and then assigning the value (i.e., the user-facing ID a backlink would display) at shortcode-assisted generation of foonotes. This isn’t possible: Zola becomes upset with me for trying to {% set %} something within a conditional {% if %} clause:

[after rendering the footnote element]

{% if unique %}
{% set_global reference[unique] = nth %}
{% endif %}

No other method comes to mind.

Is it even possible to automate something like this? Setting up the reference object via frontmatter is also possible, but I don’t believe shortcodes/templates can write to TOML from within a document.

I haven’t explored this, but: would it be possible to set up a text-based “database” in an external file, to which Zola can write and from which it can read during rendering? That could be solution, if a cumbersome one.

1 Like
2

Hi, this is probably not relevant to you anymore, but I’m going to share my (also quite cumbersome) solution (that works) for any other netizens who stumbled upon this post, like me.
First, I have a shortcode footnote.html:

{% set footnum = "footnote" ~ nth %}
{% set footnum2 = "#"~footnum %}
<a class = "fnnum" href={{footnum2}} id={{"initial-" ~ footnum }} >.</a>
<span class = "fncon">
	 {{ page.extra[footnum] }}
</span>

fncon is extraneous to the purpose of this, but for the curious: It shows the footnote to the side of the page through some custom css when it is hovered.

Secondly, I have footnoted.html, that, invoked at the end of the page, generates the relevant footnote:

{% set footnum = "footnote" ~ nth %}
{% set initial = "#initial-footnote" ~ nth%}
<div class = "footnote-footer"><a href = {{initial}} id = {{footnum}} aria-label="Jump up" title = "Jump up">{{nth}}.</a> {{ page.extra[footnum] }}</div>

Both of these, when clicked, send you to the other.
To actually declare the text of the footnotes, within the article.md file, within the variable section (delimited by +++), under the [extra] dictionary, you add footnote1,footnote2 and so on.

An example markdown file that does this:

+++
title = "My Example Article"
date = "2024-09-22"
[extra]
footnote1 = "floop"
footnote2 = "boop"
+++
Fleep{{ footnote() }} Beep{{ footnote() }}
{{ footnoted() }}
{{ footnoted() }}

the result of which will look like the following picture: ( The colors won’t be the same because of the aforementioned custom CSS )
Example Article

3

As an addendum, unless you’re in a for loop (within Tera), set_global has the same behaviour as set

4

I don’t know if this helps at all, but Zola actually natively supports footnotes. It’s just not super well documented.

First you need to enable it in config.toml

# Uses commonmark syntax for footnotes
bottom_footnotes = true

And then you can write foot notes as follows:

Here is a simple footnote[^1].

A footnote can also have multiple lines[^2].

[^1]: My reference.
[^2]: To add line breaks within a footnote, prefix new lines with 2 spaces.
  This is a second line.

The identifiers don’t have to be numbers and they don’t have to be defined at the bottom of the document either. With bottom_footnotes set to true Zola will automatically inject the footnotes at the bottom of your markdown’s content.

(these also automatically include backlinks)

1 Like
5

A quick note about the above: bottom_footnotes must be added to the [markdown] section of the config. Zola will complain if you add it anywhere else.

6

Thanks for pointing that out @matthillco. I should probably have made that more clear the first time.