Middleman blog pagination

Here’s a little snippet that might save a few minutes for someone writing a Bootstrap pagination control for a Middleman based blog’s index page.

Middleman is one of many tools to generate a static website. You write your site in your choice of technologies and formats such as Markdown, HAML, SASS, plain old HTML and so on. Middleman takes your pages, crunches them and outputs standard static HTML which you can then upload to be hosted anywhere. Your site ends up being blazing fast with essentially no security problems.

Of course you won’t be able to do some server side dynamic things like powering a contact form. If you really had to you could write a minimal server side component for just that one functionality. In theory Middleman could even render its template to PHP or Perl for a server CGI script. For the sites Middleman is ideal for like a blog or company site (such as this one), I’ve not really found any need to use any server side scripting. For most use cases there are 3rd party webservices or JavaScript solutions available.

Bootstrap is, of course, a highly reusable modular set of HTML, CSS and JavaScript for creating websites without reinventing the wheel for every basic thing such as a button, a 12 column grid or a carousel.

Together, Middleman and Bootstrap are great tools for quickly putting together a modern, responsive website.

So to get to the point, Bootstrap has a pagination component which looks like this:

It’s a fairly standard design (which is of course why it has a Bootstrap component). The numbers between the previous and next arrows represent pages you can click on.

In Middleman, blog pagination uses dynamic pages, which are exactly like typical server side dynamic pages might be, except the result is evaluated ahead of time and saved as static HTML.

Here’s the code for the blog index page, in HAML. To find the URL to previous and subsequent pages we follow the chain of prev_page and next_page until we get to the one we want. This allows this pagination code to be reused for paginating tags (as opposed to if we had used a hardcoded URL pattern for the numbers page links.)

---
pageable: true
per_page: 10
layout: blog
---

%h1.header
  Blog
  %hr
- page_articles.each do |current_article|
  .post
    .row
      .span4
        %a{:href => current_article.url}
          %h3= current_article.title
        %p= current_article.summary
        .post_info
          .date
            = current_article.date.strftime('%b %d, %Y')
    %a.btn{:href => current_article.url} Read

.pagination
  %ul
    %li{:class => prev_page ? "" : "disabled"}
      - if prev_page
        =link_to "Prev", prev_page.url
      - else
        %span Prev
    - (page_number - 2 .. page_number + 2).select{|i| i > 0 && i <= num_pages}.each do |i|
      - if i == page_number
        %li.active
          %span= i
      - else
        %li
          - p = nil
          - (i ... page_number).each do p = p ? p.metadata[:locals]['prev_page'] : prev_page; end
          - (page_number ... i).each do p = p ? p.metadata[:locals]['next_page'] : next_page; end
          =link_to "#{i}", p && p.url
    %li{:class => next_page ? "" : "disabled"}
      - if next_page
        =link_to "Next", next_page.url
      - else
        %span Next

Written by Alexander Ljungberg on 2013 Jan 2 .

Tagged

• code
• html

.