Nested Layouts

Sometimes every page shares one outer shell, while one content type needs additional structure.

Jekyll layouts can themselves use layouts.

Example architecture

DEFAULT LAYOUT
  site shell
       ↑ wraps
PROJECT LAYOUT
  project title + metadata
       ↑ wraps
PROJECT PAGE CONTENT

A project layout might begin with front matter:

---
layout: default
---

and contain:

<article class="project">
  <h1>{{ page.title }}</h1>
  {{ content }}
</article>

A project page then selects:

layout: project

Trace content twice

This is where students often get confused.

First, the project page body becomes content inside the project layout.

Then the rendered project layout becomes content inside the default layout.

PAGE BODY
  ↓ content
PROJECT LAYOUT
  ↓ content
DEFAULT LAYOUT
  ↓
FINAL HTML

Guided experiment

Create one nested layout for a project detail page.

Put a visible marker in each layer temporarily:

DEFAULT START
PROJECT START
PAGE BODY
PROJECT END
DEFAULT END

Build and inspect order in generated HTML.

Remove the debug markers afterward.

Avoid nesting for sport

Nested layouts add power and another reasoning layer.

Use them when content types truly share an intermediate structure.

Do not create five layout levels because hierarchy looks sophisticated.

Checkpoint

Draw the nested render order for one page and label where content changes meaning at each layer.