Add pagination to category, tag, and issue pages (10 per page)
pagerSize set to 10 (5 columns × 2 rows). New pagination partial renders prev/next links and numbered page buttons. Applied to _default/list.html (categories + tags) and issues/list.html. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -24,12 +24,14 @@
|
||||
{{- end }}
|
||||
</section>
|
||||
|
||||
{{- $paginator := .Paginate .Pages }}
|
||||
<section id="grid" data-density="default"
|
||||
data-filter-type="{{ .Kind }}"
|
||||
data-filter-value="{{ .Title }}"
|
||||
class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-[var(--gap)] px-[var(--pad)] py-[var(--gap)]">
|
||||
{{- range $i, $p := .Pages }}
|
||||
{{- range $i, $p := $paginator.Pages }}
|
||||
{{- partial "card.html" (dict "Page" $p "Index" $i) }}
|
||||
{{- end }}
|
||||
</section>
|
||||
{{- partial "pagination.html" $paginator }}
|
||||
{{ end }}
|
||||
|
||||
@@ -9,10 +9,12 @@
|
||||
<p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0">{{ .Params.description }}</p>
|
||||
</section>
|
||||
|
||||
{{- $paginator := .Paginate .Pages }}
|
||||
<section id="grid" data-density="default"
|
||||
class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-[var(--gap)] px-[var(--pad)] py-[var(--gap)]">
|
||||
{{- range $i, $p := .Pages }}
|
||||
{{- range $i, $p := $paginator.Pages }}
|
||||
{{- partial "card.html" (dict "Page" $p "Index" $i) }}
|
||||
{{- end }}
|
||||
</section>
|
||||
{{- partial "pagination.html" $paginator }}
|
||||
{{ end }}
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
{{- $p := . }}
|
||||
{{- if gt $p.TotalPages 1 }}
|
||||
<nav aria-label="Pagination"
|
||||
class="flex items-center justify-center gap-1
|
||||
px-[var(--pad)] py-[clamp(24px,3vw,40px)]
|
||||
border-t border-[var(--rule)] mt-[var(--gap)]">
|
||||
|
||||
{{/* Prev */}}
|
||||
{{- if $p.HasPrev }}
|
||||
<a href="{{ $p.Prev.URL }}"
|
||||
class="flex items-center gap-1.5 px-4 py-2 mr-3
|
||||
font-sans font-medium text-[11px] leading-none tracking-[.14em] uppercase text-ink-soft
|
||||
border border-[var(--rule)] transition-colors duration-200 hover:text-ink hover:border-ink">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
|
||||
Prev
|
||||
</a>
|
||||
{{- else }}
|
||||
<span class="flex items-center gap-1.5 px-4 py-2 mr-3
|
||||
font-sans font-medium text-[11px] leading-none tracking-[.14em] uppercase
|
||||
text-ink-soft opacity-30 border border-[var(--rule-2)]">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
|
||||
Prev
|
||||
</span>
|
||||
{{- end }}
|
||||
|
||||
{{/* Page numbers */}}
|
||||
{{- range $p.Pagers }}
|
||||
{{- if eq .PageNumber $p.PageNumber }}
|
||||
<span class="w-9 h-9 grid place-items-center
|
||||
font-mono text-[11px] tabular-nums
|
||||
bg-ink text-paper border border-ink">{{ .PageNumber }}</span>
|
||||
{{- else }}
|
||||
<a href="{{ .URL }}"
|
||||
class="w-9 h-9 grid place-items-center
|
||||
font-mono text-[11px] tabular-nums text-ink-soft
|
||||
border border-[var(--rule)] transition-colors duration-200 hover:text-ink hover:border-ink">{{ .PageNumber }}</a>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
||||
{{/* Next */}}
|
||||
{{- if $p.HasNext }}
|
||||
<a href="{{ $p.Next.URL }}"
|
||||
class="flex items-center gap-1.5 px-4 py-2 ml-3
|
||||
font-sans font-medium text-[11px] leading-none tracking-[.14em] uppercase text-ink-soft
|
||||
border border-[var(--rule)] transition-colors duration-200 hover:text-ink hover:border-ink">
|
||||
Next
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>
|
||||
</a>
|
||||
{{- else }}
|
||||
<span class="flex items-center gap-1.5 px-4 py-2 ml-3
|
||||
font-sans font-medium text-[11px] leading-none tracking-[.14em] uppercase
|
||||
text-ink-soft opacity-30 border border-[var(--rule-2)]">
|
||||
Next
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>
|
||||
</span>
|
||||
{{- end }}
|
||||
|
||||
</nav>
|
||||
{{- end }}
|
||||
Reference in New Issue
Block a user