Theme Layouts

Posted February 21, 2017
Addon Development
Beginner

Introduction

Theme Layouts are the outer most structural layout of your website. The theme layout is responsible for high level structural blocks and positioning the content block.

Theme layouts should be defined within the theme's resources/views/layouts directory:

{% verbatim %} <!doctype html>

<html>

<head>
    {% block metadata deferred %}
    {% include "theme::partials/metadata" %}
    {% endblock %}
</head>

<body>

{% block header deferred %}
{% include "theme::partials/header" %}
{% endblock %}

<main id="main">
    <div class="container">

        {% include "theme::partials/messages" %}

        <div class="col-lg-8">
            {% block content %}{% endblock %}
        </div>

        <aside class="col-lg-4">
            {% block sidebar deferred %}
                {% include "theme::partials/sidebar" %}
            {% endblock %}
        </aside>

    </div>
</main>

{% include "theme::partials/footer" %}

{% block js deferred %}
{% include "theme::partials/js" %}
{% endblock %}

</body>
</html>

{% endverbatim %}

The above layout is a slightly modified version of what Pyro will make for you using the make:addon command (see creating an addon).

Content Block

The output generated from PyroCMS is always defined as content so use {% verbatim %}{% block content %}{% endblock %}{% endverbatim %} or {% verbatim %}{{ block('content') }}{% endverbatim %} to include that content block in your layout.

Keep in mind that if you are building your own content system and are not using Pages or Posts for example but maybe just Streams instead; you are free to use any content organization and delivery you want.

Deferred Blocks

Deferred blocks are processed last. Deferring blocks give the internals of the contents block a chance to manipulate the environment before rendering them.

Internally generated content might dynamically load styles or scripts into the styles.css or scripts.js collections, a template global value, or anything else you need to pass backwards in the outer layout.

For more information on how to use Twig please checkout their documentation.