Defining Post Metadata

Feb 05, 2021

Jar of pushpins scattered

Eleventy Portway Starter makes a few decisions about blog posts on your behalf, but you can customize some of those properties using Portway fields.

Using fields

Inserting a field into your Portway document is a cinch:

  1. Open a document for editing
  2. Click or tap the + button in the toolbar below your editor
  3. Select the type of field you wish to insert
  4. Update the field name and value

Supported properties

date

By default, a post’s date will correspond to the date it was first published from Portway. If you want to override that with a different date, add a Date field anywhere in your document and give it the name date.

Date field in Portway

excerpt

Eleventy Portway Starter automatically generates an excerpt for each post, based roughly on the first sentence of the first text paragraph of your Portway document.

To define a custom excerpt, add a String field anywhere in your Portway document with the name excerpt.

Excerpt field in Portway

pinned

Posts are sorted on your blog home page in reverse chronological order using their publish dates. You can pin one or more posts to the front of the pack, regardless of their publish dates.

Add a String field with the name pinned and the value true. To un-pin a post, delete the field.

Pinned field in Portway

thumbnail

By default, the first image in a post is used as its thumbnail on the site’s home page as well as in social media link unfurls.

If you’d prefer not to use this thumbnail, add a String field with the name thumbnail and the value false.

Thumbnail field in Portway

Other properties

While the supported properties listed above are treated specially, all fields defined in a Portway document are exposed in Eleventy via the data property of a given post.

For example, if you wanted to add a Number field called countdown to each of your blog posts and display that prominently in the post layout, you might do so by editing src/post.njk and adding something like this:

<p>{{ post.data.countdown }} days left!</p>