Create Breadcrumb Trail in Harp Template

  |   |  HARP

Harp is a static web server with built-in preprocessing. It serves Jade, Markdown, EJS, CoffeeScript, Sass, LESS and Stylus as HTML, CSS & JavaScript without any configuration required, and can be used to output a static website. I’ve been writing a template that can be used to include a breadcrumb to any page in the site.

[GARD]

I’ve been writing a website that is going to be updated infrequently, and thought it might be interesting to try and write a static site to compare the speed to my usual WordPress sites. I’ve decided to use the Harp static web server.

One issue I have come across is creating a breadcrumb trail for my posts.

Harp contains a useful javascript object that is passed to all templates called current. There’s a good description of this object on their documentation, so I’ll only say here that it contains useful information about the path to your post. Because this is a static site, the path corresponds directly to the folder structure of your site layout. So if you have a file called new_post.jade that’s located in the blog/thingumy/ directory, then the url on your website will be http://example.com/blog/thingumy/new_post.

In order to create the breadcrumb trail, I wrote a Jade template and created a mixin. There’s full information about mixins on Jade’s website.

[GARD]

So in the file _partials/breadcrumb.jade (the initial underscore prevents the contents of the directory from being served directly) I placed the following code:

// Breadcrumb
mixin breadcrumbUri(item, currentPathIndex)
  -var n = 0;
  -var path = '/';
  -item = item.replace(new RegExp('_', 'g'), ' ');
  while n <= currentPathIndex
    -path += current.path[n++] + '/';
  li
    if currentPathIndex < current.path.length-1
     a(href=path)= item
    else
      span= item

This uses the current.path array to generate the url for a specified directory leading down to the current page / post. It should probably be noted here that this means you’ll need an index file in each directory that returns something useful. This is definitely the downside of a static site, it’s difficult to get category and tag indexes without a certain amount of effort. Maybe that’s a post for another day!

I used the mixin in the following Jade template to output the breadcrumb.

div
  ul.breadcrumbs
    li
      a(href="/") Home
    each item, i in current.path
      li.divider »
      +breadcrumbUri(item, i)

[GARD]

For completeness, here’s the whole of my breadcrumb.jade file. It can be included in other jade templates as required.

// Breadcrumb
mixin breadcrumbUri(item, currentPathIndex)
  -var n = 0;
  -var path = '/';
  -item = item.replace(new RegExp('_', 'g'), ' ');
  while n <= currentPathIndex
    -path += current.path[n++] + '/';
  li
    if currentPathIndex < current.path.length-1
     a(href=path)= item
    else
      span= item

div
  ul.breadcrumbs
    li
      a(href="/") Home
    each item, i in current.path
      li.divider »
      +breadcrumbUri(item, i)

As usual, I hope this helps someone out there! Your comments are welcome below.

, , , , , , ,
COMMENTS