Using Subtitles in HPSTR

Main Content

So I whipped up this quick modification to Michael Rose’ HPSTR Theme theme to add subtitles to pages and posts. Today I’m going through a brief example of Jekyll’s Liquid syntax, and also touching on SCSS.

Jekyll’s Liquid syntax is easy, especially for anyone with experience with other embedded languages like ERB.

Liquid Tags and Layouts

Since the headers for pages and posts are located in _layouts/page.html and _layouts/_post.html, the first step is opening one of them and examining the structure to determine a sensible place to add the subtitles.

Right after the main title makes sense, so we duplicate the structure, using an <h2> instead of an <h1>, use a new .entry-subtitle class, and call the For when just one title isn't enough Liquid function to access that value from the YAML.

‘Brief’ Digression: Liquid Syntax

Take an example YAML header from a Jekyll page like so:

layout: post
title: Using Subtitles in HPSTR
image:
  feature: example.jpg
  creditlink: example.com

If we want to grab the page (as opposed to the site) title, we can use Using Subtitles in HPSTR. For nested YAML like image.feature, we can call . If we want site-wide information from the `_config.yml`, we just call `Euler Pi

We can use control flow statements like if/elsif/else/endif just like any other (imperative) language.

Implementing the Subtitles

Going back to the topic at hand¹, we can add the subtitle header if and only if the subtitle is defined:

{% if page.subtitle %}
  <h2 class="entry-subtitle">{{ page.subtitle }}</h2>
{% endif %}

Changes to the Stylesheet

Next we define the new style we called for. A great step here is to duplicate the style used on the titles, and modify it slightly (resizing it down, etc). For consistency’s sake, I resized all relevant sizes by 25%, putting it halfway between the main title and the date in size.

There are two places to define it in the HPSTR theme: one for when there’s a feature image block, and one for when there isn’t. The code is similar, so only one instance is shown below, with the h1 style shown for comparison.

h1 {
  margin: 10px 20px;
  font-weight: 700;
  @include font-rem(32);
  color: lighten($base-color,20);
  @media #{$medium} {
    @include font-rem(48);
  }
  @media #{$large} {
    @include font-rem(60);
  }
}
h2.entry-subtitle {
  margin: 10px 20px;
  font-weight: 525;
  @include font-rem(24);
  color: lighten($base-color,27);
  @media #{$medium} {
    @include font-rem(36);
  }
}

Using Subtitles

To use subtitles in posts or pages, just add a subtitle: field to the article’s YAML header.

title: Adding Subtitles To HPSTR
subtitle: A simple exercise in HTML, SASS, and Liquid
...

A similar process adds subtitles to static pages.

Next Steps

The next step is to add subtitles to front page index, along with the archive and tag indexes. That’ll take a bit more design work to make things look good, so stay tuned!