Baseof.html, block templates and list-types results in empty pages

So I think I’m going nuts over here. I’m new to Hugo and I’m trying to create a theme for my website. Since I like the DRY principle I’m trying to use block templates and this is where I start going insane…

At the moment my theme has an index.html that pulls in a few partial templates but it is otherwise static. This page works and has always worked. Then I try to create stuff for the subpages…

My content structure:

content
|-member
|--_index.md
|-about
|--_index.md
|--style.md
|-contact.md

The layouts folder in my theme looks like this:

layouts
|-_default
|--baseof.html
|--list.html
|--single.html

My baseof.html looks like this (copy-pasted from the Hugo docs):

<!DOCTYPE html>
  <html>
   <head>
     <meta charset="utf-8">
     <title>{{ block "title" . }}
       <!-- Blocks may include default content. -->
       {{ .Site.Title }}
     {{ end }}</title>
  </head>
  <body>
    <!-- Code that all your templates share, like a header -->
    {{ block "main" . }}
      <!-- The part of the page that begins to differ between templates -->
    {{ end }}

    <!-- More shared code, perhaps a footer -->
  </body>
</html>

My list.html looks like this:

<!-- Note the lack of Go's context "dot" when defining blocks -->
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Data.Pages }}
  <h2>{{ .Title }}</h2>
    <article>
      {{ .Content }}
    </article>
  {{ end }}
{{ end }}

And finally single.html looks like this:

{{ define "title" }}
  {{ .Title }} &ndash; {{ .Site.Title }}
{{ end }}
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
{{ end }}

The result from this is that Hugo renders contact.md and about\style.md to working pages. about\_index.md and member\_index.md are just blank pages with no content in them at all. If I remove the block definitions in list.html it will render the contents (obviously without any styling), but it doesn’t seem to show the actual contents of_index.md as I would expect. (I can’t for example just have {{ .Content }} and remove the iteration over .Data.Pages then the pages becomes almost empty again (it only shows .Title but not even the correct one at that).

Can anyone help shed any light on what’s wrong or what I am doing wrong or any hints at alla.

I am using Windows 10 Pro x64 with latest stable Hugo (as far as I know):

Hugo Static Site Generator v0.18.1 BuildDate: 2016-12-30T10:03:28+01:00
1 Like

Just to make sure, when you say “empty,” you still have front matter in these files, right? Can you point me to source?

It’s not in a public repo by default so I added the relevant files (I think, tell me if you’re missing anything although the rest should be “default” Hugo): https://github.com/stefannitsche/hugofirst

And yes, all files I’m trying to render have front matter. And when I say empty I mean empty. Not even the baseof.html-file is rendered it’s just a blank white page.

Forgot, I translated the content names in my first post so here’s the quick mapping

member = medlem
about = om
style = stil
contact = kontakta

On first pass, are you running Hugo server with the --buildDrafts flag? I ask because it seems like almost all your content has draft status according to the front matter…

Fair question. :slight_smile: Yes I belive I am. This is the command I’m using to start the Hugo server:

hugo server --theme firsttheme -D --verbose

EDIT:

Yes you are correct that all of them are marked as drafts. Since I’ve always run with the Hugo server with the -D flag I didn’t care about changing it while developing. But shouldn’t that also ave affected the pages that currently works?

So… I’m not making any headway with this at all. Right now it feels like I’m misunderstood how to use the block templates profoundly or there’s something fishy going on with Hugo. So what have I done? I’ve created a new website, created a new theme and then pasted the examples from the Hugo docs. But I still can’t get it to work. My content looks like this:

content
|-medlem
|--_index.md
|-om
|--om.md
|--stil.md
|-kontakta.md

Have I misunderstood what Hugo does or shouldn’t that structure generate the following URLs

/medlem/
/om/
/om/om/
/om/stil/
/kontakta/

The URLs that are somewhat special would be the medlem-URL as it should contain the contents from medlem/_index.md. And also om-URL since it should contain and autogenerated list-view of all the contents within the om-section. Have I understood that part correctly?

I’ve also updated the Github repo to contain my entire new test site: https://github.com/stefannitsche/hugofirst Does that site work for anyone else? Or is the list-view URLs wonky even for other people?

1 Like

I have tested your site, and it looks like the main issue is that you’re having content outside of the define sections, i.e.

<!-- Note the lack of Go's context "dot" when defining blocks -->

Which mysteriously renders. blank pages without any errors. Remove those and you’ll be happier.

We should do something about that (document it and maybe report it to the Go team).

3 Likes

I am new to Hugo and static sites and encountered a couple of problems usually due to misunderstandings and after some research I could fix it myself. However I am struggling with an issue seemingly related to this.

I want to customize a specific taxonomy terms page with layouts/taxonomy/country.terms.html. I also have a general layouts/_default/terms.html.

/countries/ renders the general terms.html based site fine, if I temporarily change the filename of country.terms.html to e.g. test.terms.html. However as long as I have country.terms.html I just get an empty page.

And it’s related to this code:

{{ define "title"}} {{ .Title}} {{end}}
{{ define "header"}}
  {{ partial "header" . }} 
{{end}}
{{ define "main" }}
  custom-html-content-here
{{ end }}
{{ define "footer"}}
 {{ partial "footer" . }}
{{end}}

This code works everywhere else including terms.html. I also don’t get an empty page, if I change country.terms.html to e.g.

{{ define "title"}} {{ .Title}} {{end}}
{{ define "header"}}
  {{ partial "header" . }} 
{{end}}
{{ define "main" }}
  custom-html-content-here
{{ end }}
<div>Test 123</div>
{{ define "footer"}}
 {{ partial "footer" . }}
{{end}}

I will see the Test 123. Rendering partials also works, when outside the {{ define }} context. So I can create a barebone custom country terms html with the partials without defines, but then the baseof.htmlfrom the theme is missing.

I read in the documentation about templates, partials, block, themes and so on, but I could not find a solution so far. Any ideas what I do wrong?

Thank you.

Are all of the above blocks from above defined as block in your baseof.html?

Yes. I am using the Kube theme and the baseof.html can be found on GitHub here. My only modification is one additional css link. The other files like terms.html also have these define’s and block’s and it renders without an issue.

You can have a look at my GitHub repository, if you want. I want to keep the source private until I launch this blog.

I had a similar problem with:

{{ block "main" . }}
<!-- get all the things from the content files -->
{{ end }}

Once I removed:

<!-- get all the things from the content files -->

My section pages and list displayed properly.

Glad this support thread existed! Saved me a bunch of time.

1 Like

Just wanted to add that UTF-8 with BOM also messes things up, at least it did for me in VSCode. since the invisible character would break the block templates:

+<U+FEFF>{{define "main"}}

In VSCode just click “UTF-8 with BOM” at the bottom right, then select “save with encoding” and then “UTF-8”

Finally!!! Thank you! After hours of trying and searching… it was such a small thing

I spent so much time and many gray hairs / grinding of teeth to figure this one out. Once I removed all the <!--html comments--> from my baseof AND template files, this has been solved.

Does anybody know how this can be remedied, as I find it sorely vexing to not include comments in even the most basic of my markup? Seeing as others will have to work with the markup as well…

1 Like

Does anybody know how this can be remedied, as I find it sorely vexing to not include comments in even the most basic of my markup? Seeing as others will have to work with the markup as well…

If you simply want others to keep the comments in the template files, and not for them to show up in the final rendered HTML output, how about changing:

    <!-- get all the things from the content files -->

to:

    {{/* get all the things from the content files */}}

?

3 Likes

If you simply want others to keep the comments in the template files, and not for them to show up in the final rendered HTML output, how about changing:

<!-- get all the things from the content files -->

to:

{{/* get all the things from the content files */}}

?

Thank you! That makes a ton of sense :relaxed: I’ll do that.

1 Like

1st:
If you use the {{ block … } syntax in baseof.html the template must have the {{ define … }} statement in the first line with the same block name. If this is missing, nothing comes out. I had a comment in the first line :frowning:

2nd:
I use the following line in the templates
{{ "<!-- layouts/_default/single.html -->" | safeHTML }}
to generate html comments in output files. So I can check if the right templates are rendered.

Using hugo --minify removes all comment from the output files - recommended for production.

2 Likes

You can start with blank lines. Note that this is a limitation of Go’s template handling. I have had a lengthy discussion earlier today about their handling of BOM.

1 Like

Thank You! This thread solved the problem I was having while going through the book " Build Websites with Hugo: Fast Web Development with Markdown".

Many of the template files had comments in the first several lines like this:

<!--
! Excerpted from "Build Websites with Hugo",
! published by The Pragmatic Bookshelf.
! Copyrights apply to this code. It may not be used to create training material,
! courses, books, articles, and the like. Contact us if you are in doubt.
! We make no guarantees that this code is fit for any purpose.
! Visit http://www.pragmaticprogrammer.com/titles/bhhugo for more book information.
-->
{{ define "main" }}

  {{ .Content }}

{{ end }}

After hours of comparing the example theme code in the printed book to what was provided in the code download and not finding any errors I somehow found this thread and saw someone posting about removing a comment fixed their problem (blank white pages as output).

The specific file(s) that had the comment problem were:
\Hugo\portfolio\themes\basic\layouts\index.html
\Hugo\portfolio\themes\basic\layouts\single.html

I am still going through the book tutorial, but am guessing there might be an issue with any layout html file having comments, such as the list.html layout. I tried putting the comment block at the end and it also broke the output. I’m using Hugo v0.73.0 and my text editor is Notepad++.