Eleventy - Nunjucks - Layouts

   
   
 11ty  
 ssg  
Article Series

This article series contain few sections.

Eleventy Basic

General Design

Custom Pages

Widget Component

Pagination Component

Page Content

Related Article Series

Conclusion

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Columns and Colors with Nunjucks Layout in Eleventy.

Source Code

This article use tutor-07 theme. We will create it step by step.

Layout Preview for Tutor 07

Nunjucks: Layout Preview for Tutor 07

1: Single Column

We meet again with layout, for the third time. We require both column kind:

  • Single Column: child of Base Layout.

  • Double Columns: child of Base Layout.

We are going to get rid unused sidebar. So that all pages will be a column-single layout, except page layout and post layout.

The directory tree can be shown as below figure:

11ty: NERDTree: A Few Layouts

Parent Layout: Nunjucks Single Column

Consider create a parent layout for single column layout. This layout is equipped with two blocks: blog_header, and pagination.

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

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

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

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

        {%- if showPagination -%}
        <section class="blog-index center-align" itemprop="pagination">
        {% block pagination %}{% endblock %}
        </section>
        {%- endif -%}

        <section class="blog-index" itemprop="ItemList">
          {{ content | safe }}
        </section>

      </div>
    </section>
  </main>
{% endblock %}

We will use pagination block later.

Difference

Block blog_header is simply default content as below:

{% block blog_header %}
  <div class="main_title"> 
    <h2 class="title is-4" itemprop="name headline">
      {{ renderData.title or title or metadata.title }}</h2>
  </div>
{% endblock %}

And the pagination block is just an empty block.

{%- if showPagination -%}
  <section class="blog-index center-align" itemprop="pagination">
  {% block pagination %}{% endblock %}
  </section>
{%- endif -%}

Default Color

The default color for main block is set as below code:

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

2: Double Columns

Most of the layout remain the same, except the blog_header part using external nunjucks partial.

Parent Layout: Nunjucks Double Columns

Consider modify the parent layout for double column layout.

The main block in this layout is, equipped with one blog_header blocks:

{% 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 %}
          {% include "page/blog-header.njk" %}
        {% endblock %}
        </section>

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

      </div>
    </section>

  </main>
{% endblock %}

The aside block in this layout is remain intact.

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

Difference

The only difference is the blog_header block, now include an external nunjucks partial.

<section class="blog-header {{ color }} lighten-5">
{% block blog_header %}
  {% include "page/blog-header.njk" %}
{% endblock %}
</section>

Partial: Page: 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>

Default Color

The default color for main block is set as below code:

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

While the default color for aside block is set as below code:

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

3: Page and Post

Consider have applying the template for page kind and post kind.

The example of color setting for each pages, can be shown as below figure. Most default color cab be overriden in frontmatter.

11ty: NERDTree: A Few Pages

Layout: Nunjucks Page

We can override the default color.

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

{% block main_color %}{{ color or 'pink' }}{% endblock %}
{% block aside_color %}green{% endblock %}

Layout: Nunjucks Post

The blog_header part has external partials.. Also overriding the default color.

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

{% block main_color %}{{ color or 'blue' }}{% endblock %}
{% block aside_color %}grey{% endblock %}

{% block blog_header %}
  {% include "post/blog-header.njk" %}
{% endblock %}

It is mandatory to set both colors for main and aside. Unless you redefine main block or aside block completely.

Partial: Post: Blog Header

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

Page Content

Since we are not going to use, default color for pages and post, just leave the the content intact. All pages will have pink color, and all post will have blue color. However if you wish for an example, you can examine this content below:

---
layout    : post
title     : Jerry Maguire
date      : 2015-01-01 17:35:15
tags      : ['subtitle', 'story']
color     : red
---

You had me at Hello.

You complete me.

11ty: Post Content: quotes/jerry-maguire

As a summary, the color will inherit, from jerry-maguire.md frontmatter, to post layout, then to double-columns layout.

11ty: Color Property Propagation

4: Child: Archive, Blog, Tags, Tag Name

With the same logic, we can apply colors to all other pages as well.

Layout: Nunjucks Archive

We can override the default color.

{% extends "layouts/column-single.njk" %}

{% block main_color %}{{ color or 'cyan' }}{% endblock %}

Layout: Nunjucks Blog

We can override the default color.

{% extends "layouts/column-single.njk" %}

{% block main_color %}{{ color or 'brown' }}{% endblock %}

Layout: Nunjucks Tags

We can override the default color.

{% extends "layouts/column-single.njk" %}

{% block main_color %}{{ color or 'light-blue' }}{% endblock %}

Layout: Nunjucks Tag Name

We can override the default color.

{% extends "layouts/column-single.njk" %}

{% block main_color %}{{ color or 'indigo' }}{% endblock %}

Page Content: Archive

Now we can set for both archive pages.

---
layout    : archive
title     : Archive by Year
eleventyExcludeFromCollections: true
color     : cyan
---

{% set posts = collections.posts %}
{% include "index/by-year.njk" %}

and

---
layout    : archive
title     : Archive by Month
eleventyExcludeFromCollections: true
color     : cyan
---

{% set posts = collections.posts %}
{% include "index/by-month.njk" %}

Page Content: Blog

To use default color, just leave the blog page intact, or just comment the color setting in frontmatter.

---
layout    : index
title     : Blog List
eleventyExcludeFromCollections: true
# color   : blue
---

{%- set posts = collections.posts -%}
{%- set posts = posts | sort(false, true, 'date') | reverse -%}
{% include "index/blog-list.njk" %}

Page Content: Tags

Or you can have a choice whether, the content have different color.

---
layout    : tags
title     : List of Tags
eleventyExcludeFromCollections: true
# color     : blue
---

{% set color = 'lime' %}
{% include "index/tags-badge.njk" %}
{% include "index/tags-tree.njk" %}

11ty: Page Content: Tags with different Content Colors

Page Content: Tag Name

Or you whatever color you want.

---
layout    : tag-name
...
color     : indigo
---

{# set color = 'indigo' #}
{% set posts = collections[ tag ] %}
...

5: Child: Home

Of course you can still also access base layout directly.

Layout: Nunjucks Home

This way you still have total control of your HTML layout.

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

{% block main %}
  {%- set color %}{{ color or 'blue-grey' }}{% endset -%}
  <main role="main" 
        class="column is-full">

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

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

      </div>
    </section>

  </main>
{% endblock %}

Page Content: Landing Page

The content is remain untouched.

---
layout    : home
eleventyExcludeFromCollections: true
color     : indigo
---

  <br/>
...

6: Summary

As a summary, here is columns and colors.

Template Inheritance

Parent-child relation:

  1. Single Column: extend Base

  2. Double Columns: extend Base

  • Page: extend Double Columns

  • Post: extend Double Columns

  • Archive: extend Single Column

  • Blog: extend Single Column

  • Tags, Tag Name: extend Single Column

  • Home: extend Base

Default Color Variable Propagation

The default colors set as below:

  1. Single Column: extend Base
{% block main %}
  {%- set color %}{% block main_color %}blue{% endblock %}{% endset -%}
  ...
{% endblock %}
  1. Double Columns: extend Base
{% block main %}
  {%- set color %}{% block main_color %}blue{% endblock %}{% endset -%}
  ...
{% endblock %}

{% block aside %}
  {%- set color %}{% block aside_color %}green{% endblock %}{% endset -%}
  ...
{% endblock %}
  • Page: extend Double Columns
  {% block main_color %}{{ color or 'pink' }}{% endblock %}
  {% block aside_color %}green{% endblock %}
  • Post: extend Double Columns
  {% block main_color %}{{ color or 'blue' }}{% endblock %}
  {% block aside_color %}grey{% endblock %}
  • Archive: extend Single Column
  {% block main_color %}{{ color or 'cyan' }}{% endblock %}
  • Blog: extend Single Column
  {% block main_color %}{{ color or 'brown' }}{% endblock %}
  • Tags: extend Single Column
  {% block main_color %}{{ color or 'light-blue' }}{% endblock %}
  • Tag Name: extend Single Column
  {% block main_color %}{{ color or 'indigo' }}{% endblock %}
  • Home: extend Base
  {%- set color %}{{ color or 'blue-grey' }}{% endset -%}

Overriding Color

For both content and layout, just set in frontmatter as below example:

---
...
color     : grey-blue
---

For content override only and omitting layout color override, Just set in content body as below example:

---
...
---

{% set color = 'grey-blue' %}
...

The later enable you to have two different colors, between the layout color, and the content color. We will see more content color in the next chapter.

What is Next ?

Consider continue reading [ Eleventy - Nunjucks - Index List ]. We are going to make index pages with responsive colored box.

Thank you for reading.