3.3 – The same box twice

The plugin may appear in the configuration more than once. Every entry becomes its own instance with its own options and its own place.

plugins:
  - source: github:boxi-os/quartz-layout-box
    options:
      file: snippet.html
      frontmatterKey: layoutBoxNote
    layout:
      position: left
      display: desktop-only
 
  - source: github:boxi-os/quartz-layout-box
    options:
      file: snippet-mobile.html
      className: layout-box-mobile
      frontmatterKey: layoutBoxMobile
    layout:
      position: afterBody
      display: mobile-only

display

Value	Effect
all	everywhere (default)
desktop-only	from tablet width upwards
mobile-only	only below it

The switching width belongs to the site, not to the plugin. It is the same one that makes the explorer and the table of contents disappear.

display hides, it does not rebuild

Both boxes are in the HTML of every page; CSS shows only one. For a few lines of markup that does not matter, for an inline SVG in two variants every page grows by both.

Every instance wants its own frontmatterKey

Without their own keys, all instances listen to the same field — layoutBox: false would then hide all of them. As soon as there is more than one, each gets its own:

options:
  frontmatterKey: layoutBoxNote     # instead of the default layoutBox

The four boxes of this site are called layoutBoxMark, layoutBoxPageName, layoutBoxNote — and the fourth has none at all, because no page should ever steer it. Why that is a deliberate decision is in 8.2 – The invisible box.

className per instance too

All boxes carry layout-box. To tell them apart in CSS, each gets an extra class of its own — layout-box-mark, layout-box-note. Without those you would have to select by position in the layout, which breaks the first time anything is reordered.