Unit Build: Portfolio Template Architecture

Unit 3 ends with a portfolio that has reusable structure, not merely more files.

Required architecture

At minimum, your project should now include:

_layouts/
  default.html
_includes/
  navigation.html
index.*
about.*

Use additional layouts/includes only when they have a clear responsibility.

Required behavior

Your site should demonstrate:

• at least two pages sharing one layout;
• page-specific front matter flowing into the layout;
• {{ content }} composition;
• at least one reusable include;
• shared navigation;
• a current-page indicator or equivalent state if appropriate;
• one parameterized include or a documented reason the site does not need one yet.

Refactor evidence

Show before/after structure:

BEFORE
page A = shell + content
page B = shell + content

AFTER
layout = shared shell
page A = metadata + content
page B = metadata + content

Change-propagation test

Make one safe change in shared source, such as adding a footer sentence or navigation item.

Predict which generated pages should change.

Build.

Verify.

Failure test

Create one bounded layout/include error and diagnose it from scope:

• all pages;
• one page;
• one layout family.

Repair and verify.

Unit defense

Explain:

1. Why is a layout different from an include?
2. What does {{ content }} represent?
3. How can page front matter affect a shared layout?
4. What is a good reason to nest layouts?
5. What is a good reason not to create an include?
6. How does failure scope help locate a broken shared template?

Move on when

Another student can open your source tree and explain which file owns:

• document shell;
• navigation;
• page body;
• page metadata.

Unit 4 will separate larger content datasets and content types from these templates.