Lego2012
6/16/2017 - 12:14 PM

Text Partials into HTML Templates

Text Partials into HTML Templates

The most obvious use case for this is inline CSS styles, which you now can do without having to name your partials with a html suffix.

A simple example:

In layouts/partials/mystyles.css:

body {
    background-color: {{ .Param "colors.main" }}
}

Then in config.toml (note that by using the .Param lookup func, we can override the color in a page’s front matter if we want):

[params]
[params.colors]
main = "green"
text = "blue"

And then in layouts/partials/head.html (or the partial used to include the head section into your layout):

<head>
    <style type="text/css">
    {{ partial "mystyles.css" . | safeCSS }}
    </style>
</head>

Of course, 0.20 also made it super-easy to create external CSS stylesheets based on your site and page configuration. A simple example:

Add “CSS” to your home page’s outputs list, create the template /layouts/index.css using Go template syntax for the dynamic parts, and then include it into your HTML template with:

{{ with  .OutputFormats.Get "css" }}
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink |  safeURL }}">
{{ end }}