How can I make a button to change the Pagination sorting?

support
1

I would like to make a button that when clicked the sorting of the Pagination changes (ByDate/ByDate.Reverse).

Cannot work with dynamic things such as fetching the true URL of the browser and then deciding what to do, but Im thinking about doing two different taxonomy.html, and allowing the user to select one or another by going to the link /taxonomy/asc or /taxonomy/desc.

Is this possible? Any tips on what should I do/read?

2

As you know Hugo is a Static Site Generator.

One option would be to generate the sorted by date pages etc on specific paginated lists and reference their links from those buttons.

Another option is to use a JS library and do the sorting on the front-end, perhaps with something like Desandro’s Isotope and similar plugins.

3

Thanks Alexandros,

How can I do the first option?

4

You can use a custom output format.

First create the custom output format

# config.yaml
outputFormats:
  reversed:
    baseName: reversed
    mediaType: text/html

Then create a template for this output format. I guess very similar to your list template only with the pages order reversed. For Hugo to pick it up you must name it: layouts/_default/list.reversed.html
(_default, if it’s not attached to a content type in particular)

Finally make sure the output format is assigned to the page by using either one of the documented methods

Now you have .RelPermalink for your normal list page, and from the template you can retrieve its “reversed variation” with (.OutputFormats.Get "reversed").RelPermalink

2 Likes