You can use any page as the template for another page. Inheritance consists in a (Liquid tag), which must be written on the first line of a page.

We assume you have a created a blank site with the default 'index' page. Create a new page, app/views/pages/page2.liquid, containing:

{% extends 'index' %}

In this case, 'page2' will inherit from the 'index' page: it will have the same content.

Of course you will want to change some parts in page2, that's when the block tag appears.

In your index page, create a block tag (it probably already exists if you've just created a blank site) like this:

{% block 'main' %}This is the content for the homepage{% endblock %}

In page2, you can override the 'main' block writing:

{% block 'main' %}This is the content for the page 2{% endblock %}

By extending index, page2 re-uses all of its content, except the content inside the {% block %} tag which is overwritten.

Test it by running the site (run bundle exec wagon serve then http://0.0.0.0:3333).

You can have as many {% block %} tags as you want, everywhere in the layout, as long as the name of each block is unique.

Inherited blocks

You might want to inherit blocks.

Change index.liquid:

<div class="container">
{% block 'main' %}
  <div class="left">
  {% block 'left' %}
    Left block content
  {% endblock %}
  </div>
  <div class="right">
  {% block 'right' %}
    Right block content
  {% endblock %}
  </div>
{% endblock %}

Now, in page2.liquid, if you only want to override the right block, you must give the absolute path of the block:

{% extends 'index' %}
{% block 'main/right' %}
I just want to override the right block in page2, thanks.
{% endblock %}

Several levels of inheritance

The principle of page's inheritance can be applied to every page. The index page is always the root page: you can either use {% extends 'index' %} or {% extends 'parent' %}.

A page generally inherits from index, but you can also make it inherits from any other page by using its slug, or its parent page.

Consider the following page hierarchy:

+- index
    +- first page
        +- child of first page
    +- second page

In a Wagon site, you will use folders to reflect the pages hierarchy. Create a folder and a template page with the same name: the template will become the parent of any page in the folder.

+- app/views/pages/
    +- index.liquid
    +- first-page.liquid
    +- first-page/
        +- child-of-first-page.liquid
    +- second-page.liquid

first-page can either extend 'parent' or 'index'. child-of-first-page.liquid can either extend 'first-page' or 'parent'.

This is very usefull when you need a generic template, and a specific template for a group of pages (ex: same left column).

Inherit from an other page than the parent one

When you extend the parent's layout, you use the tag {% extends parent %}, but what if you would like to extends a page which isn't a direct parent ?

For example, how would you make "first page" extends "second page" ?

+- Pages
    +- index
        +- first page
        +- second page

It's simple : {% extends 'second_page' %} ! You specify the page you want to extend with its slug.

Learn more:

• extend tag documentation.
• block tag documentation.