An option that I'd suggest is using separate layouts. It takes advantage of the system that Harp already has in place, and helps maintain the concept of "different content, different file." Using Harp, you can specify an explicit layout for any given page in the _data.json or _harp.json files.
From http://harpjs.com/docs/development/layout
Layouts other than _layout can be specified in a _data.json. This is
useful if you need even finer control of Layouts, or if you want to
name your Layout something other than _layout.
myapp.harp.io/
|- _layout.ejs
|- index.ejs
|- about.md
+- articles/
|- _data.json
|- _an-example-layout.ejs
|- _another-one.jade
|- article-one.md
+- article-two.md
Here, it’s possible to make article-one.md use _an-example-layout.ejs by specifying layout in the _data.json file in that folder:
{
"article-one": {
"layout": "_an-example-layout",
"title": "Example Title"
},
"article-two": {
"layout": "_another-one",
"title": "Another Example Title"
}
}
Now, each article will use the specified Layout.
If it's a minor difference you want to make and you can't justify having a completely separate template, you can also pass data through to the include if you use Harp's partial()
function instead of Jade's include
keyword. Then the logic for handling the different variable value would be in a single head.jade
file. Your example might look like this.
foo.jade:
doctype html
html
body
!= partial("./includes/head.jade", { page: bar })
h1 My Site
p Welcome to my super lame site.
include ./includes/foot.jade
head.jade should now have access to the page variable.
A third option can take advantage of the current
object that Harp injects into the templates. If you're accessing //site.com/foo/bar
, current.source === "bar"
and current.path === ["foo", "bar"]
. You can use this object to dynamically set class names, etc. You can read more about it here: http://harpjs.com/docs/development/current