Hugo - i18n Multilingual - lastmod Datum länderspezifisch anpassen

Wenn das Erstellungsdatum (date) oder Änderungsdatum (lastmod - last modifikation) auf der Webseite angezeigt wird, sollte die Anzeige je nach Sprache länderspezifisch angepasst werden. In dem nachfolgenden Hugo Partial zeige ich wie es auf meinen Webseiten eingesetzt wird.

date und lastmod auf meiner Website

Auf meinen Blogseiten wird das Erstellungsdatum (date) oder wenn die Seite nachträglich geändert wurde, dass Änderungsdatum (lastmod) angezeigt. In der Blogliste und auf der Blogbeitragsseite wird das selbe Hugo Partial createDate-lastMod.html eingesetzt. Jede Webseite ist in deutsch und englisch vorhanden.

Bei der Erstellung eines Blogbeitrags wird das date Front Matter Feld automatisch mit dem Tagesdatum gefüllt. Durch die in der config.toml etwas angepasste Einstellung für die lastmod Systemvariable, wird das date bei der Erstellung automatisch in die Systemvariable lastmod übernommen. Zusätzlich habe ich ein Front Matter Feld lastmod. Dieses lastmod Feld wird nur manuell gefüllt, wenn ich inhaltliche Änderungen in einem Blogbeitrag erstelle. Das Feld nutze ich auch wenn Blogbeiträge nach 1 bis 2 Jahren von mir kontrolliert und aktualisiert werden.

Durch die Sortierung der Blogliste mit .ByLastmod.Reverse werden die Blogbeiträge in absteigender Reihenfolge nach lastmod sortiert. Dadurch werden aktualisierte, ältere Blogbeiträge wieder auf den vorderen Pagination Seiten angezeigt.

Im Front Matter für meinen Blogbeitrag - Kostenlose Bootstrap SVG-Icons in Hugo benutzen - ist ein date und ein von mir manuell geändertes lastmod vorhanden. Im dem Fall zeige ich das lastmod in einem länderspezifischen Format mit dem Hinweis Update an. Wenn kein manueller Front Matter Eintrag für lastmod vorhanden ist wird date ohne Hinweis ausgegeben.

Durch Klick auf die Länderflagge rechts oben, wird die Sprache umgeschaltet. Die Anzeige des Datums erfolgt länderspezifisch.

Front Matter Variablen date und lastmod

Der Front Matter Eintrag für die deutsche index.md und die englische index.en.md ist bei date und lastmod in meinen Blogbeiträgen identisch. Bei der Erstellung schreibe ich zuerst die deutsche Markdown Datei, kopiere diese dann und übersetze anschließend. Deshalb das identische date und lastmod.

Front Matter Eintrag in der Markdown Datei des oben genannten Blogbeitrags:

---
..
date: 2021-05-12T13:43:42+01:00
lastmod: "2023-01-28"
..
---

Unter themes/tekki/archetypes/ habe ich das Content Template File blog.md erstellt. Informationen zu Archetypes finden Sie in der Hugo Dokumentation - What are Archetypes? . Das Erstellungsdatum date wird dadurch automatisch eingefügt.

Mein Front Matter aus themes/tekki/archetypes/blog.md:

---
..
date: {{ .Date }}
lastmod:
..
---

Das Änderungsdatum eines Blogartikels - lastmod - schreibe ich bei einer nachträglichen Änderung in Form von “YYYY-MM-DD” als Text in die Front Matter Variable. Dort gebe ich nur ein Datum an, wenn inhaltliche Änderungen / Erweiterungen in dem Blogbeitrag erfolgen. Rechtschreibkorrekturen sind für mich keine inhaltlichen Änderungen. Keine Änderung gleich kein Text und keine Anführungszeichen.

Eintrag in der config.toml

Damit die Anpassung von lastmod bei mir funktioniert, habe ich in der config.toml, im Hauptverzeichnis vom Hugo-Projekt, die default Einstellungen wie folgt überschrieben:

..
[frontmatter]
  lastmod = ['lastmod', 'date']
..

Das Erstellungsdatum date wird beim Erstellen eines neuen Blogbeitrags automatisch in die Systemvariable lastmod kopiert. Die lastmod Front Matter Variable ist zu dem Zeitpunkt noch leer. Die default Werte können in der Hugo Dokumentation unter - Configure Dates - nachgelesen werden.

Bei einigen config.toml Änderungen muss man Hugo mit ctrl+c beenden und neu starten, damit die Änderungen wirksam werden. Ich mache das aus Sicherheitsgründen immer.

Hugo Partial für die länderspezifische Anpassung von date und lastmod

Das Hugo Partial wird unter themes/tekki/layouts/partials/createDate-lastMod.html gespeichert. tekki ist mein Themename.

{{ $datetime := substr .Date 0 10 }}
{{ $date := .Date | time.Format ":date_medium" }}
{{ $lastmod := "" }}

{{ if eq .Site.Language.Lang "de" }}
	{{ $lastmod = .Lastmod.Format "02.01.2006" }}
	{{ $date = substr $date 0 10 }}
{{ else }}
	{{ $lastmod = .Lastmod.Format "Jan 2, 2006" }}
	{{ $date = substr $date 0 12 }}
{{ end }}

{{ if eq $lastmod $date }}
	<time datetime="{{- $datetime -}}">{{- $date -}}</time>
{{ else }}
	{{ $datetime = substr .Params.lastmod 0 10 }}
	<strong>Update:</strong>&nbsp;<time datetime="{{- $datetime -}}">{{- $lastmod -}}</time>
{{ end }}

Im ersten Teil des Partial

.. werden die benutzten Variablen initialisiert:

$datetime wird für das HTML-Tag time benötigt. Die Formatierung weicht von der länderspezifischen Darstellung ab. Deshalb die Verrenkungen mit dieser Variablen. Suchmaschinen mögen mit Datum gekennzeichnete HTML-Tags. Das W3C schreibt die Formatierung des datetime Attributes wie folgt vor: Date and Time Formats

$date das Erstellungsdatum wird mit .Date | time.Format “:date_medium” initialisiert. Dadurch wird automatisch ein länderspezifisches Format erstellt und alles hinter dem Datum abgeschnitten - Zeit etc. Die Hugo Dokumentation - time.Format - beschreibt die Formatoptionen.

Die Variable $lastmod wird deklariert. Ansonsten gibt es Probleme mit dem folgenden if.

Im zweiten Teil des Partial

.. wird zuerst festgestellt ob der Webseitentext in deutsch geschrieben wurde. Wenn ja - dann wird mit .Lastmod.Format “02.01.2006” die Systemvariable lastmod oder die Front Matter Variable lastmod ausgelesen und im deutschen Datumsformat in die Variable $lastmod geschrieben. Das war ein Punkt den ich am Anfang nicht verstanden habe. Anscheinend ist es so, dass wenn die Systemvariable einen Inhalt hat und das Front Matter Feld lastmod ebenfalls einen Inhalt hat, das dann der Inhalt des Front Matter Felds verarbeitet wird. Magisch!

Weiter oben wurde $date mit time.Format länderspezifisch gefiltert. In der deutschen Sprache wird das Datum mit 10 Zeichen angezeigt. Alles andere wird mit substr abgeschnitten.

Wenn nicht deutsch, dann wird das englische Datumsformat benutzt. Und $date mit 12 Zeichen angezeigt.

Im dritten Teil des Partial

.. erfolgt die Kontrolle ob $lastmod oder $date ausgegeben werden soll.

Zuerst wird mit if eq $lastmod $date festgestellt ob $lastmod und $date gleich sind. Wenn ja, bedeutet dies das noch keine manuelle Eingabe im Front Matter Feld lastmod erfolgt ist. Das heißt, das Erstellungsdatum muss ausgegeben werden. Dies erfolgt eingepackt in das HTML-Tag time. Die weiter oben vorbereitete Variable $datetime kann benutzt werden. $date wurde weiter oben länderspezifisch aufbereitet und kann ebenfalls ausgegeben werden.

Wenn $lastmod und $date nicht gleich sind muss $lastmod ausgegeben werden. Aber da ist ja noch das HTML-Tag time mit $datetime. Die Variable wurde am Anfang mit .Date initialisiert. In diesem Zweig muss aber $lastmod in das HTML-Tag geschrieben werden. Das mache ich mit substr .Params.lastmod 0 10 direkt aus dem Front Matter Feld. Danach wird alles ausgegeben.

Die absteigende lastmod Sortierung / Pagination

Die Teaser meiner Blogbeiträge möchte ich in absteigender lastmod Sortierung anzeigen. Dadurch werden überarbeitete Beiträge vom Ende der Blogliste an den Anfang gehoben und wecken dadurch hoffentlich ein entsprechendes Interesse.

Ich setze zwei Pagination auf meiner Website ein. Einen für die Teaser der Blogbeiträge und einen für die Teaser der Tagliste. Eine Erklärung dazu finden Sie in meinen Beitrag - Hugo - Pagination für Blogbeiträge und Tags .

{{ $paginator := slice }}
{{ if .IsHome }}
  {{ $paginator = .Paginate (where .Site.RegularPages.ByLastmod.Reverse "Section" "blog") }}
{{ else }}
  {{ $paginator = .Paginate .Pages.ByLastmod.Reverse }}
{{ end }}

Durch die Erweiterung .ByLastmod.Reverse und der weiter oben beschriebenen, automatischen System date/lastmod Kopieraktion war die Umstellung der Sortierung nicht weiter aufwändig.

sitemap.xml kontrollieren

Wenn date und lastmod sauber angezeigt werden - solten Sie die länderspezifische sitemap.xml kontrollieren.

Der von Hugo statisch generierte Sourcecode wird im Verzeichnis publishDir gespeichert. Dort finden Sie in den Verzeichnissen de und en die länderspezifische sitemap.xml. Wenn ein lastmod sauber durch das System gerutscht ist, finden Sie dort das XML-Tag lastmod bei dem entsprechenden Beitrag oder Tag.

Fazit

Das war ein ganz schöner Aufwand für mich. Am Anfang habe ich nicht verstanden wie Hugo lastmod intern benutzt. Die von mir gefundenen Suchmaschinenbeispiele zum Thema lastmod haben in meinem Fall alle nicht zum gewünschten Ergebnis geführt. Die Dokumentation von Hugo war in diesem Fall auch nicht sehr hilfreich. Aber Ende gut - alles gut, es funktioniert. Wenn Sie einen Fehler auf dieser Seite finden oder wenn ich etwas falsch dargestellt habe, dann benutzen Sie bitte den Kommentar um mir dies mitzuteilen.

Linkliste zu diesem Beitrag

Das könnte Sie auch interessieren