Script - list.html

Wie schon erwähnt, benutzt hugo das Script layouts/ftpedia/list.html zur Darstellung von section Knoten content/ftpedia/.../_index.md. Wir haben dafür 3 verschiedene Typen:

  • Den Wurzelknoten der section (content/ftpedia/_index.md)
  • Die jahrgangsweise Struktur, für jedes Jahr ‘yyyy’ eine section (content/ftpedia/yyyy/_index.md)
  • Eine einzelne Ausgabe ‘yyyy-n’ (content/ftpedia/yyyy/yyyy-n/_index.md)

Je nach dem Typ ist eine unterschiedliche Behandlung notwendig. Dafür muss man die Eigenschaften der Typen kennen, genauer die Einträge im Frontmatter der jeweiligen _index.md-Datei:

Typ Darstellung .Layout .Params.date
Wurzel Gesamtübersicht jahrgangsweise x -
Jahrgang Übersicht der Ausgaben - -
Ausgabe Einzelne Ausgabe ? x

Wie das Layout exakt benannt ist, ist unerheblich. Hauptsache es ist bei der Wurzel eines definiert. Ein Jahrgang bekommt weder Layout noch Datum! Das (Erscheinungs-) Datum wird nur einer Ausgabe zugeordnet. Eine Ausgabe darf ein Layout haben, muss aber nicht (daher das ‘?’). Dies wird für die Sonderbehandlung des ft:pedia-Teasers benötigt.

Das Script unterscheidet nun anhand einer einfachen Auswahllogik die diversen Darstellungsformen:

graph TD St(("Start")) Q1{"if
.Params.date
?"} Q2{"if
.Layout
?"} A["Baue Seite für Ausgabe"] H["Baue ft:pedia Hauptseite"] J["Baue Seite für Jahrgang"] St --> Q1 Q1 -->|true| A Q1 -->|false| Q2 Q2 -->|true| H Q2 -->|false| J
Auf geht’s, nach diesem Schema!

Zuerst bekommt aber die Seite noch ihren “Rahmen” durch

{{ define "main" }}

    {{ $date_format_string := "02.01.2006" }}

   <div class="padding highlightable">
      {{ partial "topbar.html" . }}
      <div id="body-inner">

Seite für Ausgabe

Die Codesequenz

         {{ if .Params.date }}
{{/* -------------------------------------------------------------------- */}}
            {{/* Einzelausgabe */}}
            {{/* Single edition */}}

            {{/* --- Überprüfe ob die Pflichtangaben alle vorhanden sind --- */}}
            {{/* --- Check if all mandatory field entries are available --- */}}

            {{ if not .Title }}
               {{ errorf "Oh oh, der Seitentitel 'title' fehlt oder ist leer in Seite %q" .Path }}
            {{ end }}

            {{ if not .File }}
               {{ errorf "Oh oh, der Dateiname 'file' fehlt oder ist leer in Seite %q" .Path }}
            {{ end }}

            <h2>Ausgabe {{.Title}}</h2>

leitet den Aufbau einer Seite für eine ft:pedia Einzelausgabe ein. Die Abfrage {{ if .Params.date }} entspricht der Bedingung aus dem Ablaufdiagramm. Dieser Seitentyp wird gebaut, wenn ein Datum im Frontmatter eingetragen ist.

Einige Pflichtfelder (title und file) werden auf Anwesenheit geprüft. Bei fehlerhaften Angaben verweigert hugo.

<h2>Ausgabe {{.Title}}</h2> bringt den Titel als Überschrift oben auf die Seite.

Als nächstes kommt das Titelbild der Ausgabe auf die linke Seite und rechts davon ein optionaler Begleittext.

            <div style = "float:left; text-align: center; margin: 0.25em 1.5em 0 0;">
               <a
                  href = "{{.RelPermalink}}{{.Params.file}}">
                  <img
                     src = "{{- .RelPermalink -}} titelseite.png"
                     alt = "{{.RelPermalink}}{{.Params.file}}"
                     style = "display: block; max-width: 100%; margin: 0;"
                  >
               </a>
               <small style = "">
                  Erschienen am {{ .Date.Format $date_format_string }}
                  <br />
                  ( {{- partial "download-size.html" . -}} )
               </small>
            </div>

            {{ truncate 1500 .Content }} {{/* Das mit dem truncate ist mal testweise drin. Ebenso wie ein Editorial in der 2018-4 um einen langen Text zu haben. */}}

Das Titelbild ist als Hyperlink auf die .pdf-Datei angelegt. Dazu gibt es noch die Info über das Erscheinungsdatum. Der Begleittext kommt direkt aus dem _index.md, auf 1500 Zeichen gekürzt.

Finden sich im Verzeichnis dieser Ausgabe (content/ftpedia/yyyy/yyyy-n/) weitere Dateien des Typs .md so wird davon ausgegangen, dass es sich um begleitenden Downloads zur Ausgabe handelt. Das Script erkennt das am Vorhandensein von .Pages. Diese Dateien werden entsprechend per Tabelle bereitgestellt:

            <div style = "clear: left">
               <hr />
               {{ with .Pages }}
                  Wir haben ergänzende Downloads zu dieser Ausgabe:<br />
                  <br />
                  <table>
                     <thead>
                        <tr>
                           <th>Thema</th>
                           <th style = "text-align: center;"><i class="fas fa-download"></i></th>
                           <th>Autor(en)</th>
                        </tr>
                     </thead>
                     <tbody>
                        {{ range .ByTitle }}
                           <tr>
                              <td>
                                 <a
                                    href = "{{ .RelPermalink }}">
                                    {{ .Title }}
                                 </a>
                              </td>
                              <td style = "text-align: center;">
                                 <a href="{{ path.Dir .RelPermalink | path.Dir }}/{{ .Params.file }}">
                                    <img
                                       src = "{{ $.Site.BaseURL }}images/{{ partial "download-icon.html" . }}"
                                       alt = "{{ partial "download-icon.html" . }}"
                                       style = "display: block; width: 3em; margin: 0 auto 0 auto;"
                                    >
                                 </a>
                                 {{ partial "download-size.html" . }}
                              </td>
                              <td>
                                 {{ partial "authors-list.html" . }}
                              </td>
                           </tr>
                        {{end}}
                     </tbody>
                  </table>
               {{ else }}
                  Zu dieser Ausgabe gibt es keine begleitenden Downloads.
               {{ end }}
            </div>

Dabei werden die Tabelleneinträge alphabetisch absteigend geordnet. Die Dateinamen der eigentlichen Download-Dateien werden aus den zugehörigen Markdown-Dateien (Frontmatter) geholt. Das erledigt die Zeile

<a href="{{ path.Dir .RelPermalink | path.Dir }}/{{ .Params.file }}">

innerhalb des range Konstrukts. Außerdem gibt es noch die Dateigrösse, ein passendes Download-Icon und die Auskunft über die Autoren, jeweils aus den bekannten Partials.

ft:pedia Hauptseite

Ist kein Datum im Frontmatter zu finden, geht die Abfrage weiter.

         {{ else if .Layout }}
{{/* -------------------------------------------------------------------- */}}
            {{/* Alle Jahrgänge in der Übersicht */}}
            {{/* All editions, sorted by year */}}

            {{/* --- Überprüfe ob die Pflichtangaben alle vorhanden sind --- */}}
            {{/* --- Check if all mandatory field entries are available --- */}}

            {{ if not .Title }}
               {{ errorf "Oh oh, der Seitentitel 'title' fehlt oder ist leer in Seite %q" .Path }}
            {{ end }}

Zunächst wird per {{ else if .Layout }} nachgeschaut ob ein Layout angegeben ist. Wie das genau heißt. ist egal; nur dass eines vorhanden ist, zählt! In diesem Fall wird die ft:pedia Wurzelseite mit der grossen Übersicht gebaut.

Auch hier wird strikt auf die Angabe eines Titels bestanden.

Ist sowohl Layout als auch Titel im Frontmatter definiert, beginnt der Seitenaufbau - mit dem Titel und dem Inhalt aus _index.md.

            <h2>{{.Title}}</h2>
            {{ .Content }}

Danach hangelt sich das Script jahrgangsweisedurch die Struktur der sections. Jede direkte Untersection ist ein Jahrgang. Es wird je Jahrgang die Kopfzeile aufgebaut.

            {{ range .Sections.ByTitle.Reverse }}
               <hr>
               <h4>
                  <a
                     class = "ftplink"
                     href = "{{.Title}}"
                     >
                     Jahrgang {{.Title}}
                  </a>
               </h4>
               {{ $accompanions := false }}

Nun werden innerhalb des Jahrgangs die verfügbaren Ausgaben gesucht. Dabei findet das Script noch heraus ob es zu den Ausgaben begleitende Downloads gibt. Derartige Begleitdateien weisen sich durch ein zugehöriges .md aus. Derartige Dateien registriert hugo als page und deren Anzahl liefert .Pages frei Haus.

               {{ $accompanions := false }}
               {{range.Sections.ByTitle }}
                  <figure class="ftpedia-thumbnail">
                  {{ if eq .Params.layout "teaser" }}
                     {{.Title}}
                     <img src = "{{- .RelPermalink -}} titelseite.png" alt = "Titel">
                     <small>Ab {{ dateFormat $date_format_string .Params.publ }}</small>
                  {{ else }}
                     <a
                        class = "ftplink"
                        href = "{{.RelPermalink}}"
                     >
                        {{.Title}}
                     </a>
                     <a
                        href = "{{.RelPermalink}}{{.Params.file}}">
                        <img
                           src = "{{- .RelPermalink -}} titelseite.png"
                           alt = "{{.RelPermalink}}{{.Params.file}}"
                        >
                     </a>
                     <small>{{ .Date.Format $date_format_string }}</small>
                     {{ if gt .Pages 0 }}
                        {{ $accompanions = true }}
                     {{ end }}
                  {{ end }}
                  </figure>
               {{end}}

Der Teaser (layout: "teaser") erfährt dabei eine Sonderbehandlung! Er wird lediglich durch seinen Titel, sein geplantes Erscheinungsdatum und sein Vorschaubild (alles ohne Link) dargestellt.

Alle normalen Ausgaben erhalten ihren Titel und Titelbild als klickbaren Download-Link mit ihrem Erscheinungsdatum darunter. In diesem Fall wird noch anhand if $accompanions festgestellt, ob es Dateien zur Ausgabe gibt und ein entsprechender Link auf den Jahrgang beigefügt. Ohne begleitende Downloads gibt es keinen entsprechenden Link.

               {{ if $accompanions }}
                  <a href = "{{.Title}}">
                     <br />Es gibt begleitende Downloads zu einigen Ausgaben
                  </a>
               {{ end }}

Ein Zeilenvorschub schließt diesen Jahrgang ab.

               <br />
            {{end}}

Seite für einen Jahrgang

Bisher hat keiner der Vergleiche gepasst? Dann ist das wohl ein einzelner Jahrgang. Der wird natürlich nur gebaut, wenn er auch einen Titel hat!

         {{ else }}
{{/* -------------------------------------------------------------------- */}}
            {{/* Ein Jahrgang (Titelbilder als Download-Links) */}}
            {{/* One year's editions (frontpages as download-links) */}}

            {{ if not .Title }}
               {{ errorf "Oh oh, der Seitentitel 'title' fehlt oder ist leer in Seite %q" .Path }}
            {{ end }}

            <h2>{{.Title}}</h2>

Ist das mit dem Titel zufriedenstellend geklärt, hangelt sich das Script durch die vorhandenen Ausgaben. Jede davon stellt eine section dar.

            {{ $accompanions := false }}
            {{ with .Sections }}
               <br />
               {{ range .ByTitle }}

                  {{/* --- Überprüfe ob die Pflichtangaben alle vorhanden sind --- */}}
                  {{/* --- Check if all mandatory field entries are available --- */}}

                  {{ if not .Title }}
                     {{ errorf "Oh oh, der Seitentitel 'title' fehlt oder ist leer in Seite %q" .Path }}
                  {{ end }}

                  {{ if eq .Params.layout "file" }}
                     {{ if not .Params.file }}
                        {{ errorf "Oh oh, der Dateiname 'file' fehlt oder ist leer in Seite %q" .Path }}
                     {{ end }}
                  {{ end }}

                  {{ if not .Date }}
                     {{ errorf "Oh oh, das Hochladedatum 'date' fehlt oder ist leer in Seite %q" .Path }}
                  {{ end }}

with .Sections gibt die Inhalte nur aus wenn auch eine section existiert. range .ByTitle sorgt für die gewünschte Sortierung (1 links, 4 rechts). Dann erfolgen noch die Prüfungen zu jeder Ausgabe. Es langt durchaus das nur hier zu machen (und nicht auch noch beim Bau der ft:pedia Hauptseite), weil hugo eh beide Seitentypen bauen muss.

Ist das Vorgeplänkel soweit erledigt, wird die Ausgabe mit Titelbild und ein paar Angaben dargestellt. Der Code und das erzeugte Aussehen ist identisch mit dem Bau der ft:pedia Hauptseite.

                  <figure class="ftpedia-thumbnail">
                     {{ if eq .Params.layout "teaser" }}
                        {{.Title}}
                        <img src = "{{- .RelPermalink -}} titelseite.png">
                        <small>
                           Ab {{ dateFormat $date_format_string .Params.publ }}
                        </small>
                     {{ else }}
                        <a
                           class = "ftplink"
                           href = "{{.RelPermalink}}"
                           >
                           {{.Title}}
                        </a>
                        <a
                           href = "{{.RelPermalink}}{{.Params.file}}">
                           <img src = "{{- .RelPermalink -}} titelseite.png">
                        </a>
                        <small>
                           {{ .Date.Format $date_format_string }}
                        </small>
                        {{ if gt .Pages 0 }}
                           {{ $accompanions = true }}
                        {{ end }}
                     {{ end }}
                  </figure>
               {{ end }}
            {{ end }}

Es folgt nun ein horizontaler Trennstrich und die Abfrage ob begleitende Downloads gesichtet wurden (if $accompanions). Falls ja, geht es auch direkt los mit dem Tabellenbau.

            <hr />
            {{ if $accompanions }}
               Zu einigen Artikeln sind ergänzende Downloads verfügbar:<br />
               <br />
               <table>

In der Tabelle werden die existenten Dateien aufgelistet. Es gibt 4 Spalten

  • Ausgabe
  • Thema
  • Download-Link (durch ein Icon dargestellt)
  • Autor(en)

und entsprechend sieht der Kopf aus:

                  <thead>
                     <tr>
                        <th style = "text-align: center;">Ausgabe</th>
                        <th>Thema</th>
                        <th style = "text-align: center;"><i class="fas fa-download"></i></th>
                        <th>Autor(en)</th>
                     </tr>
                  </thead>

Für den Bau der Tabellenkörpers gräbt sich hugo nun wieder durch die Ausgaben dieses Jahrgangs (range .Sections.ByTitle) um die zugehörigen Dateien zu finden (range .Pages.ByTitle).

                  <tbody>
                     {{ range .Sections.ByTitle }}
                        {{ $edition := .Title }}
                        {{ range .Pages.ByTitle }}

Für jede gefundene Datei wird eine Zeile in der Tabelle angelegt. In der ersten Spalte erscheint profan der Name der Ausgabe ($edition).

                           <tr>
                              <td style = "text-align: center;">
                                 {{ $edition }}
                              </td>

In der zweiten Spalte wird der Name der Seite (ist eine page und wir brauchen deren .Title) angegeben. Die Spezialität hierbei: Dieser Seitenname wird mit einem Hyperlink (href = "{{ .RelPermalink }}") hinterlegt, allerdings wird der Link etwas versteckt (class = "ftplink"). Auf dieser Seite gibt es dann noch weitere Details zum Download - für all die, die es genau wissen wollen.

                              <td>
                                 <a
                                    class = "ftplink"
                                    href = "{{ .RelPermalink }}"
                                    >
                                    {{ .Title }}
                                 </a>
                              </td>

Diese spezielle Unterseite wird vom globalen Script für alle Download-Dateien gebaut (layouts/_default/file.html) und hier nicht weiter erklärt.

Für unsere eiligen Surfer kommt in der dritten Spalte der Direktlink auf den Download. Allerdings - auch um Platz zu sparen - wird der Dateiname durch ein Icon ersetzt. Um dieses Icon kümmert sich das partial download-icon.html. Für die Gestaltung sorgt etwas Inline-style. Dazu gibt es noch die Dateigrösse der Download-Datei; auch hier hilft ein partial: download-size.html.

                              <td style = "text-align: center;">
                                 <a href="{{ path.Dir .RelPermalink | path.Dir }}/{{ .Params.file }}">
                                    <img
                                       src = "{{ $.Site.BaseURL }}images/{{ partial "download-icon.html" . }}"
                                       alt = "{{ partial "download-icon.html" . }}"
                                       style = "display: block; width: 3em; margin: 0 auto 0 auto;"
                                    >
                                 </a>
                                 {{ partial "download-size.html" . }}
                              </td>

Damit fehlt nur noch die Angabe zu dem/den Autor(en). Hierfür bietet sich auch das, aus einem anderem Grund bereits vorhandenes, partial authors-list.html zur Nutzung an. Die Tabellenzeile endet mit dieser vierten Spalte.

                              <td>
                                 {{ partial "authors-list.html" . }}
                              </td>
                           </tr>

Der Vorgang wiederholt sich für jede page (= Download zu einer Ausgabe) und jede weitere section (= Ausgabe) des Jahrgangs. Sind alle Inhalte abgefrühstückt, endet die Tabelle.

                        {{end}}
                     {{end}}
                  </tbody>
               </table>

Gibt es zum ganzen Jahrgang keine Begleitdateien ($accompanions ist false) dann erhält der Nutzer diese Auskunft:

            {{ else }}
               Zu diesen Ausgaben gibt es keine begleitenden Downloads.
            {{ end }}

Danach endet die Darstellungen eines einzelnen Jahrgangs.

{{/* -------------------------------------------------------------------- */}}
         {{ end }}

Die Kommentarzeile soll der Übersicht helfen. Bei Bedarf könnte hier neuer Code ergänzt werden.

Abschluss

Abgeschlossen wird die Seite dann durch ein paar weitere Zeilen; der Inhalt für den footer fehlt bislang, auch wenn er schon ein Plätzchen hat.

      </div>
   </div>
   <div>
      <footer class=" footline" >
      </footer>
   </div>
{{ end }}

Stand: 8. Juni 2019