Preface
Goal: Using simple template inheritance with Nunjucks in Eleventy Layout.
Source Code
This article use tutor-04 theme. We will create it step by step.
Related Article: CSS
This article is not a CSS tutorial,
but rather than applying simple CSS theme,
into eleventy layout.
The CSS part of this article is, already discussed in this SASS article below. The only different is that I use plain CSS instead of SASS.
5: Page Content: Page, Post
Our Page Kind, and Post Kind is simply, a double columns version of previous article.
Layout: Nunjucks Page
{% extends "layouts/base.njk" %}
{% block main %}
<main role="main"
class="column is-two-thirds">
<article class="blog-post box">
<h2 class="title is-4"
>{{ renderData.title or title or metadata.title }}</h2>
{{ content | safe }}
</article>
</main>
{% endblock %}
{% block aside %}
<aside class="column is-one-thirds">
<div class="box">
This is a page kind layout.
</div>
</aside>
{% endblock %}
Page Content: pages/about
No difference with previous chapter.
---
layout : page
title : About Rescue Mission
---
This was not a rescue mission!
Let me put to you like this.
If the secretary wanted me out of there,
then things are really bad out here.We can say that this content wear page layout.
Render: Browser
Open in your favorite browser. You should see, a black and white about page, by now.
Layout: Nunjucks Post
{% extends "layouts/base.njk" %}
{% block main %}
<main role="main"
class="column is-two-thirds">
<article class="blog-post box">
<h2 class="title is-4"
>{{ title or metadata.title }}</h2>
<p><strong>{{ page.date | date('MMMM Do, YYYY') }}</strong></p>
{{ content | safe }}
</article>
</main>
{% endblock %}
{% block aside %}
<aside class="column is-one-thirds">
<div class="box">
This is a post kind layout.
</div>
</aside>
{% endblock %}Page Content: every-day.md
No difference with previous chapter.
---
layout : post
title : Every Day
date : 2015-10-03 08:08:15
slug : every-day
tags : ['subtitle', 'story']
permalink : "/{{ date | date('YYYY/MM/DD') }}/{{ slug }}/index.html"
---
I've been thinking about this
over and over and over.
<!-- more -->
I mean, really, truly,
imagine it.Render: Browser
Open in your favorite browser. You should see, a black and white post, by now.
6: Template Inheritance: Double Columns
Can you see the pattern?
We have very similar pages with the Bulma’s double columns layout,
and we write down the same layout over and over again in each layout:
post, page, archive, tag, tag-name,
and who knows how this site will grow later.
Nunjucks is really powerful templating engine, and capable to solve this situation very nicely. We do not need to exhaustingly repeat ourselves.
Parent Layout: Nunjucks Columns Double
Consider create a parent layout for double columns layout.
This is basically the same with page layout above,
but with two new blocks,
that can be replaced later in any child template.
{% extends "layouts/base.njk" %}
{% block main %}
<main role="main"
class="column is-two-thirds">
<article class="blog-post box">
{% block main_header %}
<h2 class="title is-4"
>{{ renderData.title or title or metadata.title }}</h2>
{{ content | safe }}
{% endblock %}
</article>
</main>
{% endblock %}
{% block aside %}
<aside class="column is-one-thirds">
<div class="box">
{% block aside_body %}
This is a default kind layout.
{% endblock %}
</div>
</aside>
{% endblock %}We have two blocks here:
-
main_header, -
aside_body.
Now we can rewrite page kind and post kind.
Layout: Nunjucks Page
{% extends "layouts/columns-double.njk" %}
{% block aside_body %}
This is a page kind layout.
{% endblock %}Notice that we do not need to replace main_header,
if we don’t want to change the default content.
Layout: Nunjucks Post
{% extends "layouts/columns-double.njk" %}
{% block main_header %}
<h2 class="title is-4"
>{{ renderData.title or title or metadata.title }}</h2>
<p><strong>{{ page.date | date('MMMM Do, YYYY') }}</strong></p>
{{ content | safe }}
{% endblock %}
{% block aside_body %}
This is a page kind layout.
{% endblock %}As there is no need to write the same thing, over and over again for each template, now writing template is not exhausting anymore.
7: Page Content: Archive, Tag, Tag Name
With the method above, we can rewrite the all other layouts as well.
Child Layout: Nunjucks Archive
Template inheritance in nunjucks,
start with the word extends.
{% extends "layouts/columns-double.njk" %}
{% block aside_body %}
This is an archive kind layout.
{% endblock %}
Page Content: pages/archive
This content wear archive layout.
I only add content class.
---
layout : archive
title : Archive
permalink : /pages/
eleventyExcludeFromCollections: true
---
<div class="content">
<ul>
{%- for post in collections.all | reverse -%}
<li>
<a href="{{ post.url | url }}">
{{ post.data.title }}</a>
</li>
{%- endfor -%}
</ul>
</div>
Child Layout: Nunjucks Tags
{% extends "layouts/columns-double.njk" %}
{% block aside_body %}
This is a tags kind layout.
{% endblock %}Page Content: Tags
I only add content class.
And Bulma’s tag class in each link.
---
layout : tags
title : List of Tags
eleventyExcludeFromCollections: true
---
<div class="content">
<ul>
{% for tag in collections.tagList %}
<li>
{% set tagUrl %}/tags/{{ tag }}/{% endset %}
<a href="{{ tagUrl | url }}" class="tag is-link">{{ tag }}</a>
</li>
{%- endfor -%}
</ul>
</div>
Child Layout: Nunjucks Tag Name
{% extends "layouts/columns-double.njk" %}
{% block aside_body %}
This is a tag-name kind layout.
{% endblock %}Page Content: Tag Name (paginated)
I only add content class.
---
layout : tag-name
eleventyExcludeFromCollections: true
pagination:
data: collections
size: 1
alias: tag
permalink: /tags/{{ tag }}/
renderData:
title: Tagged “{{ tag }}”
---
<div class="content">
{% set postslist = collections[ tag ] %}
<ul>
{%- for post in postslist -%}
<li>
<a href="{{ post.url | url }}">
{{ post.data.title }}</a>
</li>
{%- endfor -%}
</ul>
</div>
<p><a href="{{ '/tags/' | url }}"
class="button is-small"
>List of all tags</a></p>
As you can see there is almost nothing happened in each page content.
Most have been done within the columns-double.njk layout,
using default Bulma stylesheet feature.
It means, whenever changes happened,
you only need to rewrite the parent layout.
Template inheritance is very useful in this case.
What is Next ?
Just remember that what we have learned above is, just a simple template inheritance. The power of template inheritance is not finished here. We are going to face variable passing between parent and child, so that page behaviour can be changed in more flexible manners.
In order to do that, we require more powerful stylesheet, with various looks possibility. We need to explore SASS in the next article, with a new theme called Bulma Material Design.
Consider continue reading [ Eleventy - Bulma - SASS Intro ].
Thank you for reading.