In a recent article, I explained how I categorize my posts using microformats vocabulary names in front matter. In this followup, I’ll demonstrate using front matter for microformats properties.
When I post a photo on my site, I note where it was taken:
The webpage’s html has class attributes specifying the
microformats type, h-entry, along with three h-entry
properties, the last of which is p-location:
<body class="h-entry">
<h1 class="p-name">Nasturtiums</h1>
<time class="dt-published" datetime="2024-06-19">
Wednesday June 19, 2024
</time>
<div class="p-location h-adr">
<span class="p-locality">Seattle</span>,
<span class="p-region">Washington</span>
</div>
<img src="nasturtiums.jpeg" alt="">The p-location in the code is an embedded microformat,
h-adr, which has its own set of properties.
And that structure is mirrored in the markdown’s front
matter:
there’s an item called location – taken from h-entry –
with nested items taken from h-adr.
---
type: entry
title: Nasturtiums
date: 2024-06-19
location:
locality: Seattle
region: Washington
---Now let’s look at the template extract that produces the markup:
<div class="p-location h-adr">
<span class="p-locality">{{ location.locality }}</span>,
<span class="p-region">{{ location.region }}</span>
</div>By using microformats terms (location, locality, and
region) instead of, say, “place,” “city,” and “state,”
I get easy-to-understand template code where
class attribute values match variables names.
Locations With Names
If a post’s location has a name, I add it to the location.
The nested microformat vocabulary in the page’s html will
change from h-adr to h-card to accomodate the name.
(N.B. There are two p-name properties in the following
code extract.
I’ve added comments to differentiate them.)
<body class="h-entry">
<h1 class="p-name">Geese</h1> <!-- the name of the h-entry -->
<time class="dt-published" datetime="2022-10-17">
Monday October 17, 2022
</time>
<div class="p-location h-card">
<div class="p-name">City Park</div> <!-- the name of the location -->
<span class="p-locality">Denver</span>,
<span class="p-region">Colorado</span>
</div>
<img src="geese.jpeg" alt="">To store the location’s name in the front matter, I add a new item:
---
type: entry # the name of the h-entry
title: Geese
date: 2022-10-17
location:
name: City Park # the name of the location
locality: Denver
region: Colorado
---Again, the markup and template variables match each other:
<div class="p-location h-card">
<div class="p-name">{{ location.name }}</div>
<span class="p-locality">{{ location.locality }}</span>,
<span class="p-region">{{ location.region }}</span>
</div>Locations With Websites
I can link to a location’s website, too.
The website’s url is denoted by the h-card property u-url:
<body class="h-entry">
<h1 class="p-name">Lily Pads</h1>
<time class="dt-published" datetime="2022-08-24">
Wednesday August 24, 2022
</time>
<div class="p-location h-card">
<a class="p-name u-url"
href="https://botanicgardens.uw.edu/washington-park-arboretum/">
Washington Park Arboretum
</a>
<span class="p-locality">Seattle</span>,
<span class="p-region">Washington</span>
</div>
<img src="lily-pads.jpeg" alt="">And in the front matter, it’s in the corresponding url
item, which, again, appears inside location:
---
type: entry
title: Lily Pads
date: 2022-08-24
location:
name: Washington Park Arboretum
url: https://botanicgardens.uw.edu/washington-park-arboretum/
locality: Seattle
region: Washington
---Here’s the template, modified to show a place name as a link:
<div class="p-location h-card">
<a class="p-name u-url" href="{{ location.url }}">
{{ location.name }}
</a>
<span class="p-locality">{{ location.locality }}</span>,
<span class="p-region">{{ location.region }}</span>
</div>Locations For Other Kinds of Posts
I can add a location to other kinds of posts, too.
Unlike the earlier examples, Butler Green Farms is not a single-photo entry but an article that recounts a day spent volunteering there. With not one but several photos. Still, the html source code should look familiar:
<body class="h-entry">
<h1 class="p-name">Butler Green Farms</h1>
<time class="dt-published" datetime="2024-06-18">
June 18, 2024
</time>
<div class="p-location h-adr">
<span class="p-locality">Bainbridge Island</span>,
<span class="p-region">Washington</span>
</div>
<p>
I volunteered at
<a href="https://butlergreenfarms.com/">Butler
Green Farms</a>,
planting salad greens and sunflowers, and doing
a bit of weeding.
</p>Same for the front matter:
---
type: entry
title: Butler Green Farms
date: 2024-06-18
location:
locality: Bainbridge Island
region: WashingtonMore Uses for Front Matter
Front matter can be used for additional microformats-related purposes. Like, say, specifying a photo to be “featured” in post feeds. I’ll discuss that idea in a future article.