Archiv in Hugo erstellen

Anlegen des Templates

Ich möchte für meine Webseite eine Seite “Archiv” erstellen, um alle bisherigen Artikel, nach Jahr sortiert, aufzulisten. Durch das Templating von Hugo lässt sich das relativ schnell realisieren. Als Erstes müssen wir ein neues Template anlegen. Ich habe die Datei unter /layouts/archive.html angelegt.

Das Ergebnis ist ebenfalls relativ simpel gehalten. Unter der Jahreszahl (Überschrift) werden die jeweiligen Artikel aufgelistet. Schauen wir uns den aktuellen Code an und nehmen die Teile Stück für Stück auseinander:

 1{{ define "main" }}
 2<main class="main" role="main">
 3  <article class="post">
 4    <div class="content post__content clearfix">
 5      <header class="post__header">
 6        <h1 class="post__title">{{ .Title }}</h1>
 7      </header>
 8
 9      {{ range (.Site.RegularPages.GroupByDate "2006") }}
10      {{ $posts := where .Pages "Type" "posts" }}
11      {{ if $posts }}
12        <h2>{{ .Key }}</h2>
13      {{ end }}
14
15      <ul>
16        {{ range $posts }}
17        <li>
18          {{ .PublishDate.Format "02. Jan 2006" }}
19          |
20          <a href="{{ .RelPermalink }}">{{ .Title }}</a>
21        </li>
22        {{ end }}
23      </ul>
24      {{ end }}
25    </div>
26  </article>
27</main>
28{{ end }}

Die nicht hervorgehobenen Bereiche (Zeile 1-7 und 25-28) sind aus meinem Theme übernommen. Der Abschnitt kann bei euch anders aussehen. Die hervorgehobenen Zeilen 9-24 sind wichtig. Hier steht die Logik, um ein Archiv aufzubauen.

Zeile 9: Hier werden alle Seiten geladen und anhand des Jahres gruppiert. “2006” ist notwendig, damit Hugo (aka. GO) die Jahreszahlen als “YYYY” formatiert.

Zeile 10: Durch die Iteration mit range in der Zeile darüber, haben wir Zugriff auf alle Markdown-Dateien. In meiner Struktur habe ich sowohl “posts” (die einzelnen Artikel) als auch “pages” (statische Seiten wie Impressum). Daher filtere ich auf den Typen und weise das Ergebnis einer Variablen zu. Die Variable brauche ich für die nachfolgende Zeile.

Zeile 11-13: Hier prüfe ich, ob es überhaupt Einträge gibt. Deswegen ist es wichtig, dass ich die Liste vorher einer Variablen zuweise. Da manche Seiten keine date-Information haben wird das Jahr “0001” ohne irgendwelche Artikel aufgelistet. Das if vermeidet “Jahreszahlen ohne Artikel”. Wenn es Artikel in dem jeweiligen Jahr gibt, gibt .Key die Jahreszahl aus.

Zeile 16-22: Es wird über die Liste von Artikeln iteriert und ein Listeneintrag <li> pro Artikel erstellt. Die Lösung ist etwas unsauber, da ein leeres <ul></ul> erzeugt wird, falls Artikel kein Datum haben und beispielsweise das Jahr “0001” ausgegeben wird. Aus meiner Sicht kann man darüber hinwegsehen, da die Browser solche Elemente nicht anzeigen und es dem Nutzer nicht auffällt.

Anlegen der Seite

Da wir nun eine Vorlage haben, müssen wir auch eine Seite dazu anlegen. Für statische Seiten nutze ich einen Unterordner pages, damit die Markdown-Dateien etwas strukturiert sind. Die Seite für das Archiv ist sehr minimalistisch gehalten. Je nach Theme wird das Ergebnis bei euch etwas anders aussehen:

1---
2title: "Archiv"
3layout: "archive"
4---

Wichtig ist die Zeile 3, in welcher das Layout definiert wird. Der Name muss mit eurer HTML-Datei übereinstimmen. Weiteren Inhalt oder Text hat die Markdown-Datei nicht, da der Inhalt der Seite im Template hinterlegt ist.

Ergebnis

Bei mir ist die Seite unter /pages/archive erreichbar und das Ergebnis kann sich sehen lassen. Die Überschrift ist die jeweilige Jahreszahl. Unter der Jahreszahl sind die einzelnen Artikel mit dem dazugehörigen Datum aufgelistet. Die Artikel selbst sind als Link anklickbar.

Wie immer lässt sich dieses Template erweitern, sodass z.B. die Anzahl der Artikel pro Jahr oder Tags des jeweiligen Artikels ausgegeben werden. Eurer Fantasie sind keine Grenzen gesetzt :)

Bildnachweis: Pixabay.com

Anmerkung: Die Teilinformationen habe ich mir aus diversen Seiten, Foren und der Hugo-Dokumentation zusammengesucht. Leider habe ich nicht mehr alle Links und Quellen parat.