By default, the theme I’d been using with Mephisto displayed dates in a relatively obtuse way, at least for a blog.
One of the things I’ve learned to appreciate more when reading blogs is that by looking at the published date, I can determine how recently it was updated, and, whether it’s a blog that’s full of life. Very much unlike this one of late :)
Although just putting the published date gives me that information, it’s more than I really need. Actually, all I’m interested in is how recent the post was. Not when the post was precisely made. That has a use, but as a regular surfer to the site I don’t mind. In my RSS client (NewsFire), the important thing is whether it’s a new post.
The same data, different consumption scenarios, different priorities.
I wanted to get relative dates working again. After all, Typo used to support that for most of the themes I’d tried. So, rather than displaying the whole date, I’d like it to display ‘3 days ago’, for instance.
Turns out, the Scribbish theme for Mephisto already includes this support. It has a scribbish.js JavaScript file that includes a function to show_dates_as_local_time.
Sweet. Everything’s already there. Almost.
All that’s needed is to add a span element to the liquid template (with it’s class set to scribbish_date) that includes the expected date format (Tuesday, November 21, 2006 14:57:00 GMT - for example), that is then replaced by the JavaScript. That way, the markup contains a full date and time.
So, inside the _article_author.liquid template, look for the following:
<abbr class="published" title="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%S+00:00' }}"></abbr>Change it to
<abbr class="published" title="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%S+00:00' }}"> <span class="scribbish_date" title="{{ article.published_at | date: '%A, %B %d, %Y %H:%M:%S %Z' }}"> {{ article.published_at | date: ‘%A, %B %d, %Y %H:%M:%S %Z’ }} </span></abbr>The “%A, %B %d, %Y %H:%M:%S %Z” format string ensures the date gets rendered correctly (Tuesday, November 21, 2006 14:57:00 GMT) and when you browse to the page, the date gets replaced. Magic.