Categories page with octopress

Octopress

One thing I really missed with Octopress was a category list page. While it generate a page for each category there is no way to list all categories by default.

The good news is that it's really easy to create one. There are already plugin ready-to-be-hacked on the net, and I'll explain in this post how I did it.

The Plugin

I've based my category list page on Dan Watson's plugin . In his blog post, you'll find instructions if you want a category list in your sidebar.

Copy the CategoryListTag module in plugins/category_list_tag.rb. Here is a copy of Dan's code:

plugins/category_list_tag.rb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

module Jekyll
  class CategoryListTag < Liquid::Tag
    def render(context)
      html = ""
      categories = context.registers[:site].categories.keys
      categories.sort.each do |category|
        posts_in_category = context.registers[:site].categories[category].size
        category_dir = context.registers[:site].config['category_dir']
        category_url = File.join(category_dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase)
        html << "<li class='category'><a href='/#{category_url}/'>#{category} (#{posts_in_category})</a></li>\n"
      end
      html
    end
  end
end

Liquid::Template.register_tag('category_list', Jekyll::CategoryListTag)

The Page

Alright! Now all we have to do is create a page (mine is in source/blog/categories/index.html), give it the category_list liquid tag and voilà! Here is a quick example:

source/blog/categories/index.html

1
2
3
4
5
6
7
8
9
10
11

---
title: "Blog Categories"
comments: false
footer: true
---

<div id="blog-categories">
  <ul>
    {% raw %}{% category_list %}{% endraw %}
  </ul>
</div>

The Hack

You can now hack the plugin's code and/or your new page. I did some modifications to make the categories list page looks like the archives (and even added a Tag Cloud). In case you're interested you can get the full patch here (don't expect it to apply smoothly though, it is meant to be adapted).