Using posts as compound content portions

Objective

Posts allow to easily separate content from layout. Given that fact, our intent has been to use posts as a standard way of populating content portions that belong to the web site, but are not explicitly blog posts; or at least, which should not show up as regular blog posts.

The initial purpose for this was to allow to add dedicated pages for the conferences I animated. And as I explored this approach, I realised I could generalise this for all sections in my resume: committees, projects, experience, … Additionally, as the template became more complex, I wanted to embed its documentation directly in the site.

Solution

The categories front-matter properties is the means by which we will achieve our goal. You may be tempted to say that this is normal Jekyll functionality and behaviour. And you are right. Except that we want to introduce a notion of master categories to segregate content and allow for differentiated handling of post content. Our master categories must be the first entry in the categories (or category) property.

layout     : resume-2017/more-on
categories : more-on conferences
lang       : en

Implementation

Master categories

At the time of writing, the following master categories are handled:

Name Purpose ———- ———————————————————————— blog Regular blog posts design Design and implementation documentation on this of this web site more-on Resume-related content portions (e.g. conferences, experience, hobbies)

These category names become reserved names that will be used to define associated layouts, sections and asides.

Layouts

The preliminary approach was to dedicate a layout for each master category. However, since our base design is the same, this introduces a lot of redundant code. Additionally, we want to reuse functionality implemented in the base layout, in particular the ability to include/exclude sections and asides; typically we want the Twitter aside in all listing layouts.

The only difference from one layout to another is that we will have a fixed first section and a fixed first aside. The fixed first section is the same for all master categories and represents the latest post in that category. The fixed first aside is the archive listing of all published posts in that category.

The implementation approach has been to add a sublayout property in the page’s front-matter and use some Liquid logic to auto-magically to the filtering. This could have been implemented as regular sections and asides but would have introduced much more verbose front-matter in each post.

title       : Archive listing of posts
layout      : resume-2017/resume
sublayout   : blog

Auto-magic behaviour is handled in the base resume layout, quite simply:


By convention dedicated layouts re-use the master category name in combination with a purpose suffix, as illustrated in our above example where the -index suffix denotes the archive listing of posted blogs.

The following layouts are implemented:

Name Purpose —————— ———————————————————————— post Base layout used for all posts blog-index Index (archive listing) of all blog posts design-index Design and implementation documentation home page more-on-index Index of resume-related content portions

Index layouts (i.e. those with the -index suffix in the above table) all have the same construct as the base resume

Implementi

{% for post in site.categories.Personal %}

  • {{ post.date | date_to_string }}   {{ post.title }}
  • {% endfor %}

    {% for post in site.posts %}
        {% unless post.categories contains 'more-on' %}
            <li><a href="{{ post.url }}">{{ post.title }}</a></li>
        {% endif %}
    {% endfor %}
    
    Written on June 19, 1999