Place references in foot of text

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:

Screenshot 2022-10-05 at 17.14.40

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?

Thanks

I think it’s not implemented yet, but at least there’s a workaround if that can help.

I wonder if it can also be implemented without using JavaScript.

1 Like

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.

Thank you both for the replies.

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.

1 Like

My workaround (more limited because I don’t use JavaScript on my website) is to hand write the HTML:

This is the text<a href="#1" id="fnref:1">[1]</a>

---

[^1]: And this is the footnote with a manual backlink. <a href="#fnref:1">&#8617;</a>

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:

Some markdown with a footnote link. [^note1]

Then in my template:

{% if page.extra.footnotes %}
	<details class="footnotes">
		<summary class="footnotes-title">Footnotes</summary>
		<div class="footnotes-content">
			<ol class="footnotes-list">
			{%- for fn,fntxt in page.extra.footnotes -%}
				<li id="note{{loop.index}}">{{ fntxt|safe }} <a href="#note{{loop.index}}">↩</a></li>
			{%- endfor -%}
			</ol>
		</div>
	</details>
{% endif %}