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.
See https://discourse.gohugo.io/t/requesting-help/9132.
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 cloneon your repo, then runhugo serverin 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.
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 (!this.data.studies) {
return false;
}
this.data.studies[id].forEach(category => {
if (!! this.data.categories[category].selected) {
selected = true;
}
});
return selected;
},
selectedCategoryType(category) {
if (!this.data.categories || !this.data.categories[category]) {
return '';
}
return this.data.categories[category].selected;
},
toggleCategory(category) {
console.log(this.data);
this.data.categories[category].selected = !this.data.categories[category].selected;
let isFiltered = false;
for (let c in this.data.categories) {
if (this.data.categories[c].selected) {
isFiltered = true;
break;
}
}
this.filterApplied = isFiltered;
},
clearAll() {
this.filterApplied = false;
for (let category in this.data.categories) {
this.data.categories[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>
</span>
</p>
<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 }}
<div
class="mr-5 cursor-pointer"
@click="toggleCategory('{{.Page.Title}}')"
: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'"
>{{.Page.Title}}</div>
{{ end }}
{{ end }}
{{ end }}
{{ end }}
</div>
</div>
{{ range .Paginator.Pages }}
<div class="xl:grid xl:grid-cols-2 gap-20 pb-40" x-show="!filterApplied || selectedStudy('{{ .File.UniqueID }}')">
<div>
<a class="cursor-pointer"
href="{{ .Params.link }}">
<img class="w-full h-auto" src="{{ .Params.preview | absURL }}" alt="">
</a>
</div>
<div>
<a class="cursor-pointer"
href="{{ .Params.link }}">
<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">{{ .Params.name }}</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">{{ .Params.author }} | <span class="ml-1">{{- .Date.Format "Jan 2, 2006" -}}</span> </p>
</div>
</div>
</a>
</div>
</div>
{{ end }}
<div class="py-20">
{{- partial "pagination.html" . -}}
</div>
</div>
{{ 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.
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.
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 https://github.com/vsemusvetu/hugo
cd hugo/
hugo server
Test doing it yourself.
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