Save sorting by tags with pagination

I have a page with a tag cloud and articles

Pagination is also connected to this page

the problem is that when you go to the second page by pagination, the tags stop working

how can this problem be solved? So that a tag filter would work on any pagination page

You are more likely to receive an accurate and timely response if you post a link to the public repository for your project.


Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

1 Like

here is my code for the page

{{ define "main" }}
{{ $paginator := .Paginate (where .Pages "IsPage" true) 5 }}
<div class="responsive-margins xl:pt-32 " x-data="{
  data: {},
  filterApplied: false,
  selectedStudy(id) {
    let selected = false;

    if (! {
      return false;
    }[id].forEach(category => {
      if (!![category].selected) {
        selected = true;

    return selected;
  selectedCategoryType(category) {
    if (! || ![category]) {
      return '';
  toggleCategory(category) {
    console.log(;[category].selected = ![category].selected;

    let isFiltered = false;      
    for (let c in {
      if ([c].selected) {
        isFiltered = true;

    this.filterApplied = isFiltered;
  clearAll() {
    this.filterApplied = false;
    for (let category in {[category].selected = false;
  x-init="data = (await (await fetch('./index.json')).json())">

    <p class="text-header-1-mobile xl:text-header-1 font-bold pt-24 pb-8">Newsroom 
        <span class="text-base-mobile xl:text-header-5 font-normal ml-4"><a class="underline" href="mailto:">Contact us for media enquiries</a>
    <div class="pb-20">
      <div class="flex flex-wrap gap-1 xl:gap-2 responsive-margins mb-5">
        <span class="mr-5 text-base cursor-pointer" :class="!filterApplied ? 'border-2 bg-dark text-white py-2 px-5 rounded-full' : 'border-2 py-2 px-5 rounded-full'" @click="clearAll()">All</span>
        {{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
          {{ with $.Site.GetPage (printf "/%s" $taxonomyname) }}
            {{ if eq $taxonomyname "categories" }}
              {{ range $key, $value := $taxonomy }}
                class="mr-5 cursor-pointer"
                :class="selectedCategoryType('{{.Page.Title}}') == true ? 'border-2 bg-dark text-white py-2 px-3 rounded-full' : 'border-2 py-2 px-3 rounded-full'" 
              {{ end }}
            {{ end }}
          {{ end }}
        {{ end }}
{{ range .Paginator.Pages }}
      <div class="xl:grid xl:grid-cols-2 gap-20 pb-40" x-show="!filterApplied || selectedStudy('{{ .File.UniqueID }}')">
          <a class="cursor-pointer" 
          href="{{ }}">  
            <img class="w-full h-auto" src="{{ .Params.preview | absURL }}" alt="">
          <a class="cursor-pointer" 
          href="{{ }}">  
            <div class="flex flex-col gap-4">
              <div class="green-bar hidden xl:block"></div>
              <h4 class="text-header-2-mobile xl:text-header-2 font-bold pt-8">{{ }}</h4>
              <p class="text-base-mobile xl:text-header-5">{{ .Params.description }}</p>
              <div class="text-base-mobile xl:text-blog-metadata pt-8 flex">
                <p class="xl:pt-0 pt-1.5">{{ }} | <span class="ml-1">{{- .Date.Format "Jan 2, 2006" -}}</span> </p>
    {{ end }}
        <div class="py-20">
      {{- partial "pagination.html" . -}}
{{ end }}

There is:
a website on the hugo collector, it has a page with articles (more than 30) and tags for articles
It is necessary:
to write js for pagination, with hidden subsequent pages, and not with the creation of separate pages when going to the next pagination point, I don’t understand how((
Why didn’t I do it on my native hugo pagination:
because native pagination creates its own url for each subsequent page (like …/news-room/in-the-media/page/2/ …/news-room/in-the-media/page/3/) and this breaks the filters

If I understand correctly, the tags are not visible on pagers 2 through N. But you are generating pagers 2 through N with JS.

If true, this is a JS problem, not a Hugo problem.

1 Like

no, at this stage, native pagination from hugo is connected

yes, the problem is that the tag filter does not work on pages 2 through N, since there is already another page link, so I assume that you need to connect some additional code to js to make pagination not native, but with a hidden part so that the tag filters can work correctly

if it is possible to make sure that the tag filters on all pages work correctly on the native hugo pagination, it would be much better

I tried to add all the pages necessary for the test

This site doesn’t build.

1 Like

what else should I add to the repository so that you can recreate the problem and try to help me?

Make it functional. I should be able to do this:

git clone --recurse-submodules
cd hugo/
hugo server

Test doing it yourself.

1 Like

updated the repository, you could have a look

When I try to build your site I get:

Start building sites … 
hugo v0.111.0-DEV-9af78d11003ed22b6281e47e1ac19568cf1cca81+extended linux/amd64 BuildDate=2023-02-08T09:22:20Z
Error: Error building site: render of "404" failed: "/home/jmooring/temp/hugo/themes/tw-theme/layouts/_default/baseof.html:3:6": execute of template failed: template: 404.html:3:6: executing "404.html" at <partial "head.html" .>: error calling partial: partial "head.html" not found
Total in 15 ms