Jekyll Plain - Layout

   
   
 jekyll  plain  
 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: Getting started with layout using Liquid templating engine.

Layout enable you to create many kind of page template, such as page kind, post kind, landing page (home kind), or archive page.

Source Code

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

Official Site.

Layout Preview for Tutor 02

Liquid: Layout Preview for Tutor 02

0: Theme Making

Consider to have a look at the big picture below:

SSG Illustration: Theme Making

1: Refactor Includes

Directory Tree: Includes

Consider create each file artefacts manually.

$ tree _layouts _includes
_layouts
├── default.html
├── home.html
├── page.html
└── post.html
_includes
├── footer.html
├── header.html
└── head.html

0 directories, 7 files

We are going to focus on these file artefacts above .

Jekyll: Tutor-02: NERDTree

Layout: Liquid Default

Instead of put everything in one html file, we can separate each html part in different liquid file, and call them using include.

<!DOCTYPE html>
<html>

<head>
  {% include head.html %}
</head>

<body>
  {% include header.html %}

  <main role="main">
    {{ content }}
  </main>

  {% include footer.html %}
</body>

</html>

And three includes:

  • head,

  • header,

  • footer.

Jekyll: Refactoring Base Default to Head, Header and Footer

Partial: Liquid Head

  <title>{{ (page.title | default: site.title) | escape }}</title>

The default site.title is set in _config.yml as

# Site settings
title: Your mission. Good Luck!

We can use default title from site.title, if there is no page.title available in frontmatter.

Partial: Liquid Header

  <p><i>Your mission, should you decide to accept it.</i></p>
  <hr/>
  <hr/>
  <p><i>As always, should you be caught or killed,
  any knowledge of your actions will be disavowed.</i></p>

Finally

We are done with simple refactoring. These simple snippets, show how liquid works.

2: Layout: Page and Post

We are freely to make any kind of pages. Here we make commons blog page kind:

  • Page Kind

  • Post Kind

  • Home Kind, for landing page

Remember, that in configuration, every html file is actually using liquid template engine.

Layout: Liquid Page

Template inheritance in liquid, set in frontmatter.

---
layout: default
---

  <h2>{{ page.title | default: site.title }}</h2>
  <strong>This is a page kind layout.</strong>
  <br/>

  {{ content }}

  <blockquote>Any question? <b>Good Luck</b>.</blockquote>

Jekyll: Template Inheritance: Parent and Child

You should see how {{ content }} propagate, from one child layout to parent layout.

Layout: Liquid Post

Template inheritance in liquid, set in frontmatter.

---
layout: default
---

  <h2>{{ page.title | default: site.title }}</h2>
  <pre>{{ page.date | date: "%B %d, %Y" }}</pre>
  <br/>

  <strong>This is a post kind layout.</strong>
  <br/>

  {{ content }}

I add {{ page.date }} to differ post kind and page kind.

Layout: Liquid Home

Template inheritance in liquid, set in frontmatter.

---
layout : default
---

  <h2>{{ page.title | default: site.title }}</h2>
  <strong>This is a home kind layout, to show landing page.</strong>
  <br/>

  {{ content }}

This one is pretty similar with the page layout.

Finally

We are done with simple template inheritance. These simple snippets, also show how liquid works.

3: Content: Pages and Posts

After _layouts and _includes ready, we can serve our content.

Directory Tree: Includes

Consider create each artefacts manually.

$ tree _posts pages
_posts
└── 2015-10-03-every-day.md
pages
├── about.md
└── index.html

0 directories, 3 files

Page Content: index

It is actually very similar with previous index.html. With additional menu, in markdown format. And now using home layout.

---
layout    : home
---

Menu:
[[Blog](/pages/)]
[[About](/pages/about)]

To have, ...

Jekyll: Home in Browser

Page Content: pages/about

This is a markdown file artefact, with frontmatter.

---
layout    : page
title     : Rescue Mission
---

This was not a rescue mission!

Let me put to you like this.
If the secretary wanted me out of there,
then things are really bad out here

Jekyll: About Page in Browser

Notice the page layout, in frontmatter.

Page Content: pages/index

It is clear that this loop is using liquid template engine.

---
layout    : page
title     : Blog Posts
---

  {% assign posts = site.posts %}

  <ul>
  {% for post in posts %}
    <li>
      <a href="{{ site.baseurl }}{{ post.url }}">
        {{ post.title }}
      </a>
    </li>
  {% endfor %}
  </ul>

Pay attention to the loop.

  {% assign posts = site.posts %}
  {% for post in posts %}
    ...
  {% endfor %}

Jekyll: Archive Page in Browser

Post Content: posts/every-day

And this one has some more information in frontmatter.

---
layout    : post
title     : Every Day
date      : 2015-10-03 08:08:15 +0700
categories: movie
---

I've been thinking about this
over and over and over.

I mean, really, truly,
imagine it.

...

Jekyll: Everyday Post in Browser

Local Render

You might want to see the render result, by looking at the _site directory.

$ tree _site
_site
├── index.html
├── movie
│   └── 2015
│       └── 10
│           └── 03
│               └── every-day.html
└── pages
    ├── about.html
    └── index.html

5 directories, 4 files

Jekyll: Tree: _site

What’s in your browser is what rendered in _site.

What’s Next?

Consider continue reading [ Jekyll - Plain - Custom Pages ].

Thank you for reading.