Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

For a software dev like me who has no idea how to create a cute hand-drawn dashed line, this course just 100% works.

— Ira Zayats, Developer

Yield Tag

The yield tag is a useful way to abstract and reuse your views by displaying content or markup extracted in a template by the section 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: {{ yield:something }} + {{ section: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>

Fallback Content

If no section is being pushed into the yield, you may display fallback content by using the tag as a pair.

<aside>
{{ yield:sidebar }}
<img src="/img/CLIPPY.GIF">
<p>Hi! It looks like you're building a website. Would you like help?</p>
{{ /yield:sidebar }}
</aside>

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 →