Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

This course is the most refreshing take on teaching design that I've come across.

— Mikaël Sévigny, Developer

Section Tag

The section tag is a useful way to abstract and reuse your views by extracting a section of markup that can then be rendered elsewhere with a yield tag.

Overview

Most commonly this section/yield approach is used to create a global area in your layout that can be changed by your templates. This eliminates the need for any brittle and messy logic.

Cheatsheet:

  • No thank you: {{ if template == "news" }} hardcode something {{ /if }}
  • Yes please: {{ section:something }} + {{ yield:something }}

Example

In the example below, everything within the section:sidebar tag will not be rendered in the template, but rather in the layout.

// The Template
 
<h1>{{ title }}</h1>
{{ content }}
 
{{ section:sidebar }}
<h2>About the Author</h2>
<div>
{{ author:name }}
</div>
{{ author:bio }}
{{ /section:sidebar }}
// The Layout
<html>
<head>
<title>{{ title }} | {{ site_name }}</title>
</head>
<body>
<article>
{{ template_content }}
</article>
<aside>
{{ yield:sidebar }}
</aside>
</body>
</html>

If you haven't read up on templates and layouts, you should. It's relevant.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →