Footnote html customization

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

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.

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" "" >}} and
“this site” {{< footnoteset "2" "" >}} and also this “awesome site” {{< footnoteset "3" "" >}}

{{< footnotelist "References" >}}

HTH, take what you need