Markup of frontmatter keys in DOM

Use case or problem

With the recent 1.1 update, you either get the choice of showing all of the frontmatter, or nothing. Through CSS it’s currently possible to tweak this a little bit as the aliases: and tags: get additional markup in the DOM with mod-aliases or mod-tags.

So what I’m proposing is to add similar tags or attributes to the other frontmatter-section’s, like either having an extra class like field-MY_KEY_VALUE or even better an attribute like data-field-key="MY_KEY_VALUE", so that we could target these better within CSS.

Proposed solution

Given a frontmatter field like Date: 2022-12-13, we could have the surrounding div be either of the following:

<div class="frontmatter-section" data-field-key="date">
<div class="frontmatter-section field-date">

Then we could use one of the following CSS-selectors to hide them as an example:

.frontmatter-section.field-date,
.frontmatter-section[data-field-key="date"] {
  display: none;
}

The attribute variant would be the best, as that would allow for more generic searches on the attribute to be used as CSS selectors.

Related feature requests (optional)

It’s not the same, but it would give a solution through CSS to solve the issue of Exclude frontmatter (or certain frontmatter keys) from search results

Some related issues

3 Likes