Backlinks for footnotes

[Óscar]

Footnotes usually have a backlink to the footnote's origin so readers can easily return after reading the note (example).

Zola currently lacks this feature (see getzola/zola#1285 and pulldown-cmark/pulldown-cmark#142).

To add this functionality, I will implement a JavaScript solution that creates backlinks similar to this comment.

It will have the option to be enabled globally in config.toml as well as for individual posts.

[Óscar]

It's done!

The JavaScript code is designed to create backlinks for footnotes (the 538 byte minified version is the file that's actually loaded).

To enable it, set footnote_backlinks = true either in the [extra] section of either config.toml (globally enabled) or the individual post's front matter.

How it Works

assignReferenceIds()

This function is used to assign unique IDs to all footnote references within the document. It does this by:

• Selecting all elements with the class .footnote-reference.
• Iterating over each reference and assigning a unique ID to it. This ID is created by using the hash of the reference's first child, prefixing it with "ref:".

This ensures that each reference in the document has a unique and easily identifiable ID.

createFootnoteBacklinks()

This function takes care of creating backlinks for each footnote definition if a corresponding reference exists in the text. This is done by:

• Selecting all elements with the class .footnote-definition.
• Iterating over each footnote and generating a backlink ID by concatenating "ref:" with the footnote's ID.
• Checking whether a corresponding reference with that ID exists in the document; it's possible for a footnote to not be referenced in the text.
• If it exists, creating an anchor element (<a>) with an href pointing to the corresponding reference ID and appending a backlink symbol (↩) to the last child element of the footnote.
  This creates a backlink next to each footnote that the reader can click on to navigate back to the corresponding reference in the text.

initFootnotes()

This is the main function that brings everything together by calling both assignReferenceIds() and createFootnoteBacklinks(). It ensures that both functions are executed in order to set up the references and backlinks as described above.

Event Listener

Finally, the code waits for the window to load by attaching an event listener to the load event. Once the window is fully loaded, the initFootnotes function is executed, initializing the footnote handling mechanism.

Styling

I've added some very basic styling to the footnote-backlink class:

tabi/sass/parts/_misc.scss

Lines 141 to 144 in 5cdc18e

 .footnote-backlink { 
     font-size: 0.8rem; 
     margin-left: 0.2rem; 
 } 

Live Example

I've enabled the feature in the Markdown examples page.