I just got started using Zola and I’ve been importing some articles I’ve written in other sites that automatically place references (i.e. footnotes) at the foot of the text. The default behavior places them in line, so when I write something like this:
Here is a test reference[^baudrillard]. Some more text here.
[^baudrillard]: Baudrillard, J. (1992). The Illusion of the End.
A new paragraph here.
it renders like this:
The requirement I’m looking for is to have all references throughout the text collected at the bottom of the page, ideally with links to go back to the position of the reference in the text, for each reference. Is this possible to do currently?
99% CommonMark features depend on GitHub - raphlinus/pulldown-cmark having it implemented. We do override some stuff for things like internal links or shortcodes but for pure Markdown features like that, it needs to be implemented upstream.
The workaround seems to address only the requirement for adding the “go back” links for each reference, whereas my main gripe is with having them all collected at the bottom, rather than printed directly in-line. But this is good to know, thank you.
I know that I can manually move the footnotes in the file to the bottom, but I have written these in HackMD and it’s just my preferred method of working with references/footnotes so I would rather not have to do that: the parser should do that for me, particularly since it seems to be a standard feature in other Markdown implementations.
In any case, I wrote a comment in a draft PR in the Pulldown repo which looks inactive since April and hope to draw some attention to it, as I’m really looking forward to sharing my Zola site with other people.
I ended up doing this footnote manipulation directly on the client side.
<script type="text/javascript">
window.addEventListener('load', function() {
let footnoteDefinitions = Array.prototype.slice.call(document.getElementsByClassName('footnote-definition'));
// Do nothing if no footnotes in this page
if (footnoteDefinitions.length === 0)
return;
// Create footnotes div
const articleText = document.getElementById("post-content"); // Custom id for my needs, change accordingly
let footnotesDiv = document.createElement("div");
footnotesDiv.className = "footnotes";
// Move footnotes to footnotes div
for (const footnote of footnoteDefinitions) {
footnotesDiv.appendChild(footnote);
}
// Add footnotes to bottom of page contents
articleText.appendChild(footnotesDiv);
});
</script>
There’s likely a more performant solution but this works fine for my needs.
Here’s my workaround, which gives me complete control over how the footnotes HTML renders. It likely won’t suit anyone sticking strictly to Markdown for all content, but if you’re happy adding footnotes into the meta data, it might work for you:
In your meta data (I use YAML style, not TOML)
---
extra:
footnotes:
-1: "This is the text for footnote 1"
-2: "This is the text for footnote 2"
---
In the main body of my markdown content I manually add footnote links in this style:
