Extending the theme from a site

August 8, 2026 · 1 min read

Table of contents

Everything on this page beyond plain Markdown comes from the example site, not the theme: two shortcodes and two hook partials. It doubles as a test that such site code keeps working with the theme.

Hooks

A hook is a partial the theme calls if the site provides it.

head-end adds the flash card stylesheet, only on pages that use the cards
single-after-content adds the video below this text
- it reads the youtube value from the front matter
- the player loads only after a click

Shortcodes

The banner above is a linked, responsive image built from a global asset.

Flash cards

The deck is a native <details> element
Each card flips with a checkbox, so no JavaScript is involved

Show flash cards Hide flash cards 2 cards

Question Which file adds markup to the end of <head>? Tap to reveal Answer layouts/_partials/hooks/head-end.html in the site. Tap to flip back Question How should a site stylesheet pick its dark colours? Tap to reveal Answer With light-dark() or the theme’s colour variables. Tap to flip back

Hooks

Shortcodes

Series banner

Flash cards