Add page templates

Templates render the actual content of a page: the title, the body, and anything else stored on the record. They live in templates/. Basker picks a template based on the content type of the visited URL. You will add two templates: a default page template and a homepage template.

How template selection works

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

• Basker renders a page record using templates/page.liquid.
• Basker renders an event record using templates/event.liquid.
• Basker renders a blog post using templates/post.liquid.

The homepage is not a special case. It is the built-in page record at /. Basker fixes its slug to home, and no one can delete or rename it. Basker renders it with templates/page.liquid like any other page, unless an editor gives that record 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 happen here:

• {% layout 'layouts/default.liquid' %} declares which layout wraps this template. Basker does not wrap a template in a layout automatically, so this line must be present.
• {% capture content_for_layout %} ... {% endcapture %} collects the template's markup into a variable. The layout renders that variable 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 will create the blocks themselves on the next page. For now, this line 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, Basker renders it 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 %}

This template is deliberately spare. The Variants and theme settings page explains how to pick this template for the homepage record. It also explains how to turn the template into a richer variant.

Step 3: Add a template schema

Templates can declare their own settings and which blocks editors may 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 holds template-level options. You will add a setting in Variants and theme settings. blocks is the allowed-blocks list. An editor can add any block whose name appears here to a page that uses this template. This list is empty for now. You will add block names to it on the next page once the 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)

Basker never wraps a template in a layout automatically. The {% layout %} tag you added in Step 1 makes that happen. To use a layout other than the default, point the tag at a different file instead:

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

You will not need this in the tutorial. The default layout you built on the previous page works for everything here.

Step 5: Verify in the browser

Save the files. The dev-server browser tab should reload. You will see templates/page.liquid rendering the home page record from your test site, inside the layout you built earlier.

If the page appears empty or unstyled, this is normal. There is no CSS in assets/main.css yet, and the page record might not have content. Open another page on your test site, such as /about or /contact. Check that the title and body render.

What's next

Build reusable blocks: three blocks editors can drop into the region you 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.