How do you use baseof.html correctly?

support
2

structure

layouts//
└── _default/
    ├── baseof.html
    ├── list.html
    └── single.html

layouts/_default/baseof.html

<!DOCTYPE html>
<html lang="{{ or .Site.LanguageCode .Site.Language.Lang }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0">
  <title>{{ with .Title }}{{ printf "%s | " . }}{{ end }}{{ site.Title }}</title>
</head>
<body>
{{ block "main" . }}

{{ end }}
</body>
</html>

layouts/_default/list.html

{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  {{ end }}
{{ end }}

layouts/_default/single.html

{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
{{ end }}

https://gohugo.io/templates/base/