Page inheritance

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.

Note: Blocks can have any name, but you should avoid making changes to them in the future because some data will be attached to this name.

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:

Note: Have a look to the snippet guide: it allow you to re-use a block of code in several templates.
© 2024 LocomotiveCMS Terms of use Privacy Policy
Back to top