hugo-theme/layouts/partials/pagination.html

<div class="flex flex-row justify-center my-6 gap-2">

{{- with .Paginator }}
{{- $currentPageNumber := .PageNumber }}

{{- with .First }}
  {{- if ne $currentPageNumber .PageNumber }}
  <div class="page-item">
    <a href="{{ .URL }}" aria-label="First" class="page-link flex flex-row items-center text-base font-semibold rounded-md text-slate-700 dark:text-slate-300 px-3 py-2" role="button"><span aria-hidden="true">&laquo;&laquo;</span></a>
  </div>
  {{- else }}
  <div class="page-item disabled">
    <a aria-disabled="true" aria-label="First" class="page-link disabled cursor-default flex flex-row items-center text-base font-semibold rounded-md text-slate-300 dark:text-slate-700 px-3 py-2" role="button" tabindex="-1"><span aria-hidden="true">&laquo;&laquo;</span></a>
  </div>
  {{- end }}
{{- end }}

{{- with .Prev }}
  <div class="page-item">
    <a href="{{ .URL }}" aria-label="Previous" class="page-link flex flex-row items-center text-base font-semibold rounded-md text-slate-700 dark:text-slate-300 px-3 py-2" role="button"><span aria-hidden="true">&laquo;</span></a>
  </div>
{{- else }}
  <div class="page-item disabled">
    <a aria-disabled="true" aria-label="Previous" class="page-link disabled cursor-default flex flex-row items-center text-base font-semibold rounded-md text-slate-300 dark:text-slate-700 px-3 py-2" role="button" tabindex="-1"><span aria-hidden="true">&laquo;</span></a>
  </div>
{{- end }}

{{- $slots := 5 }}
{{- $start := math.Max 1 (sub .PageNumber (math.Floor (div $slots 2))) }}
{{- $end := math.Min .TotalPages (sub (add $start $slots) 1) }}
{{- if lt (add (sub $end $start) 1) $slots }}
  {{- $start = math.Max 1 (add (sub $end $slots) 1) }}
{{- end }}

{{- range $k := seq $start $end }}
  {{- if eq $.Paginator.PageNumber $k }}
  <div class="page-item active">
    <a aria-current="page" aria-label="Page {{ $k }}" class="page-link flex cursor-default items-center justify-center w-10 h-10 text-base font-semibold rounded-md text-slate-300 dark:text-slate-700" role="button">{{ $k }}</a>
  </div>
  {{- else }}
  <div class="page-item">
    <a href="{{ (index $.Paginator.Pagers (sub $k 1)).URL }}" aria-label="Page {{ $k }}" class="page-link flex items-center justify-center w-10 h-10 text-base font-semibold rounded-md text-slate-700 dark:text-slate-300" role="button">{{ $k }}</a>
  </div>
  {{- end }}
{{- end }}

{{- with .Next }}
  <div class="page-item">
    <a href="{{ .URL }}" aria-label="Next" class="page-link flex flex-row items-center text-base font-semibold rounded-md text-slate-700 dark:text-slate-300 px-3 py-2" role="button"><span aria-hidden="true">&raquo;</span></a>
  </div>
{{- else }}
  <div class="page-item disabled">
    <a aria-disabled="true" aria-label="Next" class="page-link disabled cursor-default flex flex-row items-center text-base font-semibold rounded-md text-slate-300 dark:text-slate-700 px-3 py-2" role="button" tabindex="-1"><span aria-hidden="true">&raquo;</span></a>
  </div>
{{- end }}

{{- with .Last }}
  {{- if ne $currentPageNumber .PageNumber }}
  <div class="page-item">
    <a href="{{ .URL }}" aria-label="Last" class="page-link flex flex-row items-center text-base font-semibold rounded-md text-slate-700 dark:text-slate-300 px-3 py-2" role="button"><span aria-hidden="true">&raquo;&raquo;</span></a>
  </div>
  {{- else }}
  <div class="page-item disabled">
    <a aria-disabled="true" aria-label="Last" class="page-link disabled cursor-default flex flex-row items-center text-base font-semibold rounded-md text-slate-300 dark:text-slate-700 px-3 py-2" role="button" tabindex="-1"><span aria-hidden="true">&raquo;&raquo;</span></a>
  </div>
  {{- end }}
{{- end }}
{{- end }}
</div>