Themes and sections

A theme is the design part of a site: layouts/, sections/, partials/, assets/ and look.yaml. This page is for changing it. You'll need to be comfortable with HTML and CSS; HotDog's templates use Go's template language ({{ .Title }}, {{ range … }}).

Sections

A section is a template in sections/. A page stacks sections in its front matter; the editor shows each as a card with a form. To make the form good, start the template with a comment that declares its fields:

{{/* section
label: Hero
about: The big opening at the top of a page, with buttons.
fields:
  - { name: eyebrow, type: text, help: A short line above the heading. }
  - { name: heading, type: text, required: true }
  - { name: text, type: markdown }
  - name: buttons
    type: list
    fields:
      - { name: text, type: text, required: true }
      - { name: href, type: link, label: Goes to }
      - { name: primary, type: bool, label: Main button }
*/}}
<section class="hero">…

Each field has a name, and optionally type, label, help, required and default:

Type	The form shows
text	one line
textarea	several lines of plain text
markdown	Markdown (render it with markdownify)
link	an address on the site or elsewhere
image	a picture, from the media library
bool	a checkbox
number	a number
select	one of options: [a, b, c]
list	repeated items, with their own fields
group	a set of fields
data	a file in data/
collection	a collection, such as articles

A section without the comment still gets a form: the editor reads which fields the template uses. Declaring them gives better labels, help and types.

The look

look.yaml lists what the editor's Look panel can change, and the limits:

tokens:
  - { name: accent, label: Accent, type: color, default: "#ba5019", dark: "#f2a65a" }
  - { name: bg, label: Background, type: color, default: "#fbfaf7", dark: "#12161c" }
  - name: font
    type: font
    default: inter
    options:
      inter: '"Inter", system-ui, sans-serif'
      serif: 'Charter, Georgia, serif'
  - { name: logo, label: Logo, type: image }

contrast:
  - [text, bg]       # pairs that must stay readable
  - [accent, bg]

A site's choices go under look: in site.yaml, and the build turns them into a small stylesheet of CSS custom properties (--accent, --font, …). Your CSS uses var(--accent). In the head, after your stylesheet:

{{ with lookCSS }}<link rel="stylesheet" href="{{ . }}">{{ end }}

and {{ look "logo" }} reads one value. Every contrast pair is checked in light and dark mode; the checks won't publish one under 4.5 to 1.

Going deeper

HotDog's own theme guide covers long lists and pagination, banners, events in templates and more. To share sections between sites, make a pack.