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.
-
Blog:
- Content:
pages/index.html
- Layout:
_layouts/blog.html
- Includes:
_includes/index/blog-list.html
- Content:
-
Tags:
- Content:
pages/tags.html
- Layout:
_layouts/list-tag.html
- Includes:
_includes/index/terms*.html
- Content:
-
Categories:
- Content:
pages/categories.html
- Layout:
_layouts/list-category.html
- Includes:
_includes/index/terms*.html
- Content:
-
Archive by Year:
- Content:
pages/by-year.html
- Layout:
_layouts/by-year.html
- Includes:
_includes/index/by-year.html
- Content:
-
Archive by Month:
- Content:
pages/by-month.html
- Layout:
_layouts/by-month.html
- Includes:
_includes/index/by-month.html
- Content:
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
.
---
layout: page
---
{% assign posts = site.posts %}
{% include index/blog-list.html %}
Content: Blog
We do not need any content, after frontmatter.
---
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
.
---
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.
---
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
.
---
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.
---
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
.
---
layout: page
---
{% assign posts = site.posts %}
{% include index/by-year.html %}
Content: Archive by Year
We do not need any content, after frontmatter.
---
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
.
---
layout: page
---
{% assign posts = site.posts %}
{% include index/by-month.html %}
Content: Archive by Month
We do not need any content, after frontmatter.
---
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.