A snippet appears on every page — on the start page and on one three levels down. A link inside it
has to be right from everywhere. That is what {{root}} is for.
<a href="{{root}}/about">About this site</a>| From which page | What it becomes |
|---|---|
| start page | ./about |
3-placement/index | ../about |
3-placement/02-the-order | ../about |
a/b/c | ../../about |
What is counted is the slug’s segments minus one. 3-placement/index and
3-placement/02-the-order both have two segments and therefore sit equally deep — that one is a
folder page and the other is not makes no difference.
Why not simply /about
A leading slash points at the server root. As long as the site sits there, that works fine. As soon as it sits under a subpath, it points straight past it:
| Address of the site | /about lands at | {{root}}/about lands at |
|---|---|---|
example.org | example.org/about ✓ | the same ✓ |
boxi-os.github.io/quartz-layout-box | boxi-os.github.io/about ✗ | …/quartz-layout-box/about ✓ |
The second case is the normal one on GitHub Pages — and the reason this site writes its own links that way.
The mistake only shows after publishing
Locally the preview runs on
localhostwithout a subpath, where the slash works. It breaks exactly where nobody is watching any more.
Images likewise
<img class="img-light" src="{{root}}/static/logo-light.png" alt="" />
<img class="img-dark" src="{{root}}/static/logo-dark.png" alt="" />The two classes are part of the plugin: img-light appears in the light colour scheme, img-dark
in the dark one. The plugin sets display for both itself — so write no display rule for them
in your own CSS. It would beat the plugin’s, and both images would stand there at once. At length in
5.2 – Styling.
Absolute addresses stay absolute
{{baseUrl}} returns the configured address of the site — for cases where a link has to be absolute
rather than relative: an og:url, a feed, a line meant to be copied.