Owen Griffin

This is my second article on using the Nanoc3 static site generator. I’ve previously written about integrating the Compass CSS framework with Nanoc. This time I’m documenting how to use Haml templates.

Haml is a language used for generating HTML. It’s rather nice because it gently co-erces the developer into generating well-structured markup. It’s also designed to make life easier with various little enhancements.

Haml templates are well-supported in the Nanoc. Take the basic site I created for my first article compass_tutorial. Add the following code to layouts/default.haml.

!!!html
%head
  %meta(charset="utf-8")
  %meta(name="generator" content="nanoc 3.1.6")
  %title
    A Brand New nanoc Site - 
    = @item[:title]
  %link(href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css")
  %link(href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css")
  /[if IE]
    %link(href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css")
  %body
    #main
      = yield
    #sidebar
      %h2 Documentation
      %ul
        %li
          %a(href="http://nanoc.stoneship.org/docs/") Documentation
        %li
          %a(href="http://nanoc.stoneship.org/docs/3-getting-started/") Getting Started
      %h2 Community
      %ul
        %li
          %a(href="http://groups.google.com/group/nanoc/") Discussion Group
        %li
          %a(href="irc://chat.freenode.net/#nanoc") IRC Channel
        %li
          %a(href="http://projects.stoneship.org/trac/nanoc/") Wiki

The above is a copy of the default Nanoc3 template, with the Compass stylesheets added, as per the previous post, converted into Haml.

Now within the Rules file you need to change the default filter to be Haml, not erb. This can be done by changing the following line:

layout '*', :erb

It should now look like the following:

layout '*', :haml

Remove the layouts/default.html file, because it is now no longer used.

Recompile the site and view it:

nanoc3 co
nanoc3 view

When you open http://localhost:3000/ in a web browser should find that nothing has changed.

One final note: If you start to use Kramdown and Coderay for your Nanoc3 documents ensure that you enable the Haml ugly option. By default Haml formats your content so that it has lovely spacing. This is quite nice when viewing the HTML output of your pages. However the whitespace is also added to the contents of any <pre> tag, screwing with any formatting on the page. Very annoying if you have lots of code blocks. To append any options to the filter add the following:

layout '*', :haml, { :format => :html5, :ugly => true }