Page Variables Inside Layouts

A layout is reusable because it can combine shared markup with page-specific data.

One layout, different titles

Home:

---
layout: default
title: Home
---

About:

---
layout: default
title: About Me
---

Layout:

<title>{{ page.title }}</title>

Same template.

Different generated titles.

The page data travels into the layout

This is important:

PAGE FRONT MATTER
      ↓ available as page.*
LAYOUT
      ↓ renders values
GENERATED OUTPUT

A layout is not disconnected from the page it wraps.

Add page descriptions

Create:

description: A portfolio of projects and technical learning.

Then in the layout:

<meta name="description" content="{{ page.description }}">

What happens on a page without description?

Test it.

Then choose a deliberate fallback strategy.

For example, later you might use site-wide data or a Liquid default filter.

Do not make the layout know everything

A layout should not contain hard-coded content for every individual page.

If your default layout contains twenty if page.title == ... branches, you may have pushed page responsibility into the wrong layer.

Portfolio action

Make your shared layout use at least:

• page.title;
• one additional page-level value.

Build at least two pages with different values.

Checkpoint

Prove that one layout generated two different outputs from two different page-data inputs.