# Place references in foot of text

**URL:** <https://zola.discourse.group/t/place-references-in-foot-of-text/1503>\
**Category:** Feature requests\
**Created:** [October 5, 2022, 4:16pm UTC](https://zola.discourse.group/t/place-references-in-foot-of-text/1503 "2022-10-05T16:16:32Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![glhrmv](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/glhrmv/32/839_2.png) [@glhrmv](https://zola.discourse.group/u/glhrmv)\
**Post date:** [October 5, 2022, 4:16pm UTC](https://zola.discourse.group/t/place-references-in-foot-of-text/1503/1 "2022-10-05T16:16:32Z")

</div>

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:

```nohighlight
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](https://global.discourse-cdn.com/free1/uploads/zola1/original/1X/ba59fc8d5dbcbd6f4bb75bb88a633366879ab74b.png)

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

---

<div class="post-metadata">

**Author:** ![apiraino](https://avatars.discourse-cdn.com/v4/letter/a/67e7ee/32.png) [@apiraino](https://zola.discourse.group/u/apiraino)\
**Post date:** [October 6, 2022, 4:40pm UTC](https://zola.discourse.group/t/place-references-in-foot-of-text/1503/2 "2022-10-06T16:40:16Z")

</div>

I think it’s not implemented yet, but at least [there’s a workaround](https://github.com/getzola/zola/issues/1285) if that can help.

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

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [October 6, 2022, 8:30pm UTC](https://zola.discourse.group/t/place-references-in-foot-of-text/1503/3 "2022-10-06T20:30:45Z")

</div>

99% CommonMark features depend on [GitHub - raphlinus/pulldown-cmark](https://github.com/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.

---

<div class="post-metadata">

**Author:** ![glhrmv](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/glhrmv/32/839_2.png) [@glhrmv](https://zola.discourse.group/u/glhrmv)\
**Post date:** [October 7, 2022, 2:51pm UTC](https://zola.discourse.group/t/place-references-in-foot-of-text/1503/4 "2022-10-07T14:51:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![glhrmv](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/glhrmv/32/839_2.png) [@glhrmv](https://zola.discourse.group/u/glhrmv)\
**Post date:** [October 9, 2022, 3:58pm UTC](https://zola.discourse.group/t/place-references-in-foot-of-text/1503/5 "2022-10-09T15:58:03Z")

</div>

I ended up doing this footnote manipulation directly on the client side.

```nohighlight
<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.

---

<div class="post-metadata">

**Author:** ![apiraino](https://avatars.discourse-cdn.com/v4/letter/a/67e7ee/32.png) [@apiraino](https://zola.discourse.group/u/apiraino)\
**Post date:** [October 10, 2022, 8:54am UTC](https://zola.discourse.group/t/place-references-in-foot-of-text/1503/6 "2022-10-10T08:54:29Z")

</div>

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

```auto
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>

```

---

<div class="post-metadata">

**Author:** ![matthillco](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/matthillco/32/869_2.png) [@matthillco](https://zola.discourse.group/u/matthillco)\
**Post date:** [November 30, 2022, 12:28pm UTC](https://zola.discourse.group/t/place-references-in-foot-of-text/1503/7 "2022-11-30T12:28:41Z")

</div>

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)

```auto
---
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:

```auto
Some markdown with a footnote link. [^note1]

```

Then in my template:

```auto
{% 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 %}

```