Startseiten-Layout

Aufbau

Die Startseite wird von der Layout-Datei index.html zusammengebaut. Zu Beginn steht ein etwas seltsamer Abschnitt.

    <span id="sidebar-toggle-span">
        <a href="#" id="sidebar-toggle" data-sidebar-toggle="">
            <i class="fas fa-bars"></i> Navigation
        </a>
    </span>

Dieser Abschnitt bewirkt, dass auf Smartphones und anderen schmalen Bildschirmen auch auf der Startseite die Navigation als “Hamburger-Menü” dargestellt wird.

Die referenzierte ID ist in theme.css definiert:

#sidebar-toggle-span {
    display: none;
}
@media only all and (max-width: 47.938em) {
    #sidebar-toggle-span {
        display: inline;
    }
}

Normalerweise wird dieses Element also nicht dargestellt. Wenn bei irgendeinem Medium die maximale Breite allerdings den angegebenen Wert unterschreitet, dann wird das Element mit dem Hamburger-Menü angezeigt.

Mit {{.Site.Home.Content}} wird der Inhalt von content\_index.md eingebaut.

Nächste Veranstaltung

Um die nächste Veranstaltung anzuzeigen, ist etwas Logik nötig, die jetzt hier erklärt werden soll.

{{ $fansSections := where .Site.Pages "Section" "fans" }}
{{ $events := where $fansSections ".Params.termin" "!=" nil }}
{{ $futur := slice }}
{{ range $events }}
    {{ if (time (.Params.termin)).After now }}
        {{ $futur = $futur | append  . }}
    {{ end }}
{{ end }}
{{ if gt (len $futur) 0 }}
    {{ range first 1 ($futur.ByParam "termin") }}
        <b>{{ dateFormat $date_format_string .Params.termin }}</b> 
        <a href="{{- .Permalink -}} ">{{ .Title }}</a> {{ .Params.location }}
        <img src ="fans/veranstaltungen/{{ .Params.flyer }}" width="432" alt="Flyer" >
    {{ end }}
{{ end }}

In den ersten zwei Zeilen werden die Seiten gesucht, die Veranstaltungen ankündigen. Dies sind die Seiten in der Section “fans”, die den Paramter termin gesetzt haben.

Interessant sind hier nur die Seiten, bei denen der Termin in der Zukunft liegt. Dazu legen wir zunächst einen zunächst leeren Array $futur für die Liste der kommenden Veranstaltungen an. Jetzt hangeln wir uns mit range durch den Array events. Wir holen den Parameter .Params.termin, wandeln ihn mit time in eine Zeit um, und gucken dann, ob er nach jetzt (now) liegt. Wenn ja, fügen wir die aktuelle Seite (.) dem Array $futur hinzu. Anschließend überprüfen wir, ob der Array $futur länger als 0 ist. Es könnte ja sein, dass die letzte Veranstaltung rum ist, aber noch keine nächste existiert. Dann soll ein Bild der letzten Veranstaltung dargestellt werden (s. unten)

Jetzt hangeln wir uns durch die Liste der kommenden Veranstaltungen, also den Array $futur. Dabei wird der Array mit byParam nach dem Parameter termin sortiert. Damit wird sichergestellt, dass wirklich die im Kalender nächste Veranstaltung angekündigt wird. Aus diesem Array wählen wir mit first 1 den ersten Eintrag aus. Der Wert von termin wird jetzt in ein hübsches Format gebracht und zusammen mit einem Link auf den Titel und dem Wert des Parameters location sowie einem nicht zu großen Bild dargestellt.

Bild der letzten Veranstaltung

Wenn die letzte Veranstaltung rum ist, aber noch keine Ankündigung zur nächsten existiert, soll das Startbild der letzten Veranstaltung gezeigt werden.

{{ $treffen := where (.Site.GetPage "/bilderpool/veranstaltungen").Sections ".Params.layout" "==" "overview" }}
    {{ range first 1 ($treffen.ByParam "date").Reverse }}
        <b>Von unserer letzten Veranstaltung</b><p><a href="{{- .Permalink -}} ">{{ .Title }}</p>
        {{ range first 1 .Pages }}
            {{ $original := .Resources.GetMatch .Params.picture }}
            {{ $bild := $original.Resize "432x" }}
            <img src = "{{ $bild.RelPermalink }}" alt="Bild" ></a>
        {{ end }}
    {{ end }}

Zuerst suchen wir in allen direkten Untersverzeichnissen von “bilderpool/veranstaltungen” nach Dateien, die als Layout overview haben und sammeln sie in dem Array treffen. Damit haben wir alle Galerien in diesem Verzeichnis gesammelt. Von diesen Dateien nehmen wir die mit dem neuesten Datum.

Wenn eine Galerie zu einer älteren Veranstaltung erst später angelegt wird, muss man, wenn man das will, dem Automatismus durch Anpassung des Datums auf die Sprünge helfen, damit die richtige Veranstaltung gezeigt wird.

Von dieser Veranstaltung stellen wir jetzt die erste Seite (range first 1 .Pages) dar. Die Darstellung des Bildes wird im übernächsten Abschnitt erklärt.

Rückfallposition: zufälliges Bild

2020 fielen beginnend mit der Nordconvention alle Veranstaltungen aus. Daher wurde jetzt noch eine zusätzliche Option eingebaut. Die letzte Veranstaltung wird nur angezeigt, wenn sie nicht mehr als 9 Monate zurückliegt.

{{ $maxAge := now.AddDate  0 -9  0 }}

{{ if gt .Date $maxAge }}

Sonst wird ein zufälliges Bild aus dem Bilderpool angezeigt. Die Logik dafür ist die gleiche wie bei der 404-Seite:

    {{ $angebot := where .Site.Pages "Section" "bilderpool" }}
    {{ $angebot = where $angebot "Layout" "image" }}
    {{ range first 1 (shuffle $angebot) }}
          <p><a href="{{- .Permalink -}} ">{{ .Title }}</p>
          {{ $original := .Resources.GetMatch .Params.picture }}
          {{ $bild := $original.Resize "432x" }}
          <img src = "{{ $bild.RelPermalink }}" alt="Bild" ></a>
    {{ end }} 

In Frage für die Auswahl kommen alle Seiten aus dem Bilderpool, deren Layout den Wert image hat (also alle Bilder). Die werden mit shuffle durchgemischt, und dann wird das 1. Bild von diesem Stapel genommen. Die Darstellung wird als nächstes erklärt.

Neuestes Bild im Bilderpool

Neben der Ankündigung der nächsten Veranstaltung wird noch das neueste Bild im Bilderpool gezeigt. Die dafür nötige Logik ist nicht so komplex:

    {{ $imageSections := where .Site.Pages "Section" "bilderpool" }}
    {{ $images := where $imageSections ".Params.layout" "==" "image" }}
    {{ range first 1 ($images.ByParam "date").Reverse }}
        <b>Neu im Bilderpool</b><p><a href="{{- .Permalink -}} ">{{ .Title }}</p>
        {{ $original := .Resources.GetMatch .Params.picture }}
        {{ $bild := $original.Resize "432x" }}
        <img src = "{{ $bild.RelPermalink }}" alt="Bild" ></a>
    {{ end }}

In den ersten beiden Zeilen werden die Seiten aus der Sektion “bilderpool” herausgesucht, die Bilder sind, also den Parameter layout gleich “image” gesetzt haben. Diese werden jetzt nach dem Parameter date sortiert, und zwar mit .Reverse in der umgekehrten Reihenfolge, also von neu nach alt. Davon nehmen wir mit first 1 die neueste Seite.

Damit erhalten wir die Seite selbst, also die Datei, die die Metadaten des Bildes enthält. Um den Link zu der Seite richtig darzustellen, unterdrücken wir mit {{- und -}} die Leerzeichen vor und nach dem Code. Der Link zu der Seite ist im Wert .Permalink gespeichert, der Titel in .Title.

Der Name des Bild selbst steht in der Variablen .Params.picture. Diese Datei suchen wir mit .Resources.GetMatch aus dem im Verzeichnis herumliegenden Dateien, nämlich Bild selbst und Thumbnail, heraus. Wir stellen jetzt aber nicht das Original dar, sondern eine verkleinerte Kopie. Hugo kann das selbst erledigen, mit Resize. Diese Kopie speichern wir in der Variablen $bild . $bild.RelPermalink enthält den korrekten Link zu diesem verkleinerten Bild.

Die Darstellung von Veranstaltungsankündigung und Bild nebeneinander wird mit etwas CSS erreicht, das auf der Seite ftc Stylesheet beschrieben wird.