How to create art directed blog posts with Harp
This recipie will show you how to style individual posts differently.
Overview
Art directed blog posts commonly refer to styling blog posts or portfolio projects distinctly, depending on the content included.
Example using Jade templating
You might structure your site as follows:
▾ /
▪ _layout.jade <-- Basic layout will wrap everything
▪ index.jade <-- Index page
▪ 404.jade <-- Your 404 page, will get served at /404
▪ about.md <-- Your about page, will get served at /about
▪ css/
▪ main.scss <-- Main Sass file
▪ blog/
▪ _data.json <-- Your blog’s flexible metadata
▪ index.jade <-- Blog index
▪ post-1.md <-- An example post
…
▪ post-6.md <-- Another blog item
▪ post-7.jade <-- A blog post where you want more control over the markup, so used Jade
Now, for the art directed posts, you can use Harp’s current
variable. You can use it in the _layout
file, like this:
doctype
html(class="#{ current.path[0] == 'blog' ? current.source : '' }")
head
title Hello, world
body
!= yield
When you visit portfolio/project-6
, This will render as:
<!DOCTYPE html>
<html class="project-6">
<head>
…
…allowing you to style the post differently. When you visit other pages, it will just render without a class name. You could change this however you want, and just have the page’s class name everywhere if you decided that was appropriate for your used case. Another example might be to prefix the class name with art-dir-
or something.
Example using EJS templating
You might structure your site as follows:
▾ /
▪ _layout.ejs <-- Basic layout will wrap everything
▪ index.ejs <-- Index page
▪ 404.ejs <-- Your 404 page, will get served at /404
▪ about.md <-- Your about page, will get served at /about
▪ css/
▪ main.scss <-- Main Sass file
▪ blog/
▪ _data.json <-- Your blog’s flexible metadata
▪ index.ejs <-- Blog index
▪ post-1.md <-- An example post
…
▪ post-6.md <-- Another blog item
▪ post-7.ejs <-- A blog post where you want more control over the markup, so used EJS
Now, for the art directed posts, you can use Harp’s current
variable. You can use it in the _layout
file, like this:
<!DOCTYPE html>
<html class="<%= current.path[0] == 'blog' ? current.source : '' %>">
<head>
<title>Hello, world</title>
</head>
<body>
<%- yield %>
</body>
</html>
When you visit portfolio/project-6
, This will render as:
<!DOCTYPE html>
<html class="project-6">
<head>
…
…allowing you to style the post differently. When you visit other pages, it will just render without a class name. You could change this however you want, and just have the page’s class name everywhere if you decided that was appropriate for your used case. Another example might be to prefix the class name with art-dir-
or something.