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: