Jekyll - Managing Code - Part Three

Preface

Goal: Clean up pages from code, prepare theme for use in Gemfile.

Source Code

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

Layout Preview for Tutor 05

1: Liquid Code Placement

The Issue

Where to Put Liquid Code?

So far we have these places to put liquid code:

• pages as content, or

• _layouts, or _includes.

The issue will rise, when you bundle your theme as Gem for use with other folks. From now on, consider make content free from any liquid code.

Rewrite Overview

We are going to use these file artefacts.

1. Blog:

   • Content: pages/index.html
   • Layout: _layouts/blog.html
   • Includes: _includes/index/blog-list.html

2. Tags:

   • Content: pages/tags.html
   • Layout: _layouts/list-tag.html
   • Includes: _includes/index/terms*.html

3. Categories:

   • Content: pages/categories.html
   • Layout: _layouts/list-category.html
   • Includes: _includes/index/terms*.html

4. Archive by Year:

   • Content: pages/by-year.html
   • Layout: _layouts/by-year.html
   • Includes: _includes/index/by-year.html

5. Archive by Month:

   • Content: pages/by-month.html
   • Layout: _layouts/by-month.html
   • Includes: _includes/index/by-month.html

Notice, that all custom pages use different layouts.

2: Layout Enhancement

Directory Tree: Includes

The _layouts directory contain files as below:

_layouts
├── blog.html
├── by-month.html
├── by-year.html
├── default.html
├── home.html
├── list-category.html
├── list-tag.html
├── page.html
└── post.html

0 directories, 9 files

We are going to focus on these file artefacts above .

Notice that we have no-more index.html. This index.html is by five new layout.

3: Custom Pages: Blog

Layout: Blog

Again, move code: from pages/index.html to _layouts/blog.html.

• gitlab.com/…/_layouts/blog.html

---
layout: page
---

{% assign posts = site.posts %}
{% include index/blog-list.html %}

Content: Blog

We do not need any content, after frontmatter.

• gitlab.com/…/pages/index.html

---
layout    : blog
title     : Blog Posts
---

With the result in browser, exactly the same with previous theme.

4: Custom Pages: Category and Tag

Layout: Tag List

Move code: from pages/tags.html to _layouts/list-tag.html.

• gitlab.com/…/_layouts/list-tag.html

---
layout: page
---

{% assign terms = site.tags %}
{% include index/terms-array.html %}
{% include index/terms-badge.html %}
{% include index/terms-tree.html %}

Content: Tags

We do not need any content, after frontmatter.

• gitlab.com/…/pages/tags.html

---
layout    : list-tag
title     : All Tags
permalink : /tags/
---

With the result in browser, exactly the same with previous theme.

Layout: Category List

Move code: from pages/categories.html to _layouts/list-category.html.

• gitlab.com/…/_layouts/list-category.html

---
layout: page
---

{% assign terms = site.categories %}
{% include index/terms-array.html %}
{% include index/terms-badge.html %}
{% include index/terms-tree.html %}

Content: Categories

We do not need any content, after frontmatter.

• gitlab.com/…/pages/categories.html

---
layout    : list-category
title     : All Categories
permalink : /categories/
---

With the result in browser, exactly the same with previous theme.

5: Custom Pages: Archive by Year, then by Month

Layout: Archive by Year

Move code: from pages/by-year.html to _layouts/by-year.html.

• gitlab.com/…/_layouts/by-year.html

---
layout: page
---

{% assign posts = site.posts %}
{% include index/by-year.html %}

Content: Archive by Year

We do not need any content, after frontmatter.

• gitlab.com/…/pages/by-year.html

---
layout    : by-year
title     : Archive by Year
permalink : /by-year/
---

With the result in browser, exactly the same with previous theme.

Layout: Archive by Month

Move code: from pages/by-month.html to _layouts/by-month.html.

• gitlab.com/…/_layouts/by-month.html

---
layout: page
---

{% assign posts = site.posts %}
{% include index/by-month.html %}

Content: Archive by Month

We do not need any content, after frontmatter.

• gitlab.com/…/pages/by-month.html

---
layout    : by-month
title     : Archive by Month
permalink : /by-month/
---

With the result in browser, exactly the same with previous theme.

What’s Next?

Consider continue reading [ Jekyll Plain - Meta SEO ].

Thank you for reading.