This page permanently redirects to gemini://gmi.bacardi55.io/blog/2024/03/05/improving-hugo-listing-and-taxonomy-term-pages/.

Improving listing and taxonomy term pages with hugo

Posted on 2024-03-05

Introduction

A short post today about yet another improvement to this blog. This time, to the listing pages (eg: [blog posts list] or [bookmarks list]). At the end of last month, in my [last February theme update], I tried to improve those pages already but I was not completely satisfied.

A bit of additional rework and tweaks within my [Hugo theme] and a few try later, I think I finally managed to have something better and more readable! So this should stay as it is now for a while.

=> blog posts list | bookmarks list | last February theme update | Hugo theme

The changes

Listing Page

The old page looked like this:

And the new version:

Now years and months are displayed, which means I could removed them from the post line and only leave the day, leaving more space for the title to avoid going back to the next line. I find it easier to browse quickly and cleaner without the `' and weird spaces between lines.

Taxonomy Term Page

The old taxonomy term page looked like this (eg with the `selfhosting' tag):

And the new version:

Here, instead of grouping per year and month, I group them by type ([posts (blog)], [bookmarks], [gemlog]). This allowed me to remove the post type on each line and make it, again, easier on the eyes and simpler to browse.

=> posts (blog) | bookmarks | gemlog

The How

I'm not sure I did it the best "hugo way", but at least it is working as I want…

Listing Page

A summarized version bellow, but you can find the [full file on sourcehut].

{{ $listtitle := .Title }}
{{ $pageKind := .Kind }}
{{ if or .Title .Content }}
    …
{{ end }}


    {{ $yearCptr := "" }}
    {{ $monthCptr := "" }}
    {{ range .Paginator.Pages }}
        {{ $postYear := .Date.Year }}
        {{ $postMonth := .Date.Month }}

        {{ if or (ne $monthCptr $postMonth) (and (eq $yearCptr "") (eq $monthCptr "")) }}
                {{ $yearCptr = $postYear }}
                {{ $monthCptr = $postMonth }}
            {{ if and (ne $yearCptr "") (ne $monthCptr "") }}
        
    
            {{ end  }}
    

        
{{ $monthCptr }} {{ $yearCptr }}
        

      {{ end }}

      

          
          

            {{ .Date.Format "02" }}
            {{ if eq $pageKind "term" }}[{{ .Type }}] {{ end }}
            
              {{.Title }}
            
          
        

      {{ $yearCptr = $postYear }}
      {{ $monthCptr = $postMonth }}
    {{ end }}
    
  


{{ partial "pagination.html" . }}

It is a bit ugly with the if in the middle to close / open =div=s and =ul=s tags, but I couldn't find a cleaner solution.

=> full file on sourcehut

Taxonomy Term Page

This looks very similar to the listing pages changes (see [full file on sourcehut])

    …
    {{- if eq .Kind "taxonomy" -}}
        

            {{ range .Pages.ByTitle }}
            
{{ .Title }}
            {{ end }}
        
    {{ end }}
    {{- if eq .Kind "term" -}}
        {{ $currentType := "" }}
        {{ range sort .Pages.ByDate.Reverse ".Type" "desc" }}
            {{ if or (eq $currentType "") (ne $currentType .Type) }}
                {{ if ne $currentType "" }}
                
            
                {{ end }}
            

                
{{ strings.FirstUpper .Type }}
                

            {{ end }}
                    

                        {{ .Date.Format "2006-01-02" }}
                        {{ .Title }}
                    
            {{ $currentType = .Type }}
        {{ end }}
                
            
    {{- end -}}

Main thing here is checking if the .Kind' of the page is taxonomy' (page listing terms) or `term' (page listing content tagged with the term of the page).

For taxonomy' type of page, a simple list of tags, but for term' pages, then same kind of manipulation as the listing page to create different lists per type of article. In alphabetical order, my content types are bookmarks', gemlog' and posts', which is the exact opposite order I want them to be… So I used .Reverse' to display posts in the order I wanted.

=> full file on sourcehut

Conclusion

This conclude this very short posts, a continuation of the long list of smaller improvement made to this blog for the past 2 months… And I'm sure not the last one!

=> /gemlog/

=> Send me a gemini mention | send me an email!