Partials

Updated: September 28, 2024

Partials give more granular precision of when and where something is applied.

CSS PARTIAL

{{ if .Params.css }}
<link rel="stylesheet" href="{{ .Params.css }}">
{{ end }}

JS PARTIAL

{{ if .Params.js }}
<script src="{{ .Params.js }}"></script>
{{ end }}

For JS files included in the site itself, it would be best to include them in the assets/ dir instead of static/, as assets/ allows for automatic minification and fingerprinting, among other things.

I’ve spent some time trying to optimize the inclusion of assets on pages in my own theme, as part of a plugin structure I’ve implemented. If you’d like, some related files are linked below:

head.html 102 - loads CSS files in the of the website. foot.html 70 - loads JS files at the end of the of the website. styles 17 - partial that generates tags based on items in a dict. script 65 - partial that generates tags based on items in a dict. katex/foot.html 8 - a partial included into foot.html when the katex shortcode appears on a page. Uses script. katex/head.html 6 - a partial included into head.html when the katex shortcode appears on a page. Uses styles.

The global head.html and foot.html partials also leverage a parameter $.Site.Params.http2 to determine whether common assets get bundled into one file (http2 = false) or not (http2 = true).

The theme hasn’t been released yet, as I have a lot of documentation left to write regarding the plugins system. If there are questions regarding how I’ve implemented any of this, though, I’m happy to answer them.

Quick edit: Forgot to mention that the partials load configurations from the theme and from the site to determine things like which partials to load for which plugin and whether the partial can be cached or not. This would allow e.g. someone to create their own PhotoSwipe shortcode for their site and fully integrate it into the theme without modifying any theme files.

SVG ICONS

{{ $svg := . }}
{{ $class := print $svg "-icon" }}
{{ $match := "<svg (.*)?>(.*)</svg>" }}

{{ $replaceWith := printf `<svg class="%s" ${1}>${2}</svg>` $class }}
{{ return (replaceRE $match $replaceWith (printf "/assets/images/%s.svg" $svg | readFile) | safeHTML) }}

thus creating icon classes that can be styles with css like

.address-book-icon
  color: #ff9900