How to move a <style> block generated in a shortcode to the HTML head?

support
,
2

Only after having posted my question, Discourse finally decided to show me several existing threads discussing the same problem, one of which I decided to follow: How to associate CSS to a specific partial and render it in <head> section of the HTML

Based on this, I implemented the following solution using templates.Defer:

head.html partial:

<head>
	{{- $data := (dict "page" .Page ) -}}

	{{- with (templates.Defer (dict "data" $data)) -}}
		{{ with .page.Store.Get "additionalStyles" }}
			<style>
				{{- range . -}}
					{{ . | safeCSS }}
				{{- end -}}
			</style>
		{{- end -}}
	{{- end -}}
</head>

footlist.html shortcode:

{{ .Page.Store.Add "additionalStyles" (partial "footnote-style" (dict "relevant" "data") | safeCSS) }}

footnote-style.css is a CSS partial which uses the variables from the given dictionary.

1 Like