home icon contact icon rss icon

New Theme

Unless your browser’s cache doesn’t know when to quit, you should notice a nice new look for my site. Now including one of my favorite web interfaces, the tag cloud.

Developing a theme using liquid markup was surprisingly quick and easy. Rather than being horrified as when I first examined the code behind a Wordpress theme I was pleasantly surprised at the logical nature of the system. As an example, let’s look at how the web browser title is generated:

<title>{{ site.title }} - {% if article %} {{ article.title }} {% else %} {{ site.subtitle }} {% endif %}</title>

Pretty straightforward. But let’s start at the basics. The browser title is required to be surrounded by <title></title>, so that’s written out. But now, rather than writing out the title of my site I simply tell the site to put in the title that I’ve given it with {{ site.title }}. Further, I can apply a bit of display logic and tell the site that, “If the web site vistor is currently reading a specific article, then put that article’s title in the browser title; otherwise put in the site’s subtitle.” Nice.

How about this:

<div id="tagcloud">
  {% for tag in site.tags %}
    {{ tag | yatagcloud }}
  {% endfor %}
</div>

Oh yeah, that’s all the code that generates the tag cloud. The site knows that each article has tags, and it keeps a running list of all of them. In the above code chunk I tell the site to iterate over every tag that it knows about and refer it to ‘yatagcloud’. ‘yatagcloud’ is the method installed by the ‘yet another tag cloud’ plugin and it handles all the messy business of getting the number of articles using the tag and applying the proper styling, etc.

I followed the recent clockwork object’s guide to creating a Mephisto theme using liquid and didn’t really have any troubles. If it weren’t for the guide this theme wouldn’t exist. I read it, decided that it looked like too much fun to pass up, and decided to design a theme for my site. Since I started with my previous theme, the whole process took a couple days of off and on coding.

I still have some tweaking and modification that I’d like to do. Specifically I want to modify the tag cloud so that it modifies the tags as a function of time in addition to use. Tags used more recently will be bumped up a level or two. Tags that haven’t been used in a while will be dropped a level or two. This way the cloud really will be a floating list of the things that I’ve been thinking (or at least blogging) about.

donald said

Oct 22, 2007 @ 05:51 PM

Shorter versions:

{{site.title}} – {{article ? article.title : site.subtitle}}

and

{% site.tags.each do |tag| {{ tag | yatagcloud }} end %}

Iterators are typically preferred to for loops in idiomatic ruby. Just fyi. There’s probably a better way to do the latter example in idiomatic mephisto markup, but I don’t know mephisto.

Stephen said

Oct 22, 2007 @ 06:10 PM

Makes sense to me. My two snippets above come, respectively, from the theme I modified to make mine and the instructions for the tag cloud plugin I’m using.

RSS feed for comments on this post

Leave a Comment