English
About this handbook

This handbook belongs to the Quartz plugin quartz-layout-box. And it is built with it: this box is a layout box.

It comes from a Markdown file, not from the configuration — which way is better when is in The snippet.

8.2 – The invisible box

2 Min. Lesezeit

The fourth box of this site is not a box in the usual sense. It sits in the footer, is not visible itself, and outputs only this:

options:
  html: <style>.explorer .folder-container[data-folderpath="{{slug}}"]{…}</style>
  className: layout-box-current-folder
layout:
  position: footer
  priority: 20

It highlights, in the explorer, the folder the currently open page lives in.

Why there is no other way

The explorer writes each folder’s path into the HTML as an attribute. Which of them is the current one is known only to the page itself — and that is exactly the value {{slug}} supplies.

CSS alone cannot do it: a stylesheet is the same for every page and knows nothing about the current one. A script could, but that would be JavaScript for a background colour.

Here the placeholder sits inside a selector, not in a text node. That is the unusual part, and it works because the replacement assumes nothing about the meaning of its surroundings.

Because it makes no difference where a <style> sits — and the footer is the place where an invisible box is in nobody’s way. In a sidebar it would, in the awkward case, leave a gap behind.

When this would be the wrong way

For styling that is the same on all pages, CSS belongs in custom.scss. The detour through a box only pays off when a value of the current page has to end up in the rule. Anyone who starts shipping whole stylesheets this way has moved their CSS into the configuration — hard to read, hard to change, and freshly in the HTML of every page.

No frontmatterKey

It has none, deliberately: there is no case in which a single page would want to switch the folder highlight off. A key nobody needs is just another line for somebody to understand later.