Footnote html customization

support
1

I want footnote-definitions to appear in a collapsed <details> tag. How to make that happen?

2

How to make that happen?

You don’t. It’s currently not possible. Footnotes are not a Hugo features, they are generated by Goldmark, the markdown renderer used in Hugo. And that one does not allow any templating.

What you COULD do is to “pretend” it’s a details tag and do some fancy CSS-display and hide magic on the generated code. That might be possible and in the end might look like a details tag, but it’s not proper markup in that case.

Lastly: Check out shortcodes. Do your own “footnote” shortcode and create another “footnote-details” shortcode that displays collected footnotes. This is completely de-coupled from the footnotes in markdown, but you can layout them however you wish. Requires some knowledge in Scratches.

3

You can start with my shortcode samples

markdown for the page

+++
title       = "footnotes"
description = "FuĂźnoten"
date        = "2018-11-08T20:40:13+01:00"
+++
## foot notes
This is an article with many external references. Please visit “this site” {{< footnoteset "1" "site1.com" >}} and
“this site” {{< footnoteset "2" "site2.com" >}} and also this “awesome site” {{< footnoteset "3" "awesome-site.com" >}}

{{< footnotelist "References" >}}

HTH, take what you need

1 Like