If you like my work, please consider supporting its development.

The styles partial is used to generate a <link> tag that includes an external stylesheet on a page. It is compatible with files from CDNs, static files, and stylesheet assets.

Usage

The styles partial takes a dict as its context argument, with the following possible keys:

KeyDescriptionExample
Asset

Specifies a path relative to the assets/ directory where a CSS file can be used as a resource. It or Src must be present.

"css/page.css"
Src

Specifies a path relative to the static/ directory or an absolute URL to where a CSS file is located. It or Asset must be present.

https://cdn.example.com/resource.css or /path/to/static-file.css

Preload

Whether the CSS file should be preloaded (asynchronously loaded and possibly pushed by the server with HTTP/2 Push). Defaults to true.

false
CrossOrigin

Set the crossorigin attribute on the <link> tag. CDNs may require it to be set to "anonymous" for CORS requests.

"anonymous"
Integrity

Set the integrity attribute on the <link> tag to prevent maliciously modified files from loading. Only for stylesheets included with Src - those using Asset generate this value.

sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ
AttrsAny other attributes that may not be covered by the above options.media="print"
Root

Must be set to the top-level context ($) so the partial can access site variables via .Root.Site.Params.

$

Examples

Below, you can find examples using the styles partial with Asset and with Src. The call to styles can be long, so the lines have been broken up to better fit on the page without causing too much horizontal scrolling.

{{ partial "styles" (dict "Asset" "css/foundation.css" "Root" $) }}
{{ partial "styles" (dict "Src" "https://use.fontawesome.com/releases/v5.2.0/css/all.css"
"Integrity" "sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
"CrossOrigin" "anonymous" "Root" $) }}