zola
zola copied to clipboard
getzola
Markdown footnotes enhancement
Enhancement
Environment
Zola version: 0.12.2 compiled from git
Have footnotes link back to where they were footnoted
It would be great if there was a way to have a link-back to the location of the footnote. So if the site visitor is reading an article, they can click the footnote and then click the little return icon to go back to where the footnote was declared.
Looks like this is something that others asked about here: https://github.com/raphlinus/pulldown-cmark/issues/142
Would you like me to leave this issue open?
Let's leave it open for now and see if there is progress on the pulldown-cmark issue
In the meantime, I implemented this on my side with some JavaScript:
<script type="text/javascript">
window.addEventListener('load', function() {
for (const ref of document.getElementsByClassName('footnote-reference')) {
const hash = ref.children[0].hash.substring(1);
const refhash = 'ref:' + hash;
ref.id = refhash;
}
for (const footnote of document.getElementsByClassName('footnote-definition')) {
const hash = footnote.id;
const refhash = 'ref:' + hash;
const backlink = document.createElement('a');
backlink.href = '#' + refhash;
backlink.className = 'footnote-backlink';
backlink.innerText = '↩';
const paras = footnote.children;
const lastPara = paras[paras.length - 1];
lastPara.appendChild(backlink);
}
});
</script>
@meithecatte Thanks for the script, it's very helpful!
For information, I've replaced the line with the link back to the reference as below to avoid confusion when there are several references to the same footnote (the arrow only sends back to the 1st reference).
backlink.href = 'javascript:if (window.location.href.endsWith("#' + hash + '")) history.back()';
That way, the arrow will send back to where the reader came from, and only if it comes from that reference. The drawback is that it's not possible to tell where the footnotes are referenced by scrolling down and using the added arrows, but I don't think people often do that.
Another solution would be to add several arrows but I find this confusing.
The whole script becomes (with an option in comment):
<script type="text/javascript">
window.addEventListener('load', function () {
for (const ref of document.getElementsByClassName('footnote-reference')) {
const hash = ref.children[0].hash.substring(1);
const refhash = 'ref:' + hash;
ref.id = refhash;
}
for (const footnote of document.getElementsByClassName('footnote-definition')) {
const hash = footnote.id;
const refhash = 'ref:' + hash;
const backlink = document.createElement('a');
backlink.href = 'javascript:if (window.location.href.endsWith("#' + hash + '")) history.back()';
// To get back by clicking any arrow, use this instead:
// backlink.href = 'javascript:if (window.location.href.search("#") >= 0) history.back()';
backlink.className = 'footnote-backlink';
backlink.innerText = '↩';
const paras = footnote.children;
const lastPara = paras[paras.length - 1];
lastPara.appendChild(backlink);
}
});
</script>
I believe this is now unblocked after https://github.com/raphlinus/pulldown-cmark/pull/654 got merged, example: https://github.com/raphlinus/pulldown-cmark/blob/master/examples/footnote-rewrite.rs
The PR is exactly what I was looking for, thank you!
What do you think of giving backref links a class, to help style them?
What do you think of giving backref links a class, to help style them?
I've considered it, but it sounds like a separate big feature, that needs to be designed in the first place.
If this feature is desired, let's create a separate issue and discuss it.
Oh, I didn't have any specific wish other than a named CSS class in the new rendered html. I worked around the need with a .footnotes-list li p:last-child a:last-child shenanigan which works fine for me because my content only references each note once, but does not work in the general case. Does this deserve a new issue?
Another less-than-ideal thing: the bottom_footnotes = true also variant adds square brackets around the number in footnote references, like GitHub does, but this is not implied by the name nor the documentation. Is this intentional?