tryckdocs

Theme folders

A theme folder packages a look for reuse: layouts, static files and default theme settings. Point theme.path at one:

1theme:
2  path: themes/acme

themes/acme/
├── theme.yaml      defaults for the theme section
├── layouts/        layout files, by name
├── static/         files copied to the site root
└── plugins/        script plugins

The path must be a directory; anything else is a config.invalid error.

This site uses one: docs/themes/pinta replaces the header partial and adds a stylesheet with its own light and dark colours.

theme.yaml

theme.yaml supplies default values for the theme section. It accepts the same keys as theme in the site config, except path:

1accent: "#0b7a5a"
2colorScheme: auto
3footer: "Built with tryck."
4params:
5  repo: https://github.com/you/project

Settings in tryck.config.yaml win over theme.yaml key by key, so a site can change the accent of a theme without restating anything else. css is the exception: the site's stylesheets are linked after the theme's, so a site can add its own without dropping the theme's. A stylesheet listed in both is linked once. A key that is not a theme setting produces a config.unknownKey warning.

Lookup order

For layouts, static files and script plugins, tryck looks in this order, later entries winning:

  1. the built-in theme,
  2. the theme folder (if theme.path is set),
  3. your site's layouts/ and static/.

So a file in your site's layouts/ or static/ replaces the theme's file with the same path, which replaces the built-in version. You only need to override the files you change.

Files in a theme's layouts/ and static/ are keyed by their path relative to the folder, so themes/acme/layouts/partials/header.html replaces the built-in partials/header.html, and themes/acme/static/css/tryck.css replaces the built-in stylesheet.

Params

Anything a theme's layouts need from the site goes under theme.params and is available as .Theme.Params:

1theme:
2  path: themes/acme
3  params:
4    repo: https://github.com/you/project

1<a href="{{ .Theme.Params.repo }}">Source</a>

Inside a site

A theme does not have to be a separate repository. A folder next to content/ works the same way, which is a convenient way to keep a site's custom layouts and defaults together. See Layouts and templates for how layouts are named.

Edit this page on GitHub