Add page templates

Templates render the actual content of a page: title, body, anything stored on the record. They live in templates/ and are picked by the content type of the URL being visited. You'll add two: a default page template and a homepage.

How template selection works

When a visitor opens a URL, Basker finds the matching content record and looks for a template based on the record's content type:

• A page record renders with templates/page.liquid.
• An event record renders with templates/event.liquid.
• A blog post renders with templates/post.liquid.

The homepage is not a special case: it's the built-in page record at / (its slug is fixed to home and can't be deleted or renamed), so it renders with templates/page.liquid like any other page unless that record is given a template override.

Every supported content type has a default template name. The full list is on Template references.

Step 1: Add templates/page.liquid

Create templates/page.liquid:

{% layout 'layouts/default.liquid' %}
{% capture content_for_layout %}
<article class="page-content">
  <h1>{{ page.title }}</h1>

  <div class="page-content__body s-prose">
    {{ page.richDescription_html }}
  </div>

  {% stageblocks page %}
</article>
{% endcapture %}

A few things are happening here:

• {% layout 'layouts/default.liquid' %} declares which layout wraps this template. A template isn't wrapped by a layout automatically, so this line has to be there.
• {% capture content_for_layout %} ... {% endcapture %} collects the template's markup into the variable the layout renders with {{ content_for_layout }}.
• page is the current page record. Its public fields (title, richDescription_html, slug, and configured custom data) are available as properties.
• richDescription_html is the ready-to-render rich-text description.
• {% stageblocks page %} reserves a region where editor-placed blocks render inline. You'll create the blocks themselves on the next page; for now this just leaves an empty hook.

Step 2: Add templates/page.homepage.liquid

The homepage is the built-in page record at /. Until you give it a template of its own it renders with templates/page.liquid like any other page. Create a named alternate for it, templates/page.homepage.liquid:

{% layout 'layouts/default.liquid' %}
{% capture content_for_layout %}
<section class="hero">
  <h1>Welcome to Remarkable Theatre</h1>
  <p>What's on this season.</p>
</section>

{% stageblocks page %}
{% endcapture %}

It's deliberately spare: the Variants and theme settings page walks through picking this template on the homepage record and turning it into a richer variant.

Step 3: Add a template schema

Templates can declare their own settings and the blocks editors are allowed to add. The declaration goes in a {% schema %} block at the bottom of the file. Add this to templates/page.liquid:

{% schema %}
{
  "settings": [],
  "blocks": []
}
{% endschema %}

settings is for template-level options (you'll add a setting in Variants and theme settings). blocks is the allowed-blocks list: any block whose name appears here can be added by an editor on a page using this template. It's empty for now; you'll fill it in on the next page once blocks exist.

Schema-less templates are valid but the theme checker emits a warning. Adding even an empty schema silences it.

Step 4: Choose a different layout (optional)

A template is never wrapped by a layout automatically; the {% layout %} tag you added in Step 1 is what makes that happen. To use a layout other than the default, point it at a different file instead:

{% layout 'layouts/checkout.liquid' %}

You won't need this in the tutorial; the default layout you built on the previous page is fine for everything here.

Step 5: Verify in the browser

Save the files. The dev-server browser should reload to show templates/page.liquid rendering against the home page record on your test site, wrapped by the layout you built earlier.

If the page comes up empty or unstyled, that's expected: there's no CSS in assets/main.css yet, and the page record might not have content. Open another page on your test site (/about, /contact, anything that exists) and check that the title and body render.

What's next

Build reusable blocks: three blocks editors can drop into the region you just reserved with {% stageblocks %}.

Going deeper

• Templates: naming conventions, alternate templates, route-specific quirks.
• Rendering blocks: how {% stageblocks %} resolves and renders editor-placed blocks.
• Page template reference: every variable available in a page template.