Hugo - Pagination für Blogbeiträge und Tags
Und es geht doch - Pagination mehrfach auf einer Website einsetzen. Mit der Hilfe von Joe Mooring habe ich unterschiedliche Pagination für meine Blogbeiträge auf der Startseite und für die Tag-Liste erstellt.
Mehrfache Paginierung bedingt instanziieren. Dies gelingt nicht in einem Partial, aber in der baseof.html. In einem Partial ist es zu spät für das Erstellen von Instanzen.
Die Notwendigkeit von zumindest 2 Pagnination auf einer Website besteht für die meisten Blogs. In der Doku von Hugo habe ich keinen Hinweis gefunden, dass mehr als eine Pagination möglich ist. Zum Glück gibt es das Hugo Forum und - Joe Mooring - mit seinem umfangreichen Wissen und folgender Lösung.
Hugo - Instanzieren von zwei Pagination
Die baseof.html wird bei jedem Generieren als erstes Template benutzt. Deshalb ist das Instanzieren von Pagination möglich. In meinem Fall brauche ich nur 2 Pagination, aber es sollte auch mehr möglich sein.
Hugo baseof.html Paginate
In der baseof.html folgenden Sourcecode einfügen:
<head>
..
{{ $paginator := slice }}
{{ if .IsHome }}
{{ $paginator = .Paginate (where .Site.RegularPages "Section" "blog") }}
{{ else }}
{{ $paginator = .Paginate .Pages }}
{{ end }}
..
</head>Mit slice wird eine Array-Variable erstellt. Wenn die Startseite (IsHome) erstellt wird, werden alle Pages aus der Section blog durch .Paginate in der Array-Variable gespeichert.
Die Anzahl der Elemente per Page
Die standardmäßige Elementeanzahl pro Seite ist bei einer Pagination 10. Dies ist mir bei meinen wenigen Blogbeiträgen zu viel. Deshalb habe ich in der Konfigurationsdatei config.toml die Anzahl mit paginate = 4 angegeben. Für das Austesten der Pagination kann der Wert dort auch auf 1 stehen. Der Hugo Server muss nach einer Änderung an der Konfiguration neu gestartet werden.
Startseite - Aufruf der Pagination
Meine multilingualen Startseiten sind im Verzeichnis /themes/tekki/layouts/ gespeichert.
themes/tekki
|__
|__layouts
|__index.html
|__index.en.html
|__partial
|__blogTeaser.htmlStartseite - index.html
Die deutsche und englische Version unterscheiden sich nur in der angezeigten Sprache. Beiden gemeinsam ist der Aufruf des Partial blogTeaser.html.
{{- define "main" -}}
<div class="content-header">
<div class="container">
<h1>Ein Blog über Hugo, Webdesign, CSS/SCSS, ..</h1>
<p>Tipps und Tricks rund um den statischen Webseitengenerator Hugo.</p>
</div>
</div>
{{- partial "blogTeaser.html" . -}}
{{- end -}}Startseite - Partial blogTeaser.html
Der Sourcecode von blogTeaser.html ist sehr übersichtlich und sieht so aus:
{{- range .Paginator.Pages -}}
{{- partial "articleTeaser.html" . -}}
{{- end -}}
{{- template "_internal/pagination.html" . -}}Im Partial articleTeaser.html werden die Teaser-Daten der einzelnen Blogbeiträge angezeigt. Danach wird das Hugo interne Template _internal/pagination.html aufgerufen. Der Hugo Generator baut aus diesem Aufruf die jeweilige Pagination zusammen. Diese Magie von Hugo fasziniert mich immer wieder.
Liste der Tag-Artikel - Aufruf der Pagination
Meine vorhandenen Tags werden auf einer Übersichtsseite, mehrfarbig angezeigt. Sobald auf einen Tag geklickt wird, wird das Template tag.html aufgerufen, welches wiederum das Partial tagTeaser.html aufruft.
themes/tekki
|__
|__layouts
|__partials
|__tagTeaser.html
|__taxonomy
|__tag.htmlListe der Tag-Artikel - Template tag.html
{{- define "main" -}}
<section class="container tag">
<h1>
<span class="tag-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tags" viewBox="0 0 16 16">
<path d="M3 2v4.586l7 7L14.586 9l-7-7H3zM2 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586V2z"/>
<path d="M5.5 5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm0 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM1 7.086a1 1 0 0 0 .293.707L8.75 15.25l-.043.043a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 0 7.586V3a1 1 0 0 1 1-1v5.086z"/>
</svg>
</span>
#{{- .Title -}}
</h1>
<div class="tagArticle">
<p class="tagHint">{{- T "tagHint1" -}}<span>#{{- .Title -}}</span>{{- T "tagHint2" -}}</p>
</div>
</section>
{{- partial "tagTeaser.html" . -}}
{{- end -}}Das Einbinden von SVG-Grafiken habe ich in dem Artikel - Kostenlose Bootstrap SVG-Icons in Hugo benutzen - beschrieben.
Wegen der multilingualen Texte wird die Hugo T Funktion (Translate) benutzt. Anschließend erfolgt der Aufruf des Partials tagTeaser.html.
Liste der Tag-Artikel - Partial tagTeaser.html
Hier erfolgt das Einbinden der Pagination. Der Inhalt von tagTeaser.html ist identisch mit blogTeaser.html. Identischer Sourcecode sollte eigentlich nicht verwendet werden, aber für mich ist der Partialname dadurch eindeutiger. Den Code schaut man sich ja auch nicht dauernd an und nach einem halben Jahr habe ich vergessen was ich damals gemacht habe.
{{- range .Paginator.Pages -}}
{{- partial "articleTeaser.html" . -}}
{{- end -}}
{{- template "_internal/pagination.html" . -}}Das SCSS für die Pagination
Laut der - Hugo Doku
- ist der einfachste Weg die Pagination in den eigenen Sourcecode zu integrieren, dass Einbinden des von Hugo zur Verfügung gestellten _internal/pagination.html Templates. Das Template hat automatisch ein Bootstrap kompatibles Style. Da ich selber Bootstrap benutze, kann ich nicht sagen ob dies ohne Bootstrap wirklich stimmt.
Das Aussehen der Pagination habe ich an meine Umgebung angepasst. Was auf jeden Fall nicht mitgeliefert wird, ist ein responsive Style. Die Navigation ist für Smartphones hochkant nicht geeignet und muss entsprechend angepasst werden.
.pagination {
justify-content: center;
.page-item.active {
.page-link {
background-color: var(--wk-linkactive-color) !important;
border-color: unset;
a {
color: white;
}
}
}
li:nth-child(3) {
margin-left: 1.0rem;
}
li:nth-last-child(2) {
margin-left: 1.0rem;
}
}
@media (max-width: 549.98px) {
.pagination {
li:first-child,
li:nth-child(2),
li:last-child,
li:nth-last-child(2) {
display: none;
}
}
.pagination {
li:nth-child(3) {
margin-left: 0;
}
}
}
@media (max-width: 399.98px) {
.pagination {
font-size: 0.7rem;
}
}Im allgemeinen Teil habe ich die Pagination zentriert, farblich angepasst und einigen Elementen etwas mehr Raum zur Verfügung gestellt. Bis zu einer maximalen Breite von 549.98px habe ich die Anzeige von diversen Navigationselementen ausgeschaltet. Das sieht sonst wirklich nicht schön aus. Damit das Ganze auch für noch kleinere Displays passt - bis 399.98px Breite dann eine kleinere Schrift.
Fazit
Ohne die Hilfe von - Joe Mooring - hätte ich dies nicht realisieren können. Da die Lösung im Hugo Forum ja dokumentiert ist wollte ich dies eigentlich nicht mehr in einem Blogbeitrag zum Thema machen. Einige Monate später habe ich mir den Thread im Hugo Forum noch einmal angeschaut und meinen eigenen Code und den von Joe im ersten Moment überhaupt nicht mehr verstanden. Dadurch, dass ich mich erneut damit beschäftigt habe, habe ich auch nachträglich in meinem Source noch einige Dinge, die überflüssig waren, entfernt. Ich hoffe, dass dieser Beitrag anderen hilft die mehrfache Pagination selber einfacher umzusetzen.
Linkliste zu diesem Beitrag
Das könnte Sie auch interessieren
- Hugo - Canonical Pagination Links für Blogbeiträge und Tags
Canonical Links für Pagination Seiten - page/2, page/3 …
- Hugo - Strukturierte Schema Daten für eine bessere SEO
Schema.org Typ WebSite und BlogPosting - strukturierte Daten für eine bessere SEO meiner Hugo Website.
- Hugo - Anleitung Teil 1 - i18n multilinguale Site erstellen
i18n - Teil 1 von 3 aufeinander aufbauenden Anleitungen für das Erstellen einer Hugo multilingualen Website.
Kommentare werden bei deutscher Spracheinstellung nicht in der englischen Variante der Webseite angezeigt und umgekehrt.