ssg  
Where to Discuss?

Local Group

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 %}

11ty: Block extending Base Layout

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.

11ty: Page Content: pages/about

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.

11ty: Post Content: posts/every-day


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.

11ty: Double Columns Layout

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 %}

11ty: Multiple Template Inheritance

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>

11ty: Page Content: pages/archive

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>

11ty: Page Content: tags

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>

11ty: Page Content: tag-name

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.