How to get custom title and description per page
This recipe shows you how to setup your application so you can customize title and description per page, while keeping a safe default for when it’s not specified.
The default values will be specified in your _harp.json
file, and we’ll override those values per page using our _data.json
file.
You can find more information about templates data on the docs.
Overview
Directory structure:
_harp.json
_data.json
index.jade // or index.ejs
about.jade // or about.ejs
For this example, this is the behaviour we want: if a visitor is requesting the index page we show the default values of title and description, when they request the about page, we show custom values.
Setup default values
First we’re going to specify our default values that will get used if the page doesn’t have specific values. In your _harp.json
:
{
"globals": {
"title": "My default title",
"description": "My default description"
}
}
Setup custom values for about page
Now go to the _data.json
file and add the custom values that you want for the about page:
{
"about": {
"title": "Welcome to my about page",
"description": "I’m awesome and so are you"
}
}
Use the values in your template
If you’re using Jade…
Now we’re going to use in our _layout.jade
file the title and description that we just added to our _harp.json
file.
doctype
html(lang="en")
head
title= title
meta(name="description" content="#{ description }")
body
!= yield
If you’re using EJS…
If you’re using EJS, this is what your _layout.ejs
should look like:
<!DOCTYPE html>
<html lang="en">
<head>
<title><%= title %></title>
<meta name="description" content="<%= description %>" />
</head>
<body> <%- yield %> </body>
</html>
Results
Now when you visit the index page, Harp will render the default values specified in _harp.json
.
When you visit the about page, Harp overrides the default title and description variables with the ones specified in the _data.json
.
If you wanted to show custom values for the index page, you just need to add the index
key to the _data.json
, like this:
{
"about": {
"title": "Welcome to my about page",
"description": "I’m awesome and so are you"
},
"index": {
"title": "This is my home page",
"description": "Best home page ever"
}
}
Keep in mind that you don’t have to override the two variables. If you override only the title
variable, the template will still use the default value for the description
variable.
How does this work?
The values specified in the _harp.json
globals are made available as template variables, so they can be used in any page at any time.
When a Harp tries to render a page, it tries to match the url path to data that is defined in _data.json
. In this case, it’s matching the about
part of the URL path with the about
key in the _data.json
file.
When Harp finds a match, it makes those variables available for the template that’s getting rendered. And in this case, it overrides the variables that we previously set in _harp.json
.
You can find more information about templates data on the docs.