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.
Liquid syntax is easy,
especially for anyone with experience with other embedded languages like
Liquid Tags and Layouts
Since the headers for pages and posts are located in
_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:
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 hand1, we can add the subtitle header if and only if the subtitle is defined:
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.
To use subtitles in posts or pages, just add a
subtitle: field to the
article’s YAML header.
A similar process adds subtitles to static pages.
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!
Like I said in my opening post, I tend to go off on tangents. Its a curse when writing blog posts. ↩