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 Zunkft 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:
  - Fotografie
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:

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:

FIXME

  • codefence (mit angabe der Sprache, link to doku offiziell)
  • hightlight shortcode builtin, link doku
  • Einrückungen

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.

Seite(n) verschieben#

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

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.

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.

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)