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.
Your page should look like this:
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: "https://tinyurl.com/yfjebfnj"title: "My first post"date: "2021-12-12"author:twitter: "jane_doe"name: "Jane Doe"avatar: "https://tinyurl.com/2p94rwv8"---
Notice how the information has now been automatically filled into your page, all nicely laid out!