Article series for pelican

My first idea was to just use tags, and then list all the articles in a specific tag together. However, tags should be pretty short, and I wanted my series to have a bit more of a descriptive name.

After toying around a bit, I stumbled upon the fact that you can put arbitrary metadata in your articles, which you can then use in the templates. So, after thinking a bit, a plan was born - and promptly implemented.

I decided that I wanted the series to be listed next to the other post meta-info (Where the tags and publication date are shown). So, I've added a small include to the article_infos.html template:

<footer class="post-info">
    ...
    {% include 'series.html' %}
</footer>

Template Logic

The series.html is implemented as follows:

{% if article.series %}
    <span class="series_info">
        <p>
        This article is part of a series named <b>{{article.series}}</b>.
        Other articles in this series:
        </p>
        <ol>
        {% for art in articles|reverse %}
            {%if art.series and art.series == article.series %}
            <li {% if art.slug == article.slug %}class="current_in_series"{% endif %}>
            <a href="{{SITEURL}}/{{art.url}}">{{art.title}}</a>
            </li>
            {%endif %}
        {% endfor %}
        </ol>
    </span>
{% endif %}

What it does is pretty simple: If the article has an attribute named "series", it shows a small bit of text telling the visitor about the series. It includes the series attribute of the article, which is expected to be just a bit of text.

It then loops over all articles in reverse order (so the oldest one is on top) and lists all articles with the same "series" attribute.

If the article's slug (urlified title) is the same as our current article, we know that it's the article that's currently displayed, so we add a little CSS class to it. This way, we can highlight it later on in the CSS.

Styling

After publishing the first version of my implementation, I quickly noticed that there was a problem: The series info was also displayed in places where only the summary was used. In other words, the article_info.html template was used there as well. Luckily, we can hide the series info bit pretty easily with some custom CSS:

/* Hide series_info in overview / summary lists */
.hentry .series_info { display: none; }

To highlight the current post in the series, I've added some background color with a nice, round border radius. You can customize this as you want, of course. Here's what I did:

.series_info ul {list-style-type: circle; }
.series_info .current_in_series {
    background-color: #ceceff;
    padding: 2px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

Usage

Okay, so the ground work has been laid, now how can we actually use this? Not even hard. Here's the header part of one of the article's markdown source. Notice the line that starts with Series? Yup, that's all it really takes. Just take care that you don't mistype the series label, or your articles will not be shown together, of course. But this counts for tags and categories as well, so you already know you need to be careful.

Title: Writing a programming language: Implementing the Sieve of Eratosthenes on DVM01
Date: 2012-04-09 23:04
Author: Dave
Summary: As promised in my previous post, ...
Category: Code
Tags: Fun, Hacking
Series: Developing a programming language

Well, that was easier than I thought! I'm starting to like Pelican more and more :)