Skip to content

Commit 5ef5551

Browse files
André DietrichAndré Dietrich
André Dietrich
authored and
André Dietrich
committed
improved category navigation
1 parent f416829 commit 5ef5551

3 files changed

Lines changed: 123 additions & 0 deletions

File tree

‎layouts/_default/taxonomy.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{{ define "main" }}
2+
{{ partial "page-header" . }}
3+
4+
5+
<section class="section">
6+
<div class="container">
7+
<div class="row gx-5">
8+
<!-- blog posts -->
9+
<div class="lg:col-8">
10+
<div class="row" id="taxonomy-post-list">
11+
{{ range .Data.Pages }}
12+
{{ $pageTags := slice }}
13+
{{ range .Params.tags }}
14+
{{ $pageTags = $pageTags | append (urlize .) }}
15+
{{ end }}
16+
<div class="md:col-6 mb-14 post-card" data-tags="{{ delimit $pageTags "," }}">
17+
{{ partial "components/blog-card" . }}
18+
</div>
19+
{{ end }}
20+
</div>
21+
</div>
22+
<!-- sidebar -->
23+
<div class="lg:col-4">
24+
<!-- widget -->
25+
{{ $widget:= site.Params.widgets.sidebar }}
26+
{{ partial "widgets/widget-wrapper" ( dict "Widgets" $widget "Scope" . ) }}
27+
</div>
28+
</div>
29+
</div>
30+
</section>
31+
32+
<script>
33+
(function () {
34+
var params = new URLSearchParams(window.location.search);
35+
var activeTag = params.get('tag');
36+
37+
if (activeTag) {
38+
document.querySelectorAll('#taxonomy-post-list .post-card').forEach(function (card) {
39+
var tags = card.dataset.tags ? card.dataset.tags.split(',') : [];
40+
card.style.display = tags.indexOf(activeTag) === -1 ? 'none' : '';
41+
});
42+
}
43+
44+
document.querySelectorAll('.tag-filter-link').forEach(function (link) {
45+
var linkTag = new URL(link.href).searchParams.get('tag');
46+
if (linkTag === activeTag) {
47+
link.classList.remove('bg-white', 'dark:bg-darkmode-body');
48+
link.classList.add('bg-primary', 'text-white', 'dark:bg-darkmode-primary', 'dark:text-text-dark');
49+
}
50+
});
51+
})();
52+
</script>
53+
{{ end }}

‎layouts/partials/widgets/categories.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!-- categories -->
2+
{{ if isset site.Taxonomies "categories" }}
3+
{{ if not (eq (len site.Taxonomies.categories) 0) }}
4+
<div class="mb-8">
5+
<h5 class="mb-6">{{ T "categories" }}</h5>
6+
<div class="bg-light dark:bg-darkmode-light rounded p-8">
7+
<ul class="space-y-4">
8+
{{ range $name, $items := site.Taxonomies.categories }}
9+
<li>
10+
<a
11+
class="hover:text-primary dark:hover:text-darkmode-primary flex justify-between {{ if (and (eq $.Kind `term`) (eq $.Type `categories`) (eq $.Title $items.Page.Title)) }}text-primary dark:text-darkmode-primary font-semibold{{ end }}"
12+
href="{{ $items.Page.RelPermalink }}">
13+
{{ $items.Page.Title }} <span>( {{ len $items }} )</span>
14+
</a>
15+
</li>
16+
{{ end }}
17+
</ul>
18+
</div>
19+
</div>
20+
{{ end }}
21+
{{ end }}

‎layouts/partials/widgets/tags.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!-- tags -->
2+
{{ if isset site.Taxonomies "tags" }}
3+
{{/* On category term pages, collect only tags present in this category's posts */}}
4+
{{ $filterByCategory := and (eq .Kind "term") (eq .Type "categories") }}
5+
{{ $categoryTagNames := slice }}
6+
{{ if $filterByCategory }}
7+
{{ range .Data.Pages }}
8+
{{ range .Params.tags }}
9+
{{ $categoryTagNames = $categoryTagNames | append (urlize .) }}
10+
{{ end }}
11+
{{ end }}
12+
{{ $categoryTagNames = $categoryTagNames | uniq }}
13+
{{ end }}
14+
15+
{{ $tags := site.Taxonomies.tags }}
16+
{{ if not (eq (len $tags) 0) }}
17+
<div class="mb-8">
18+
<h5 class="mb-6">{{ T "tags" }}</h5>
19+
<div class="bg-light dark:bg-darkmode-light rounded p-6">
20+
<ul>
21+
{{ if $filterByCategory }}
22+
<li class="inline-block">
23+
<a class="tag-filter-link hover:bg-primary dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-text-dark m-1 block rounded bg-white px-3 py-1 hover:text-white"
24+
href="{{ $.RelPermalink }}">All</a>
25+
</li>
26+
{{ end }}
27+
{{ range $name, $items := $tags }}
28+
{{ if or (not $filterByCategory) (in $categoryTagNames $name) }}
29+
<li class="inline-block">
30+
{{ if $filterByCategory }}
31+
<a class="tag-filter-link hover:bg-primary dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-text-dark m-1 block rounded bg-white px-3 py-1 hover:text-white"
32+
href="?tag={{ $name }}">
33+
{{ $items.Page.Title }}
34+
</a>
35+
{{ else }}
36+
{{ $isActive := and (eq $.Kind `term`) (eq $.Type `tags`) (eq $.Title $items.Page.Title) }}
37+
<a class="hover:bg-primary hover:text-white dark:hover:bg-darkmode-primary dark:hover:text-text-dark m-1 block rounded px-3 py-1 {{ if $isActive }}bg-primary text-white dark:bg-darkmode-primary dark:text-text-dark{{ else }}bg-white dark:bg-darkmode-body{{ end }}"
38+
href="{{ $items.Page.RelPermalink }}">
39+
{{ $items.Page.Title }}
40+
</a>
41+
{{ end }}
42+
</li>
43+
{{ end }}
44+
{{ end }}
45+
</ul>
46+
</div>
47+
</div>
48+
{{ end }}
49+
{{ end }}

0 commit comments

Comments
 (0)