Sobald das Git-Repo dieses Blogs online ist, wird jeder in der Lage sein, Inhalte zu ändern oder Fehler zu korrigieren. Ob und in welchen Fällen ich Pull Requests annehme, das werde ich in Zukunft noch beschreiben.

FIXME, noch weitere Dinge erklären.

Einen neuen Blogbeitrag erstellen

Mindestanforderungen für einen Blogbeitrag

Ein Blogbeitrag sollte mindestens enthalten:

  • Angaben im Front Matter (siehe hier).
    • Einen aussagekräftigen Titel.
    • Passende Tags (an den vorhandenen Tags orientieren und nur wenig neue Tags erstellen). Tags immer in der Mehrzahl verwenden, außer bei feststehenden Begriffen.
    • Eine Beschreibung mit maximal ~200 Zeichen (siehe hier).
  • Seitenbild (siehe hier).

Front Matter

Als Vorlage kann man dieses Front Matter benutzen:

---
title: Fotos vom Ausflug 12.04.2022
slug: fotos-ausflug
date: 2022-04-13T00:55:46+02:00
draft: false
author: Name
categories:
  - Allgemein
tags:
  - Fotos
  - Natur
  - Kagube
  - Pforzheim
---

Titel (Title)

Der Titel einer Seite.

Slug

URL des Blogbeitrags. Mit dem Datum wird im oberen Beispiel dann die URL blog.natenom.com/2022/04/fotos-ausflug.

comments

Wird dieser Parameter auf false (Standardwert ist true) gesetzt, dann wird die Info zu Anmerkungen/Kommentaren nicht angezeigt.

Beschreibung

Man kann im Front Matter eine Beschreibung einfügen:

description: Beschreibung

Alternativ verwende man dieses Tag:

<!--more-->

Dadurch wird alles vom Anfang des Beitrags bis zu dieser Zeile als Beschreibung verwendet.

Empfohlener Blogbeitrag

Damit ein Blogbeitrag rechts in der Sidebar in das Widget “Empfohlene Beiträge” eingefügt wird, fürgt man im Front Matter ein:

featured: true

Angepinnt

Einen Beitrag kann man auf der Startseite im Blog anpinnen mit dem Eintrag im Front Matter:

pinned: true

Beitragsbilder

Dateien, die bestimmte Teilstrings enthalten und im Hauptverzeichnis eines Page Bundles liegen, werden automatisch genutzt für:

  • cover und thumbnail: Wird nur in der Liste von Blogbeiträgen als Thumbnail angezeigt.
  • feature: Wird nur im geöffneten Blogbeitrag oben im Header angezeigt.

Gibt es eines der drei, wird diese automatisch als Bild für Twitter Cards und Open Graph verwendet.

Grundsätzliches

Code

Man kann Code auf verschiedene Weisen darstellen:

Bilder und Screenshots

Bilder Screenshots sollten nur verlinkt werden, wenn es notwendig ist, das Bild in groß sehen zu müssen, um es erkennen zu können. Wenn ein Bild nicht bereiter als ca. 600 Pixel ist, dann reicht es aus, wenn es eingebettet wird, aber nicht verlinkt.

Dinge, die im Blog und Wiki gleichermaßen gelten

Weil diese Dinge für Blog und Wiki gelten, sind sie nur hier beschrieben und im Wiki wird hierher verlinkt.

Seite(n) verschieben

Verschiebt man (nur aus guten Gründen) eine Seite innerhalb des Wikis oder Blogs (z. B. innerhalb von pages/), dann muss im Front Matter der Parameter aliases: hinzugefügt werden mit dem alten Standort der Seite.

Beispielsweise hatte ich mal diese Anweisungen hier verschoben von /docs/ueber/format/ nach /docs/ueber/mitarbeit/. Der richtige Alias-Eintrag war deshalb:

aliases:
  - /docs/ueber/format/

Benennt man eine einzelne Seite nur um, ohne den Standort innerhalb der Verzeichnishierarchie zu verändern, dann reicht es aus, den Namen der alten Datei in Aliases einzutragen. Hieß die alte Seite z. B. ohne_kuehlschrank_leben.md und benennt man diese um in kuehlschrank.md, dann ist der passende Eintrag in Aliases:

aliases:
  - ohne_kuehlschrank_leben
Hinweis

Der Alias-Eintrag bewirkt, dass an der alten URL eine HTML-Datei erzeugt wird, die nur eine Weiterleitung per HTTP Status Code 301 (“Moved permanently”) enthält und auf die neue URL zeigt.

Zudem sollte der Alias bei absoulten URLs immer mit einem / abgeschlossen sein, sonst funktioniert die Weiterleitung lokal oder bei nicht gut konfiguriertem Server nicht zuverlässig, wenn man in der alten URL den Slash weglässt oder hinzufügt.

Shortcodes

Bitte nur so wenig wie möglich Shortcodes verwenden und so oft wie möglich die Formatierungen von Markdown verwenden.

Bilder/Fotos/Screenshots

Einzelbilder per Markdown-Syntax

Die Syntax ist:

![Alt Text](pfad/zu_bild.jpg "Bildbeschreibung unter dem Bild")

Man kann auch ein Bild einbinden und darauf einen Link auf ein anderes Bild oder auf das Orinalbild legen:

[![](bild.jpg)](bild.jpg)

Oder einen Link auf ein Bild legen:

[![](bild.jpg)](/url)

Einzelbild(er) per figure

Den Shortcode figure bitte nur benutzen, wenn:

  • Das Bild verlinkt sein soll UND Titel oder Beschreibung (caption) enthält. In der Beschreibung ist Markdown erlaubt.
  • Das Bild kleiner dargestellt werden soll als das Original bzw. die maximale Breite im Blog (816 Pixel), obwohl das Originalbild breiter ist.

Syntax:

{{< figure src="" link="" alt="" title="" caption="" width="" float="" >}}

Mit dem Attribut float= kann man Float entweder auf left oder right setzen. So ist es möglich, Bilder nebeneinander zu positionieren. Damit danach der Text wieder in einem eigenen Absatz anfängt, kann man diesen Shortcode verwenden:

{{< clear >}}

Galerie

Bitte keine Galerien mehr verwenden, sondern nur noch Einzelbilder mit Figure. Das ist fürs Durchschauen des Blogs später schöner, weil man auch zu jedem Bild etwas schreiben kann. Auch ohne externe Tools.

Ist zwar mehr Arbeit, liefert aber später mehr Anhaltspunkte für Erinnerungen.

Sollen mehrere Bilder mit Overlay angezeigt werden, dann eine Galerie verwenden:

{{< nat_gallery match="images/*" >}}

Audio/Video

Bitte für Audio UND Video den Shortcode video nutzen und dabei nur die notwendigen Attribute angeben:

{{< video src="file.mp4" >}}
{{< video src="42.oga" >}}

Optionale Attribute:

  • caption: Untertitel des Videos, das darunter angezeigt wird. Es darf Markdown verwendet werden.
  • linktext: Text für den Link zum Video. Nur angeben, wenn es abweichen soll von shortcode_video_linktext in der config.toml.
  • type: MIME-Typ der angegebenen Datei. Für Medien innerhalb eines Page Bundles muss man type nicht angeben (da Hugo das selbst herausfindet und angibt) sondern nur bei Dateien, die via http oder https eingebunden werden. Ein angegebenes type hat immer die höchste Priorität.
    • Video z. B. video/mp4
    • Audio z. B. audio/ogg
  • preload: none|auto|metadata (Siehe auch hier.)
  • poster: Es ist möglich, ein selbst definiertes Vorschaubild für das Video mittels anzugeben. Das funktioniert jedoch nur, wenn preload=none verwendet wird.

Anker manuell definieren

## Local storage {#anker-123}

Verlinken kann man diese dann mit:

[Linktext](/url#anker-123)