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.