Preface
Goal: Using custom template inheritance to manage color variables.
Source Code
This article use tutor-10 theme.
Layout Preview for Tutor 10
1: Parent: 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 Liquid Layout: Single Column
Consider create a parent layout for single column layout. We have two parts here:
- The frontmatter and variables setting.
- The
main
html view, where we use the variables.
This layout is equipped with a partial set in blog_header
.
The Frontmatter:
---
layout: default
# default color
color_main : blue-grey
blog_class : ""
# layout chuncks
blog_header : page/blog-header.html
---
{% assign color_main = page.color_main | default: layout.color_main %}
{% assign blog_class = layout.blog_class | default: "" %}
<main role="main"
class="column is-full">
<section class="main-wrapper {{ color_main }}">
<div class="blog white z-depth-3 hoverable">
<section class="blog-header {{ blog_class }}
{{ color_main }} lighten-5">
{% include {{ layout.blog_header }} %}
</section>
<article class="blog-body {{ blog_class }}"
itemprop="articleBody">
{{ content }}
</article>
</div>
</section>
</main>
Partial Liquid: Page/ Blog Header
We can have default partial chunks in parent layout, and override the partial chunks in child layout.
---
# layout chuncks
blog_header : page/blog-header.html
---
The blog_header
partial is:
<div class="main_title">
<h1 class="title is-4" itemprop="name headline">
{{ page.title | default: site.title }}</h1>
</div>
Layout: Default Color
The default color for main
element is set as below code:
---
# default property
color_main : blue-grey
---
{% assign color_main = page.color_main | default: layout.color_main %}
Rule: Color Setting
Keep in mind this rule:
- The frontmatter
color_main
in layout: setlayout.color_main
. - The frontmatter
color_main
can be overriden in child layout. - The frontmatter
color_main
in page: setpage.color_main
. - The final
color_main
for the content: set byassign
in liquid. - Color name must match the previously prepared,
custom
open-color
stylesheet.
The frontmatter set layout.color_main
to blue
as default.
With assigment below frontmatter, we can override default blue
color,
by set any color in page.color_main
.
2: Parent: Double Columns
Most of the layout remain the same,
except the blog_header
part using external liquid partial.
Parent Layout: Liquid: Double Columns
Consider modify the parent layout for double column layout. We have two parts here:
- The frontmatter and variables setting.
- The
main
html view, where we use the variables. - The
aside
html view, where we also use the variables.
This layout is also equipped with a partial set in blog_header
.
The Frontmatter:
---
layout : default
# default color
color_main : blue
color_aside : teal
# layout chuncks
blog_header : page/blog-header.html
aside_message : This is a double columns kind layout.
---
{% assign color_main = page.color_main | default: layout.color_main %}
{% assign color_aside = page.color_aside | default: layout.color_aside %}
The main
Content:
<main role="main"
class="column is-two-thirds">
<section class="main-wrapper {{ color_main }}"">
<div class="blog white z-depth-3 hoverable">
<section class="blog-header {{ color_main }} lighten-5">
{% include {{ layout.blog_header }} %}
</section>
<article class="blog-body" itemprop="articleBody">
{{ content }}
</article>
</div>
</section>
</main>
The aside
Content:
<aside class="column is-one-thirds">
<section class="aside-wrapper {{ color_aside }}">
<div class="widget white z-depth-3 hoverable">
<div class="widget-header {{ color_aside }} lighten-4">
<strong>Side Menu</strong>
<span class="fas fa-fingerprint is-pulled-right"></span>
</div>
<div class="widget-body">
{{ layout.aside_message }}
</div>
</div>
</section>
</aside>
Partial Liquid: Page/ Blog Header
The partial chunk is the same with what we have in single-column
.
Notice: the partial chunk is still page/blog-header
.
Do not confused with post/blog-header
.
Default Color
The default color for main
element is set as below code:
{% assign color_main = page.color_main | default: layout.color_main %}
While the default color for aside
element is set as below code:
{% assign color_aside = page.color_aside | default: layout.color_aside %}
The rule is still the same as what we have in single-column
.
3: Child: 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 can be overriden in frontmatter.
Layout Liquid: Page
Now the layout is short, bu equipped with extra variable override in frontmatter.
---
layout: columns-double
# override color
color_main : pink
color_aside : green
# layout chuncks
blog_header : page/blog-header.html
aside_message : This is a page kind layout.
---
{{ content }}
Layout Liquid: Post
Now the layout is short, bu equipped with extra variable override in frontmatter.
---
layout: columns-double
# override color
color_main : blue
color_aside : teal
# layout chuncks
blog_header : post/blog-header.html
aside_message : This is a post kind layout.
---
{{ content }}
The blog_header
part has different partial chunck.
Partial Liquid: Post/ Blog Header
Notice this in frontmatter:
---
# layout chuncks
blog_header : post/blog-header.html
---
The blog_header
partial is:
<div class="main_title">
<h1 class="title is-4" itemprop="name headline">
{{ page.title | default: site.title }}</h1>
<p><strong>{{ page.date | date: "%B %d, %Y" }}</strong></p>
</div>
This is the short version of blog post header. There will be several changes in later chapter.
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 +0700
categories : movie
tags : [subtitle, story]
color_main : red
---
You had me at Hello.
As a summary, the color will inherit,
from jerry-maguire.md
frontmatter,
to post
layout, then to double-columns
layout.
4: Child: Home
Instead of access default
layout directly,
you can utilize column-single
.
Layout Liquid: Home
Siginficantly short.
---
layout: columns-single
# override color
color_main : indigo
blog_class : has-text-centered
---
{{ content }}
Notice that we use blog-class
to center all element in home
layout.
Page Content: Landing Page
The content is remain untouched.
---
layout: home
---
<br/>
...
5: Child: All Index List Kind (Archive)
With the same logic, we can apply colors to all other pages as well.
For all layout, I change parent from page
to columns-single
.
And override all color from pages.
Layout Liquid: Blog
---
layout: columns-single
---
{% assign posts = site.posts %}
{% include index/blog-list.html %}
Page Content: Blog
---
layout : blog
title : Blog Posts
permalink : /pages/
# override color
color_main : brown
color_aside : light-green
---
I also add color_aside
in frontmatter,
just in case you want to change the layout to columns-double
.
Layout Liquid: Category List
The same logic also applied with categories
and tags
This layout, is now featuring page.icon
.
The detail will be shown in the next article.
---
layout: columns-single
---
{% assign terms = site.categories %}
{% include index/terms-array.html %}
{% include index/terms-badge.html %}
{% include index/terms-tree.html %}
Page Content: Categories
---
layout : list-category
title : All Categories
permalink : /categories/
# override color
color_main : indigo
color_aside : orange
# decoration
term_icon : fa fa-folder
---
Layout Liquid: Tag List
---
layout: columns-single
---
{% assign terms = site.tags %}
{% include index/terms-array.html %}
{% include index/terms-badge.html %}
{% include index/terms-tree.html %}
Page Content: Tags
---
layout : list-tag
title : All Tags
permalink : /tags/
# override color
color_main : teal
color_aside : lime
# decoration
term_icon : fa fa-tag
---
Layout Liquid: Archive By Year
---
layout: columns-single
---
{% assign posts = site.posts %}
{% include index/by-year.html %}
Page Content: Archive By Year
---
layout : by-year
title : Archive by Year
permalink : /by-year/
# override color
color_main : cyan
color_aside : pink
---
Layout Liquid: Archive By Month
---
layout: columns-single
---
{% assign posts = site.posts %}
{% include index/by-month.html %}
Page Content: Archive By Month
---
layout : by-month
title : Archive by Month
permalink : /by-month/
# override color
color_main : cyan
color_aside : purple
---
6: Summary
As a summary, here is columns and colors.
Template Inheritance
Parent-child relation:
-
Single Column: extend Default
-
Double Columns: extend Default
-
Page: extend Double Columns
-
Post: extend Double Columns
-
Home: extend Single Column
-
Blog: extend Single Column
-
Tags, Categories: extend Single Column
-
By Year, By Month: extend Single Column
Default Color Variable in Layout
The default colors in layout is set as below:
- Single Column: extend Default
---
# default property
color_main : blue-grey
blog_class : ""
---
{% assign color_main = page.color_main | default: layout.color_main %}
{% assign blog_class = layout.blog_class | default: "" %}
- Double Columns: extend Default
---
# default property
color_main : blue
color_aside : teal
---
{% assign color_main = page.color_main | default: layout.color_main %}
{% assign color_aside = page.color_aside | default: layout.color_aside %}
- Page: extend Double Columns
---
# override color
color_main : pink
color_aside : green
---
- Post: extend Double Columns
---
# override color
color_main : blue
color_aside : teal
---
- Home: extend Single Column
---
# override color
color_main : indigo
blog_class : has-text-centered
---
- Blog: extend Single Column
---
# empty, no property override
---
- Tags, Categories: extend Single Column
---
# empty, no property override
---
- By Year, By Month: extend Single Column
---
# empty, no property override
---
Overriding Color
For both content and layout, just set in frontmatter as below example:
---
...
# override color
color_main : teal
color_aside : cyan
---
What is Next?
Consider continue reading [ Jekyll Bulma - Layout - Index List ].
Thank you for reading.