Taxonomy term page using custom template?

I’m sorry if this seems like a stupid question, but I’m going to ask it anyway:

Per this previous post of mine, I have all of my templates in the layouts/_default folder, with all of the contents’ frontmatter referencing these. They all mostly work, but I’m having trouble creating a template to list all posts with a term in the taxonomy category.

So far, here is my code for blog-category-term.html, which is supposed to list all posts in the selected category term:

{{ define "main" }}
<h1 id="gallery-header">{{ .Title }}</h1>
{{ range .Site.Taxonomies.categories.Pages }}
<article>
	{{- partial "metadata-blog-category.html" . -}}
</article>
{{ end }}
{{ end }}

(Note: metadata-blog-category.html simply parses the frontmatter in each post)

How should I change this? If you haven’t already guessed, I’m new to Hugo and trying to wrap my head around its paradigm.

Thank you so much!

Have you created the file term.html and taxonomy.html in the layouts/_default folder ?

The term.html file will be went you are on a term page, you can fill this file to display all the pages that use this term like this:

<ul>
    {{ range .Pages }}
        <li>
            <a href="{{ .Permalink }}">{{ .Title }}</a>
        </li>
    {{ end }}
</ul>

The taxonomy.html file is used when you display a taxonomy, you can display the terms or the terms + the pages linked to this term.

Now if you want to display a taxonomy or a term list of pages via a partial it’s also possible, there is lot of examples in Taxonomy Templates | Hugo
This one is the closest to your example : Taxonomy Template : List All Site Tags

Personally I do:

{{- $taxonomy := "NAME_OF_THE_TAXONOMY" -}}
{{- range $termName, $termObj := index .Site.Taxonomies $taxonomy -}}
    {{- if (eq $termObj.Page $currentPage) -}}
        <span class="tag" rel="tag">{{- $termObj.Page.Title -}}</span>
    {{- else -}}
        <a href="{{- $termObj.Page.Permalink -}}" class="tag" rel="tag">{{- $termObj.Page.Title -}}</a>
    {{- end -}}
{{- end -}}

True, but what I’m saying is I don’t want to use the files terms.html or taxonomy.html, I want to use my own custom templates with a unique filename (this is so every section of the site can have its own term display), and I’m wondering how I could do this.

The second part of my answer is still relevant

Ah, okay.

However, I’ve already tried these templates (including yours) and they either don’t list anything or list all posts in all categories. I need it to list all posts in a specific term (which shouldn’t be hardcoded)

Here’s my new code:

{{ define "main" }}
<h1 id="gallery-header">{{ .Title }}</h1>
{{ range $key, $value := .Site.Taxonomies.categories }}
{{ range $value.Pages }}
<article>
	{{- partial "metadata-blog-category.html" . -}}
</article>
{{ end }}
{{ end }}
{{ end }}

I know that this displays all terms because it’s ranging over all of the terms, but I don’t know how to make it display the posts for one term.

According to this page section List Content with the Same Taxonomy Term you simply need to do:

<ul>
    {{ range (index .Site.Taxonomies.categories "NAME_OF_THE_TERM") }}
        <li><a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a></li>
    {{ end }}
</ul>

Cool! But, how do I replace NAME_OF_THE_TERM with the term that’s supposed to be provided when I load the page after selecting the term in the taxonomy list page?

If you are in a term page , this means that {{- if eq .Kind "term" -}} is true so you can simply range over the variable .Pages like this example:

{{- range .Pages -}}
<a href="{{- .Permalink -}}">
    {{- $title := .Title -}}
    {{- with .Resources.GetMatch "*_cover.*" -}}
    <img src="{{- (.Crop "362x170").Permalink -}}" alt="{{- $title -}}">
    {{- end -}}
    <span class="title">{{- .Title }}</span>
</a>
{{- end -}}

Interesting, I tried this before and it doesn’t work; it just displays nothing.

Actually, I should clarify: example.com/categories/cat/ does work, but example.com/blog/categories/cat doesn’t; the latter is what I want to use.

First, to debug, in your template you need to check:

{{ .Kind }} - {{ .Section }}

Normally if you are in a proper term page the result should be:

term - categories

Then, you need to ensure in the html template that you don’t change the context (the dot .), the context can be changed if you are in a {{ with ... or in a {{ range ...

Last, according to your last message you need to have in your website config.toml:

[permalinks]
  categories = 'blog/categories/:slug/'

And right away we have a problem, as adding this to the templates and loading example.com/blog/categories gives “section - blog”, while loading example.com/blog/categories/cat gives “page - blog”

Also, in my config, I have category = 'blog/categories/:slug/, as per my solution to this other problem I had. Changing “category” to “categories” does make it work, but at the same time the term pages fail to pull metadata from the _index.html files I have set up for them (these simply specify the header text and the aside text).

For reference, here is my general directory structure:

content/
    blog/
       _index.md
       posts/
           _index.md
           test.md
           test-2.md
       categories/
           _index.md
           cat1/
               _index.md
           cat2/
               _index.md
layouts/
     _default/
          blog-list.html
          blog-post.html
          blog-terms.html
          blog-term.html
     partials/
          [partials go here]

I think the issue is in your directory structure.

I think you need to move the categories/ folder directly inside content/ not as a child of blog/, no need to do other modification.

Then your cat1/_index.md need to use the layout blog-term.html, last in blog-term.html you will be able to do:

{{- range .Pages -}}
<a href="{{- .Permalink -}}">
    {{- $title := .Title -}}
    {{- with .Resources.GetMatch "*_cover.*" -}}
    <img src="{{- (.Crop "362x170").Permalink -}}" alt="{{- $title -}}">
    {{- end -}}
    <span class="title">{{- .Title }}</span>
</a>
{{- end -}}



And of course you also need the config modif:

[permalinks]
  categories = 'blog/categories/:slug/'

Awesome! This makes everything almost work perfectly, except example.com/blog/categories/ does not render anything, not even the baseof.html in my theme, while example.com/categories/ does deliver the page I’m looking for.

Luckily, I was able to fix it by adding these to /content/categories/_index.md’s frontmatter:

url: "/blog/categories/"
aliases: ["/categories/"]

Thank you so much for your patience!

Yes, you find the right solution using aliases, I do the exact same.

And the blank page is a bug (don’t know if it was ever reported), to reproduce it:

  1. (optional) Create a new taxonomy in your config file:
taxonomies:
  test: tests
  1. Set a new permalink for that taxonomy (still in your config):
permalinks:
  tests: /testing/:slug
  1. Now add a new post and in the front matter of this post add:
tests: [duck]

Now, we can access the term page of duck with:

https://example.com/testing/duck

But there is issues

The taxonomy page testing and tests:

https://example.com/testing/
https://example.com/tests/

They are both existing and both return a blank page, even the layout baseof.html is ignored, it’s not a 404 error, a true blank html page.

Even stranger, if we create a layout taxonomy.html it will be used to render the two taxonomy pages but without the baseof.html. Only the taxonomy.html will be used.

@jmooring did you already encounter the issue I described.

Please create a new topic.

lol, thanks Joe.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.