How to manage previous/next links in tag associated pages?

1

Hi,

I’m building a simple gallery with Hugo.
This gallery is composed of several sections, each one contains a bunch of
pages. I’ve added previous/next links on each page to navigate across sections.

I use Hugo’s taxonomies to group pages associated to a given tag together.
Each tag has its own page where I’ve put links to all pages associated to that tag.

So, when someone browse a tag page and go to an associated page, he arrives on
a page where the previous/next links are not necessary associated to that tag.

I would like to build my site so that the previous/next links on a page
linked in a tag page point to previous/next pages associated to that tag.

There may be multiple ways to do it :

  • create different static pages for all tags

  • create dynamic links in pages so that these links change according to the
    tag or section which is being browsed.

Do somebody has a clue to do this with Hugo ?

Regards,

Elby

2

checkout my sample

look under themes/photon/layouts/tags

in config

[taxonomies]
    tag                    = "tags"
[permalinks]
    tags                   = "/tags/:slug"

modify it as you like it

3

Thanks for your help.

I’ve encountered some issues trying to build your example site:

$ hugo   -b http://localhost:1313 --verboseLog  
Building sites … ERROR 2020/04/19 11:12:44 render of "page" failed:
execute of template failed: template: photo/single.html:4:3:
executing "photo/single.html" at <partial "meta" .>:
error calling partial:
execute of template failed: template: partials/meta.html:51:3:
executing "partials/meta.html" at <partial "css/css" .>:
error calling partial:
"/home/loic/Documents/Projets/HugoSample/themes/photon/layouts/partials/css/css.html:2:6":
execute of template failed:
template: partials/css/css.html:2:3: executing "partials/css/css.html" at <partial "css/tachyons">:
error calling partial: "/home/loic/Documents/Projets/HugoSample/themes/photon/layouts/partials/css/tachyons.html:2:6":
execute of template failed: template: partials/css/tachyons.html:2:6: executing "partials/css/tachyons.html" at <hugo>:
can't evaluate field IsProduction in type interface {}

Maybe I use a too old version of Hugo ?

$ hugo version
Hugo Static Site Generator v0.65.3-211BA42A linux/amd64 BuildDate: 2020-02-23T09:59:37Z

So I’ve tried to setup my config.toml file according to your post, but I’m not sure to understand how it works.
It doesn’t change the number of static files generated by Hugo: I had already tags pages with an URL like “/tags/:slug”.

But on theses pages, I used links to simple post ("/section/:slug").
On these pages there are links too previous and next post in the section.
So when you use these links, you may go to a pagfe associated to another tag.

I would like to navigate accross tag related pages.
Is it possible to generate multiple HTML pages from a single file.md ?

In that case I could try to define multiple permalink like:

"/:section/:slug"	    <- basic page with previous/next links associated to sections
"/tags/:term/:slug"    <- page associated to the tag term with previous/next links associated to tag

I didn’t see :term in https://gohugo.io/content-management/urls/#permalink-configuration-values

I’ve tried to define multiple permalinks:

[taxonomies]
tag  = "tags"

[permalinks]
posts =["/:section/:slug", "/tags/:term/:slug"]
tags  = "/tags/:slug"

That doesn’t seems to work either.

4

my sample is on version 0.69 and uses hugo.isProduction, you can delete it in meta.html and in css.html too. Take the path from above.

Ok, do you have an repository to look at?

5

You can have a look at https://github.com/Elby64/HugoTest.

You can build and serve this site with the following command :

hugo -w server --bind 192.168.1.23 --baseURL "http://192.168.1.23:1313" --disableFastRender

Then, you can see two links on the page http://192.168.1.23:1313/films/o_brother/ :

  • Previous => Blue Brothers 200
  • Next => Tomorrowland

This page belongs also to the tag page associated to George Clooney :
http://192.168.1.23:1313/tags/george-clooney/

I would like to link another page here where the links Previous and Next would
be coherent with the list given on the tag page :

  • No Previous link
  • Next => Urgences
6

i miss the permalinks in the config, something like this

[permalinks]
tags = “/tags/:slug”
post = “/:section/:year/:month/:day/:title”

the pagination comes from posts/list.html and extra/pagination.html

create a /layout/tags directory and

create templates

terms.html.html for the all-tags page
list.html.html to list all pages for this tag, include pagination

compare to my sample site here https://github.com/gj52/HugoSample

7

The layouts for tags and terms was provided by the theme grid-side.
I added them explicitly in the layouts/tags/ directory.

I’ve also modified the config file and added a section permalinks:

[permalinks]
    tags = "/tags/:slug"
    post = "/:section/:year/:month/:day/:title"

But I didn’t see any changes:

  • the number of pages generated by Hugo is still the same,
  • the permalinks section doesn’t seems to have been taken into account:
    paths to posts still follow the pattern “/:section/:slug”.

I’ve updated https://github.com/Elby64/HugoTest with these modifications.

8

I think you list.html.html is wrong (line 29)
try

	{{ $paginator := .Paginate .Data.Pages }} 
	{{ range $paginator.Pages -}}
                <div class="flex-item">
                    {{ partial "post/page-item.html" . }}
                </div>
	{{- end }}
9

I don’t see any changes with that modification:

  • the number of pages generated with Hugo is still the same,
  • the path to posts is still the same

I guess I will have to write some JavaScript to update previous/next links manually.