Give it a frame

The template puts the site’s name, the page’s title and a stylesheet round each page’s content, and the About page becomes a page like any other on the web.

The template

In templates/page.html:

<!doctype html>
<html lang="{{ page.language }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ headline(page) }} - {{ site.title }}</title>
  {{ css("site.css") }}
</head>
<body>
  <header>
    <a href="{{ url("/") }}">{{ site.title }}</a>
  </header>
  <main>
    <h1>{{ headline(page) }}</h1>
    {{ page.content }}
  </main>
</body>
</html>

A template is HTML, and each {{ ... }} shows a value for the page being built:

• page.language is the site’s language, en-GB.
• headline(page) is the page’s name: its title, About.
• site.title is the title in statac.yaml, Hill Notes.
• css("site.css") links the stylesheet in assets/, which you add next.
• url("/") is the URL of the home page.
• page.content is the page’s content, which Statac builds from its Markdown into HTML.

Statac builds every page with templates/page.html unless you give it another: see which template builds a page.

The stylesheet

Copy the stylesheet from the drop-ins into assets/site.css. It sets a readable font and line length, and follows the reader’s choice of light or dark.

See it

When you save both files, statac serve builds the site again:

`assets/site.css` and `templates/page.html` changed. Built 1 of 1 file in 0.00 seconds. Told the browser to reload.

warning  Broken link: nothing is published at `/`
  templates/page.html, line 11
  11 │     <a href="{{ url("/") }}">{{ site.title }}</a>
     │              ^^^^^^^^^^^^^^
  While building: content/about.md
  More: https://statac.dev/e/broken-link/

Gone since the last build: 1 built-without-template.

The About page now has the site’s name at the top, its title as a heading, and the stylesheet’s font and width. The note from part 2 has gone.

The warning is about the link to the home page, which the site doesn’t have yet. You add it in the next part, and the warning goes.

Open the debug panel and choose its Names tab. It lists every name a template can use on this page, with its value here and the file and line the value comes from: page.title is About, from line 2 of content/about.md.

Next

In part 4, you add the walks, a page listing them, and the home page.