Problem with page displaying a given tag

support
1

I started using Hugo ver 0.80. I used Jekyll earlier. I use custom CSS but I doesn’t have implemented tags.

I followed a few tutorials try to set up tags.

The result is a white page that looks like that that, so the header, the footer as defined in baseof.html is not applied.

here is the link to my repository

Could someone point me what I am doing wrong?

My layouts/taxonomy/tag.html is

<!-- layouts/taxonomy/tag.html -->
<h1>Posts tagged "{{ .Title }}"</h1>
<ul>
  {{ range .Data.Pages }}
    <li>
      <a href="{{.RelPermalink}}">{{ .Title }}</a>
    </li>
  {{ end }}
</ul>

Tags

<!-- layouts/partial/tags.html -->
<ul>
    {{ range .Params.tags }}
      <li><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> </li>
    {{ end }}
  </ul>

<!-- layouts/_default/single.html-->

{{ partial "header.html" . }}
  <main>
    <article>
      <header>
        <h1>{{ .Title }}</h1>
        <time>{{ .Date.Format "02 Jan 2006" }}</time>
      </header>
      <section>
        {{ .Content }}
      </section>
      {{ partial "tags.html" . }}
    </article>
  </main>
{{ partial "footer.html" . }}
2

I’m not sure of the best way to describe this, so I’ll show you an example instead.

layouts/_default/baseof.html

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

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

layouts/_default/list.html

{{ define "main" }}
  {{ .Content }}
  {{ range .Site.RegularPages }}
    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
    <p>{{ .Summary }}</p>
    {{ if .Truncated }}
      <p><a href="{{ .RelPermalink }}">Continue reading...</a></p>
    {{ end }}
  {{ end }}
{{ end }}

layouts/_default/single.html

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

We don’t include any header or footer information in list.html or single.html, because baseof.html already includes those items. But list.html and single.html must be encapsulated within {{ define "main" }} and {{ end }} statements.

TO DO:

  1. Take what I’ve shown here and apply it to the other templates you created.

  2. Remove preserveTaxonomyNames = true from config.toml. First, you’ve placed it within an array instead of above all arrays. Second, that configuration option was removed in version 0.55.

  3. Make sure you have a list.html file. At a minimum you should always have:

    layouts/
└── _default
    ├── baseof.html
    ├── list.html
    └── single.html
1 Like
3

Thanks for reply and for explanation.

My baseof.html

<!DOCTYPE html>
<html lang="en">
{{ partial "head.html" . -}}
<body>
{{ partial "header.html" . -}}
<main>
{{- block "main" . }}{{- end -}}
</main>
{{ partial "footer.html" . -}}
</body>
</html>

The header and footer appear on tag page only when I explicitly put them into tags file

<!-- layouts/taxonomy/tag.html -->
{{ partial "head.html" . -}}
<body>
{{ partial "header.html" . -}}
<h1>Posts tagged "{{ .Title }}"</h1>
<ul>
  {{ range .Data.Pages }}
    <li>
      <a href="{{.RelPermalink}}">{{ .Title }}</a>
    </li>
  {{ end }}
</ul>

{{ partial "footer.html" . -}}
</body>

Shouldn’t it be inherited from baseof.html?

When instead of doing that I put everything in “main” , it results in a blank page

<!-- layouts/taxonomy/tag.html -->
{{ define "main" }}

<h1>Posts tagged "{{ .Title }}"</h1>
<ul>
  {{ range .Data.Pages }}
    <li>
      <a href="{{.RelPermalink}}">{{ .Title }}</a>
    </li>
    {{ end }}
</ul>
{{ end }}
4

did you write this <!-- layouts/taxonomy/tag.html --> inside your layout template layouts/taxonomy/tag.html ?

if yes, then please remove that. because,

Code that you put outside the block definitions can break your layout. This even includes HTML comments.

Read More on Hugo Base Templates Documentation

1 Like
5

Thanks for pointing me to this, I removed the comments,
Now I will be using
{{- /* <!-- My comment --> */ -}}

I still don’t understand why tag taxonomy doesn’t inherit headers, footer from baseof.html from _default

Does to have a connection with a lookup order?

@jmooring as far as I understood Hugo documentation about this, in case of blog posts I don’t need to have a ‘list.html’ in ‘_default’ when I have it in the ‘blog’ folder, and the list from ‘blog’ is looked upon in case of listing of blog post

If this is the case should I define similar templates for tags in the taxonomy folder?

6

This applies to all templates that you want based on baseof.html.

This tutoroal might be helpful:
https://youtu.be/QVOMCYitLEc

I’ve submitted a pull request to your repository. Hopefully this will get you on the right track:
https://github.com/danieltomasz/danieltomasz.github.io/pull/1

1 Like
7

Really thanks, I will try to study and more deeply understand that from basic principles, maybe during the weekend.