Octopress: Category Pages With Preview and Pagination

Posted by Prateek Gianchandani

So i have been playing around with Octopress for a few weeks now and i love it. While creating this site, i bumped into a small problem.

How do i display a category page with a preview of all the blog posts and include pagination in it as well ?

Ofcourse, if you just want to visit the default category page that Octopress creates, you can just append something like /categories/[category_name]/ to the base url. For e.g here is the link to the posts with the category security. But this is so boring. It would have been cool to have a preview of each post just like the home page, and that also had pagination, something like this .

Here is how i did it.

First of all, create a new page that will serve all the posts for that category. Let’s assume that category name is Travel.

1
2
3

Prateeks-MacBook-Pro:octopress prateekgianchandani$ rake new_page["security"]
mkdir -p source/security
Creating new page: source/security/index.markdown

Then go to source/index.html inside your Octopress directory. It would look something like this.

1

  
 (index.html) download

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

---
layout: default
---
{% include header.html %}
<div class="blog-index">
  {% assign index = true %}
  {% for post in paginator.posts %}
  {% assign content = post.content %}
    <article>
      {% include article.html %}
    </article>
    {% unless post == paginator.posts.last %}
    <hr>
    {% endunless %}
  {% endfor %}
  <div class="pagination">
    {% if paginator.next_page %}
    <a class="prev" href="{{paginator.next_page}}">&larr; Older</a>
    {% endif %}

    {% if paginator.previous_page %}
    <a class="next" href="{{paginator.previous_page}}">Newer &rarr;</a>
    {% endif %}
  </div>
</div>

The only change that needs to be done is that instead of iterating over all the pages, we will have to iterate over the posts of a specific category. So basically you replace paginator.posts with site.categories.security where security is the category name. Here is how it will look like.

1

 (security.html) download

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

---
layout: default
title: "Posts on Security"
comments: false
sharing: false
footer: true
---

{% include header.html %}
<div class="blog-index">
  {% assign index = true %}
  {% for post in site.categories.security %}
  {% assign content = post.content %}
    <article>
      {% include article.html %}
    </article>
    {% unless post == paginator.posts.last %}
    <hr>
    {% endunless %}
  {% endfor %}
  <div class="pagination">
    {% if paginator.next_page %}
    <a class="prev" href="{{paginator.next_page}}">&larr; Older</a>
    {% endif %}

    {% if paginator.previous_page %}
    <a class="next" href="{{paginator.previous_page}}">Newer &rarr;</a>
    {% endif %}
  </div>
</div>

Copy this code inside security/index.markdown file.

Now, your category page will be available at /security :)

Here is how it looks like on this site http://highaltitudehacks.com/security/

If you have any questions, feel free to ask them in the comments section below.

Comments