Block template explanation

support
1

I have 0.18.1 installed.

I am trying to use block templates and I initially was trying to change from only partials to blocks but had troubles so now I am attempting to setup a site based on https://gohugo.io/templates/blocks/ for testing.

I ran hugo new site to get the shell.
I created layouts/_default/baseof.html, layouts/_default/single.html and layouts/_default/list.html with the content from the docs.

At that point I get an empty homepage.

If I create layouts/index.html with:

Index stuff

{{ define “main” }}

DEFINE MAIN!


{{ end }}

the homepage only contains: Index stuff

I must be missing something here, would someone be willing to expand on the details of using blocks? Also I am assuming index.html picks up baseof.html but I could be wrong.

Thank you!

2

Repo to point us to? Are you getting any errors in the console? Also, what is “Index stuff”? You may be having issues because you are putting things outside of your {{define "main"}} block. Try this partial (and only the following code) for layouts/index.html:

{{define "main"}}
<h1>Homepage layout is working.</h1>
{{end}}
3

Thanks for the reply, sorry I took so long to get back.

I must have been tired after the other troubles I had. If I make the index contain only the block content it works.

I’ll have to go back and move things around in the actual project I am doing. Its based on:

so there is a bit more going on, but perhaps I had something similar causing an issue in trying to convert to blocks. I am still new to hugo, but I am super excited about it.

4

Cool. This is the very definition of how it has to work. Think of a {{define}} code block the same as extends…that is, anything inside that block extends the base template. If you put anything outside of that block, what exactly would it be extending?

However, if you put content outside the block intentionally, remember that you can define multiple blocks. This comes in great for things like extra scripts for specific layouts, etc. So, for example, here is a sample baseof.html:

<!DOCTYPE html>
<html lang="en">
<head>
  {{partial "site-head.html" . }}
</head>
<body>
  {{ partial "site-header.html" . }}
    <main>
    <!--block #1; that is, your "main" page content...-->
    {{block "main" . }}
    {{end}}
    </main>
    {{ partial "site-footer.html" . }}
    {{ partial "site-scripts.html" . }}
    <!--block #2; in this example, for adding additional scripts based on page template...-->
    {{ block "addscripts" . }}
    {{ end }}
</body>
</html>

You can then “define” both main and addscripts in individual pages. You can set conditionals for additional scripts based on front matter, etc, etc. There is a ton of flexibility here…

5

I am trying to apply this technique to only load the JavaScript when a user stumbles into my Events section. If they are on the Blog there is no need for the extra scripts. The problem I am having (I think) is the lookup order.
Rather than add my “addscripts” block to my theme head, I tried adding it to the head partial in my layouts\partials but it’s not getting picked up or written.

Is the best option here to add it to the theme?

6

I need just a bit more info to help you with your issue. Would you mind pointing me to a repo to see your source?

7

Right now all this is in a private repo. I’ll set it up on a tst site and if I can reproduce the issue post it publicly. Thank You.

1 Like