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
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:
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.
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.
As a summary, the color will inherit,
from jerry-maguire.md
frontmatter,
to post
layout, then to double-columns
layout.
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" %}
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:
-
Single Column: extend Base
-
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:
- Single Column: extend Base
{% block main %}
{%- set color %}{% block main_color %}blue{% endblock %}{% endset -%}
...
{% endblock %}
- 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.