Taxonomy term page using custom template?

[Minilab]

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!

[BenSouchet]

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 -}}

[Minilab]

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.

[BenSouchet]

The second part of my answer is still relevant

[Minilab]

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.

[BenSouchet]

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>

[Minilab]

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?

[BenSouchet]

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 -}}

[Minilab]

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

[Minilab]

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.

[BenSouchet]

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/'

[Minilab]

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

[Minilab]

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]

[BenSouchet]

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/'

[Minilab]

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!

[BenSouchet]

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

2. Set a new permalink for that taxonomy (still in your config):

permalinks:
  tests: /testing/:slug

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

[jmooring]

Please create a new topic.

[BenSouchet]

lol, thanks Joe.