Best viewed on desktop Mobile Friendly tutorial coming soon!

Layouts

Both pages from last lesson repeat the html/head/body shell and the nav. marko-run’s answer is +layout.marko: a component that wraps every page at its level and below, receiving the nested page as — you know this one — input.content:

<!DOCTYPE html>
<html lang="en">
  <head><title>Acme</title></head>
  <body>
    <nav><a href="/">Home</a> <a href="/about">About</a></nav>
    <${input.content}/>
  </body>
</html>

Layouts nest: a +layout.marko in a subdirectory wraps inside the root one. And here’s the insight from marko-run’s own diagrams: the layouts and page are combined at build time into a single component — nesting costs nothing at runtime; it’s part four’s content mechanism, applied by the router.

The two pages on the right still carry their duplicated shells:

Create src/routes/+layout.marko with the shell above (the file is provided as a stub — fill in <${input.content}/> where the TODO sits).
Strip both pages down to just their unique content — the <h1> and paragraphs, no doctype, no body, no nav.
Both URLs now share one shell; edit the nav in the layout and both pages follow.

Your First Routes

Dynamic Routes

Files

Preparing Environment

Installing dependencies
Starting dev server