Set a template

Let's give your pages a common template.

Templates allow you to share designs and layouts across similar pages, and hide away markup and styling details. In this step, we will use a template for all our blog posts that is different from the Index page, to automatically generate things like author info and publication date.

Change template for the post page

With your post page open, bring up the document sidebar, by hitting the document icon next to the Share button. Select Blog from the template dropdown.

Choose template

Your page should look like this:

Page with new template

As you can see, in addition to the content you just entered, there are some more elements in the preview page: a navigation bar, a cover image, a date, some author info. If you want to see what happens under the hood, hit Edit template below the template selection menu to open up the JSX source code. In this guide, we won't go into the technical details of how to build up a layout with JSX, but what is important to know is that the template can grab your page's data and use it in various ways. Let's see how!

Setting template values

This template looks at a page's meta values, and uses them to generate:

  • A cover image,
  • A publication date,
  • A title,
  • Author info (profile picture and Twitter handle).

Paste the following at the top of the page:

cover: ""
title: "My first post"
date: "2021-12-12"
twitter: "jane_doe"
name: "Jane Doe"
avatar: ""

Notice how the information has now been automatically filled into your page, all nicely laid out!

Page with updated metadata

There is a lot more you can do with templates, such as applying them automaticaly to all pages within a folder, or generating an index of blog posts. We cover this in the in-depth article on Templates.

Before we publish our website, let's prepare it for SEO.