Jekyll Bulma - Layout - Variables

   
   
 jekyll  bulma  
 ssg  
Article Series

Jekyll in General

Jekyll Plain

Jekyll Bootstrap OC

Jekyll Bulma MD

Conclusions

Repository

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Using custom template inheritance to manage color variables.

Source Code

This article use tutor-10 theme.

Layout Preview for Tutor 10

Liquid: 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:

Jekyll: NERDTree: A Few Layouts

Parent Liquid Layout: Single Column

Consider create a parent layout for single column layout. We have two parts here:

  1. The frontmatter and variables setting.
  2. 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:

  1. The frontmatter color_main in layout: set layout.color_main.
  2. The frontmatter color_main can be overriden in child layout.
  3. The frontmatter color_main in page: set page.color_main.
  4. The final color_main for the content: set by assign in liquid.
  5. 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:

  1. The frontmatter and variables setting.
  2. The main html view, where we use the variables.
  3. 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.

Jekyll: NERDTree: A Few Pages

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.

Jekyll: 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.

Jekyll: Color Property Propagation

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:

  1. Single Column: extend Default

  2. 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:

  1. 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: "" %}
  1. 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.