Making a hugo theme: `tule`

Webcraft
, ,
5

For tule the current baseof.html is:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{{ block "title" .}}{{- .Title -}}{{ end }}</title>
        <link href="{{ "css/style.css" | absURL }}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <main>
        {{- block "main" . -}}
            <header>
                <h1>{{- .Title -}}</h1>
            </header>
            {{ .Content }}
        {{ end }}
        </main>
    </body>
</html>

I like my elements to be lowercase, so I chose the one of 2048 doctypes that matched my preference. :slight_smile:

html has lang="en" set as I primarily build sites in English. I imagine a more robust theme uses multilingual features to set lang.

The head has those two meta elements that are important, and no more. Note: expand on these elements.

title is the first block I define, as it may change depending on the template. For instance, I may want to elaborate on the paginated pages. Honestly, it’s a bit overkill for tule me thinks.

The link passes the path to absURL, which was a tip I picked up on the forums.

The body and nested document structure is very simple: main element, sensible header, and .Content as default, and able to be overridden in other templates.

I should note here that other templates in fact only override the “main” block, but just copy the same code. For instance, layouts/_default/single.html:

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

Same for list.html at the moment. Not particular DRY, but I’ve found that the other templates won’t render unless they exist and define blocks. I take advantage of the baseof.html values being default, but for “main” I can safely remove it.

Another missing feature might be a footer. Here’s an interesting place to take advantage of baseof defaults, as I can create a sensible footer, with an easy way to hook into the templates for customizing.

Let’s make those changes and see how it looks.