Thanks! That is a great example in how to format references in a visually appealing way, even if it lacks the convenience of linking. It looks pretty perfect for links to external sources, though less usable for prose-style footnotes (interesting notes and asides).
I am actually a developer and have made a solution for this today, which I’ll post below. Basically what this JavaScript does is take all the section-based footnotes from various Markdown cards (if there are multiple; if not it does nothing), re-numbers them then moves every footnote into the last footnote section).
So basically on the front-end and for visitors viewing the article via the web page, it restores how Markdown footnotes would have appeared before in Ghost, but allowing posts to be broken across multiple cards to use all the fancy embeds and callouts, too. Just the simple footnotes that Ghost generates, and with the standard Ghost styles (I prefer these vs. pop-ups).
If anyone wants to use on their theme, paste it into your post.hbs file of theme, after </main>. You could actually also paste it into the “footer embed” field in admin. It will load on every page that way, but only actually does anything when you’re viewing a post with multiple footnotes due to the Markdown cards issue. It’s a slightly more optimised way adding to post.hbs, but I’d recommend just pasting into the footer embed box for non-coders.
Also @Ghost Team, I’d suggest that since the CMS is in Node you could apply this code with minimal tweaks to the core as a filter after body HTML is generated. That would be the real fix, so the Footnotes are served in the correct format from the back-end (RSS readers, emails, etc). — I suspect the new Footnotes will not be Markdown based, in which case this would still be a good fix so writers can use the old MD-based footnotes without limitations, if they prefer.
Feel free to post feedback or suggestions! I’ll tweak it if needed.
Update: I applied a fix to the below after testing on my first real world post. It now always moves the combined footnotes to the very bottom of article.
<script>
// footnotes fixer
(() => {
const container = document.querySelector('.gh-content');
const fnSections = container.querySelectorAll('.footnotes');
if (!fnSections.length) return;
if (fnSections.length > 1) {
// re-number footnotes
const fnRefs = container.querySelectorAll('.footnote-ref a');
fnRefs.forEach((ref, index) => {
const fnIndex = index + 1;
const note = document.querySelector(ref.getAttribute('href'));
ref.textContent = `[${fnIndex}]`;
ref.href = `#fn_${fnIndex}`;
ref.id = `fnref_${fnIndex}`;
note.id = `fn_${fnIndex}`;
note.querySelector('.footnote-backref').href = `#fnref_${fnIndex}`;
});
}
// combine all into last footnote section, move that to end of article
const lastSection = fnSections[fnSections.length - 1];
const lastListFirstItem = lastSection.querySelector('.footnote-item');
fnSections.forEach((section, index) => {
if (index === fnSections.length - 1) {
container.appendChild(section.previousElementSibling);
container.appendChild(section);
return;
}
section.querySelectorAll('.footnote-item').forEach(item => lastListFirstItem.before(item));
section.previousElementSibling?.remove(); // remove hr.footnotes-sep
section.remove();
});
})();
</script>
