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


#1

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

#2

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


#3

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


#4

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…


#5

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?


#6

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?


#7

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).


#8

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.


#9

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


#10

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.


#11

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.