A Path Less Travelled

Oct 2013

Adding Teasers and Tags for Posts with Harp

Starting a blog using Harp is very easy. Here's how to add teasers to the front page, and how to make tag pages.

Adding Teasers

Let's add support for WordPress style teasers: teaser and the rest of the content separated by a <!-- more --> comment.

Well, first you add the comment to your posts, like this:

Then, in index.jade, you can render the post and strip away the comment and everything after it. Then you got your teaser. This is possible because partials in the Harp flavored Jade is implemented by passing in a partial() function which is callable by JavaScript code in the Jade template! Calling partial(postFilePath) actually returns the rendered post as a JavaScript string. Then it's easy to call String.prototype.replace() to strip away everything you don't need.

The JavaScript code is really simple (assuming you put your posts under public/posts):

Prefix each line with - to make it unbuffered code in Jade.

The teaser will look like this:

Put it in the front page.

Making Tag Pages

Or, more precisely, making a tag page to dynamically list posts for different tags. Harp, AFAIK, doesn't allow you to create pages without a template. And it's for developing WebApps. So the solution is obvious: you need client side JavaScript to make it possible (unless you create a page template for each tag by hand).

My solution is to populate the tag page with all tags, and hide those tags you don't want. The wanted tag name is passed in via the hash part in the URL.

Tags, as I mentioned in the Migrated Blog to Harp post, should be specified in the _data.json file. Extracting tags from the file is really straightforward.

Source of my tag template:

Jade Snippet to Find Page Data

Harp only sends in a current object with path info of the template. To find data registered for the specific template, use the JavaScript snippet below (and don't forget to prefix the lines):

I put it in _page.jade and include it in almost every Jade template.

comments powered by