#4039: default.html

site/_layouts/default.html

Path: site/_layouts/default.html · Lines: 32 · Type: Jekyll layout — THE root layout

Purpose: The base HTML shell for EVERY page on projectforge.org. Provides <!DOCTYPE>, <html>, <head> (via head.html include), <body> with navbar/hero switching, content injection, offcanvas panels, conditional footer, and 3 hook injection points for script/style extensibility.

Source: GitHub

32 lines · 21 code · 0 comments · 11 blank
CommitMessage
ac75fabf32021-08-10 Jekyll site migration
Root of the layout inheritance tree. All other layouts (page.html, doc.html, post.html, changelog.html) declare layout: default in their front matter, meaning their output is injected into {{ content }} on line 14 of this file. This is the bottom of the inheritance chain — it outputs the actual HTML document.

The full page lifecycle — 12 includes in order

1. {% include head.html %}               // <meta>, <title>, CSS, JS (in <head>)
2. {% include hero.html %} OR navbar      // Conditional: hero section or plain navbar
3. {{ content }}                          // Page-specific content (from child layout)
4. {% include offcanvas-docs.html %}      // Mobile documentation menu panel
5. {% include offcanvas.html %}           // Mobile site menu panel
6. {% include footer.html %}              // Conditional: only if NOT doc layout
7. {% include hook-pre-closing-body-doc.html %}  // Conditional: only for doc layout
8. {% include hook-pre-closing-body.html %}      // Always: global pre-</body> scripts

The order matters — offcanvas panels must be after content (they're position:fixed overlays), footer is conditionally suppressed for doc pages, and hook includes are injected just before </body> for performance (scripts at end of body).

Three conditional branches

ConditionLineWhen activeWhy
page.hero8-12Page has hero front matterHero includes its own navbar (line 14 of hero.html). If hero is present, the bare navbar would duplicate. Hero pages: index.adoc, search.adoc.
page.layout != 'doc'20-22NOT a documentation pageDoc pages have their own prev/next navigation at the bottom — the site footer would compete visually. Non-doc pages (homepage, search, legal) get the footer.
page.layout == 'doc'24-26Documentation pages onlyDoc pages get special pre-closing-body scripts: prev/next navigation JavaScript, doc-specific analytics, table-of-contents scroll spy. Non-doc pages skip this.

The hook system — extensibility without editing layouts

The three hook-*.html includes are Jekyll's version of WordPress hooks — injection points where plugins or page types can add scripts/styles without modifying the layout template:

HookInjection pointUsed by
hook-head.htmlInside <head> (via head.html)Page-specific CSS, meta tags
hook-post-content-doc.htmlAfter content, doc pages onlyDoc-specific post-content scripts
hook-pre-closing-body.htmlBefore </body>, alwaysGlobal JS: analytics, search init, UIkit init
hook-pre-closing-body-doc.htmlBefore </body>, doc pages onlyDoc-specific JS: TOC scroll spy, prev/next keyboard nav

This is the same architectural pattern as UIkit's hook/mixin system in SCSS (#4061) — empty extension points that child layouts can implement without modifying the parent.