toheine.net

Archiv-Seite bereit gestellt

3 min read toheine Blog Hugo

Nach etwas über 2 Jahren dieses Blog-Betriebs, muss ich immer mehr herum klicken, um bestimmte Artikel zu finden. Es ist ja nicht so, dass hier wöchentlich was passiert. Aber einige wichtige Artikel rutschen nach hinten. Es gibt zwar deutlich mächtigere Hugo-Themes, wie das von mir verwendete Theme hugo-geekblog , aber die sind mir häufig zu überladen und ich hab schlichtweg nicht die Zeit und Lust mich in ein neues System einzudenken. Außerdem finde ich das Theme echt gut.

Erfreulicherweise ist Hugo aber sehr anpassungsfähig. Ich benötige mit meinen wenigen Beiträgen pro Jahr keine Suchfunktion. Eine einfache Archivseite sollte reichen und diese war in einer Sonntag-Morgen-Aktion auch schnell bereit gestellt. Das Ergebnis findet sich oben in der Navigation bzw. über nachfolgenden Link: Archive

Umsetzung

Ganz ehrlich: Ich bin absolut kein Hugo-Profi. Aber mit der vorhandenen Doku und der Communtity, wird man schnell fündig. Die relevanten Links befinden sich unten in den Quellen-Angaben. Ich habe mich hauptsächlich an diesem Beitrag orientiert. Damit konnte ich arbeiten und eine Anpassung für meinen Verwendungszweck vornehmen.

Schritt 1 ist die Bereitstellung einer Seite unter content/archive.md:

1
2
3
4

---
title: "Posts Archive"
layout: archive
---

Schritt 2: Die Inhalte werden dynamisch erzeugt und kommmen aus der Datei layouts/archive.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

{{ define "main" }}
<section class="gblog-markdown">
  
  {{/* List all usesd tags */}}
  <h1>Tags</h1>
  {{ $tags := .Site.Taxonomies.tags }}
  {{ if gt (len $tags) 0 }}
    {{ range $name, $taxonomy := $tags }}
      {{ with $.Site.GetPage (printf "/tags/%s" $name) }}
        <span class="gblog-post__tag gblog-button gblog-button--regular" style="margin: 5px">
          <a 
            class="gblog-button__link"
            href="{{ .RelPermalink }}" title="{{ .Title }}">
            {{ .Title }}
          </a>
        </span>
      {{ end }}
    {{ end }}
  {{ end }}

  {{/* List all blog posts grouped by year */}}
  {{ $type := "posts" }}
  {{ $.Store.Set "count" 1 }}
  {{ range (.Site.RegularPages.GroupByDate "2006") }}
    {{ if (gt (where .Pages "Type" $type) 0) }}
      {{ range (where .Pages "Type" $type) }}
        {{ if (eq ($.Store.Get "count") 1) }}
          <h1>{{ .Date.Format "2006" }}</h1>
          {{ $.Store.Set "count" 0 }}
        {{ end }}
      {{ end }}
      {{ $.Store.Set "count" 1 }}
      <ul>
      {{ range (where .Pages "Type" $type) }}
        <li>
            {{ .Date.Format "02.01." }}:
            <a href="{{ .RelPermalink }}">{{ .Title }} </a>
        </li>
      {{ end }}
      </ul>
    {{ end }}
  {{ end }}

</section>
{{ end }}

Ein paar Anmerkungen dazu:

  • Zeile 2 und 10: Formatierung mit meinem Theme-CSS
  • Zeile 4 bis 19: Übersicht der verwendeten Tags. Formatiert als Button des eingesetzten Hugo-Themes
  • Zeile 22: Nur der Typ “Posts” erscheint in den Archiv-Einträgen
  • Zeile 23 bis 42: Die eigentliche, nach Jahr gruppierte Auflistung aller Posts

Fazit

In den Zeilen sind noch ein paar Altlasten enthalten. Diese werden im Nachgang entfernt. Evtl. bekomme ich noch einen Input von den Hugo-Profis aus meiner Communtiy. Ansonsten finde ich das erste Ergebnis hier recht hilfreich. Die Aktion hatte darüber hinaus noch den Nebeneffekt, dass ich mal in meinen verwendeten Tags etwas ausgemistet habe.

Update am 19.11.2025: Die genannten Altlasten wurden soeben entfernt. Die Codeblöcke in diesem Beitrag sind entsprechend angepasst.

Quellen