You can use any page as the template for another page. Inheritance consists of a ([Liquid tag](🔗)), which must be written on the first line of a page underneath the metadata (`---`).

Let's assume you have a created a blank site with the default 'index' page. Now create a new page, **app/views/pages/page2.liquid**, containing:

In this case, 'page2' will inherit from the 'index' page. Which means it will have the same content as the index page. When you defined `block` tag(s) inside your index page you can edit these parts inside the new page.

A block tag inside your index page looks like this:

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

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

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

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

## Several levels of inheritance

The principle of page 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 inherit from any other page by using its slug, or its parent page.

Consider the following page hierarchy:

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.

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

This is very useful 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 extend a page which isn't a direct parent?

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

Add `{% extends 'second_page' %}` inside your "first page".

Learn more:

  • [extend tag documentation](🔗).

  • [block tag documentation](🔗).