ssg  
Where to Discuss?

Local Group

Preface

Goal: Using custom template inheritance with Nunjucks in Eleventy Layout.

Source Code

This article use [tutor-05][tutor-html-master-05] theme. We will create it step by step.


5: Page Content: Page, Post

Our Page Kind, and Post Kind is simply, a double columns version of previous article.

Layout: Nunjucks Page

Just like previous chapter, but very long layout.

{% extends "layouts/base.njk" %}

{% block main %}
  <main role="main" 
        class="column is-two-thirds">

    <section class="main-wrapper light-blue">
      <div class="blog white z-depth-3 hoverable">

        <section class="blog-header light-blue lighten-5">
          <div class="main_title"> 
            <h2 class="title is-4" itemprop="name headline">
              {{ renderData.title or title or metadata.title }}</h2>
          </div>
        </section>

        <article class="blog-body" itemprop="articleBody">
          {{ content | safe }}
        </article>

      </div>
    </section>

  </main>
{% endblock %}

{% block aside %}
  <aside class="column is-one-thirds">

    <section class="aside-wrapper pink">
      <div class="widget white z-depth-3 hoverable">

        <div class="widget-header pink lighten-4">
          <strong>Side Menu</strong>
          <span class="fas fa-tags is-pulled-right"></span>
        </div>

        <div class="widget-body">
          This is a tags kind layout.
        </div>

      </div>
    </section>

  </aside>
{% endblock %}

Page Content: pages/about

No difference with previous chapter. Just leave the content that way.

Render: Browser

Open in your favorite browser. You should see, a colored about page, by now.

11ty: Page Content: pages/about

Layout: Nunjucks Post

Just like previous chapter, but very long layout.

{% extends "layouts/base.njk" %}

{% block main %}
  <main role="main" 
        class="column is-two-thirds">

    <section class="main-wrapper blue">
      <div class="blog white z-depth-3 hoverable">

        <section class="blog-header blue lighten-5">
          <div class="main_title"> 
            <h2 class="title is-4" itemprop="name headline">
              <a href="{{ title or metadata.title }}"
                >{{ title or metadata.title }}</a></h2>
            <p><strong>{{ page.date | date('MMMM Do, YYYY') }}</strong></p>
          </div>
        </section>

        <article class="blog-body" itemprop="articleBody">
          {{ content | safe }}
        </article>

      </div>
    </section>

  </main>
{% endblock %}

{% block aside %}
  <aside class="column is-one-thirds">

    <section class="aside-wrapper teal">
      <div class="widget white z-depth-3 hoverable">

        <div class="widget-header teal lighten-4">
          <strong>Side Menu</strong>
          <span class="fas fa-scroll is-pulled-right"></span>
        </div>

        <div class="widget-body">
          This is a post kind layout.
        </div>

      </div>
    </section>

  </aside>
{% endblock %}

Page Content: every-day.md

No difference with previous chapter. Just leave the content that way.

Render: Browser

Open in your favorite browser. You should see, a colored post, by now.

11ty: Post Content: posts/every-day

The looks has dramatically appealing compared to the previous one.


6: Template Inheritance: Double Columns

Using the pattern to create parent layout.

As we did, we do it again. Analyze pattern from one or two existing template, write down anything similar, and take out any differences into a few block.

Parent Layout: Nunjucks Columns Double

Consider create a parent layout for double columns layout.

{% extends "layouts/base.njk" %}

{% block main %}
{%- set color %}{% block main_color %}blue{% endblock %}{% endset -%}

  <main role="main" 
        class="column is-two-thirds">

    <section class="main-wrapper {{ color }}">
      <div class="blog white z-depth-3 hoverable">

        <section class="blog-header {{ color }} lighten-5">
        {% block blog_header %}
          <div class="main_title"> 
            <h2 class="title is-4" itemprop="name headline">
              <a href="{{ title or metadata.title }}"
                >{{ title or metadata.title }}</a></h2>
          </div>
        {% endblock %}
        </section>

        <article class="blog-body" itemprop="articleBody">
          {{ content | safe }}
        </article>

      </div>
    </section>

  </main>
{% endblock %}

{% block aside %}
{%- set color %}{% block aside_color %}green{% endblock %}{% endset -%}

  <aside class="column is-one-thirds">

    <section class="aside-wrapper {{ color }}">
      <div class="widget white z-depth-3 hoverable">

        <div class="widget-header {{ color }} lighten-4">
        {% block widget_header %}
          <strong>Side Menu</strong>
          <span class="fas fa-scroll is-pulled-right"></span>
        {% endblock %}
        </div>

        <div class="widget-body">
        {% block widget_body %}
          <p>This is a widget body.</p>
        {% endblock %}
        </div>

      </div>
    </section>

  </aside>
{% endblock %}

We have three blocks here:

  • blog_header,

  • widget_header.

  • widget_body.

And two additional blocks to handle variable

  • main_color,

  • aside_color.

11ty: Double Columns Layout

Now we can rewrite page kind and post kind.

Layout: Nunjucks Page

Notice how the color variable propagate, from child layout to parent layout.

{% extends "layouts/columns-double.njk" %}

{% block main_color %}pink{% endblock %}
{% block aside_color %}green{% endblock %}

{% block widget_body %}
  <p>This is a page kind layout.</p>
{% endblock %}

Notice that we only need to replace block, that has different content with parent layout.

Layout: Nunjucks Post

Notice how the color variable propagate, from child layout to parent layout.

{% extends "layouts/columns-double.njk" %}

{% block main_color %}blue{% endblock %}
{% block aside_color %}teal{% endblock %}

{% block blog_header %}
  <div class="main_title"> 
    <h4 class="title is-4" itemprop="name headline">
      <a href="{{ page.url | url }}">
        {{ renderData.title or title or metadata.title }}
      </a></h4>
    <b>{{ page.date | date('MMMM Do, YYYY') }}</b>
  </div>
{% endblock %}

{% block widget_body %}
  <p>This is a post kind layout.</p>
{% endblock %}

The length of the layout decrease significanly.


7: Page Content: Archive, Tag, Tag Name

Again, we can rewrite the all other layouts as well. This time, each page content has many additional html tags, along with custom class, to adopt new theme design.

Child Layout: Nunjucks Archive

Template inheritance in nunjucks, start with the word extends.

{% extends "layouts/columns-double.njk" %}

{% block main_color %}cyan{% endblock %}
{% block aside_color %}purple{% endblock %}

{% block widget_body %}
  <p>This is an archive kind layout.</p>
{% endblock %}

11ty: Multiple Template Inheritance

Page Content: pages/archive

I only add content class.

---
layout    : archive
title     : Archive
permalink : /pages/
eleventyExcludeFromCollections: true
---

  <div class="archive-list">
  {%- for post in collections.all | reverse -%}
    <div class="archive-item meta-item">
      <div class="meta_link has-text-right">
        <time class="meta_time is-pulled-right"
              datetime="{{ post.date | date() }}">
          {{ post.date | date('MMM DD, Y') }}&nbsp;
          &nbsp;<span class="fa fa-calendar"></span></time></div>
      <div class="is-pulled-left">
      <a href="{{ post.url | url }}">
        {{ post.data.title }}
      </a></div>
      <div class="is-clearfix"></div>
    </div>
  {%- endfor -%}
  </div>

11ty: Page Content: pages/archive

Child Layout: Nunjucks Tags

{% extends "layouts/columns-double.njk" %}

{% block main_color %}light-blue{% endblock %}
{% block aside_color %}lime{% endblock %}

{% block widget_body %}
  <p>This is a tags kind layout.</p>
{% 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="field is-grouped is-grouped-multiline">
  {%- for tag in collections.tagList -%}
    {%- set postsList = collections[ tag ] -%}
    {%- set listCount = postsList.length -%}
    {%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%}

    {% if listCount %}
    <div class="tags has-addons">
      <a href="{{ tagUrl | url }}">
        <div class="tag is-light blue lighten-2 z-depth-1"
          >{{ tag }} 
        </div><div class="tag is-dark blue darken-2 z-depth-1"
          >{{ listCount }}
        </div>
      </a>
    </div>
    &nbsp;
    {% endif %}
  {%- endfor -%}
    <div class="tags dummy"></div>
  </div>

  <section class="p-y-5" id="archive">
    {% for tag in collections.tagList %}
      {% set tagUrl %}/tags/{{ tag }}/{% endset %}
      <div id="{{ tag | slug }}" class ="anchor-target">
        <a href="{{ tagUrl | url }}">
        <span class="fa fa-tag"></span> 
        &nbsp; {{ tag }} </a>
      </div>
    {%- endfor -%}
  </section>

11ty: Page Content: tags

Child Layout: Nunjucks Tag Name

{% extends "layouts/columns-double.njk" %}

{% block main_color %}indigo{% endblock %}
{% block aside_color %}orange{% endblock %}

{% block widget_body %}
  <p>This is a tag-name kind layout.</p>
{% 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 }}”

---

  {% set postslist = collections[ tag ] %}
  <div class="archive-list">
  {%- for post in postslist -%}
    <div class="archive-item meta-item">
      <div class="meta_link has-text-right">
        <time class="meta_time is-pulled-right"
              datetime="{{ post.date | date() }}">
          {{ post.date | date('MMM DD, Y') }}&nbsp;
          &nbsp;<span class="fa fa-calendar"></span></time></div>
      <div class="is-pulled-left">
      <a href="{{ post.url | url }}">
        {{ post.data.title }}
      </a></div>
      <div class="is-clearfix"></div>
    </div>
  {%- endfor -%}
  </div>

  <p><a href="{{ '/tags/' | url }}"
        class="button is-small"
       >List of all tags</a></p>

11ty: Page Content: tag-name

Although the frame have been done, within the columns-double.njk layout, All page contents in this chapter are revamped, to adopt custom class in the Bulma Material Design stylesheet


What is Next ?

Consider continue reading [ Eleventy - Custom Index - Content ]. We are going to populate content, for use with some index page, such as archive, tags, paginated blog post.

Thank you for reading.