# Templates

Tera templates have been the browser layout since version 0.9.0. Put them in `templates/`. A page names one with `template`. The default page template is `page.html`. The default section template is `section.html`. Names such as `page.tera.html` are used as written.

Extend a base layout and fill `content`. The base context includes `site_title`, `base_url`, `url_path`, `nav`, `page_title`, `section_title`, `section_url`, and `content`. `[[nav]]` entries are `label` and `url`:

```toml
[[nav]]
label = "Install"
url = "/install/"
```

`[globals]` injects arbitrary values into every Tera render and into notification emails, for example `{{ globals.site_name }}`. Overlay a key per environment with `BENSON_GLOBALS__KEY` (the key is lowercased).

Since version 0.15.0 a page that contains a Mermaid diagram sets `has_mermaid`. Load the engine script only then:

```html
{% if has_mermaid %}
<script src="/js/mermaid.min.js"></script>
<script>
  mermaid.initialize({
    startOnLoad: true,
    securityLevel: "strict",
    themeVariables: { fontFamily: "inherit" }
  });
</script>
{% endif %}
```

`benson init` writes that hook. An existing `base.html` needs it added by hand. The [0.15.0 site impact](/changelog/) says so. Until the hook is present, the diagram source stays visible as text.