Da ich heute aus anderen Gründen viel mit Kate herumprobiert hatte, suchte ich nach einer Lösung dafür und habe sie gefunden, siehe hier.

Vorher sah es so aus:

Nachdem ich in der Datei ~/.config/katerc in der Zeile Icon size for left and right sidebar buttons=32 den Wert auf 16 geändert hatte, sah es dann endlich wieder richtig aus:

Eine Möglichkeit, das in den Einstellungen zu ändern, hatte ich zuvor nicht gefunden.

Als Basis dafür habe ich die Sitemap des Foto-Blogs verwendet.

Zu meinem Erstaunen habe ich dieses Mal nicht irgend ein Gefrickel aus cat, sed, grep und co verwendet, sondern nur kate, den KDE Advanced Editor.

Zuerst rief ich die sitemap.xml in Firefox auf, weil der Browser die Datei so anzeigt, dass nicht alles in einer Zeile ist.

Das habe ich dann in ein neues Dokument in kate eingefügt. Dann ging es weiter mit:

• Manuell alle Zeilen gelöscht, die nicht für einen Blogbeitrag standen, z. B. .../categories/...
• Alle Vorkommen von <loc> und </loc> entfernt und das sah dann so aus:

…
https://fotos.natenom.com/2022/05/der-tag-23-05-2022/
https://fotos.natenom.com/2022/05/flugtier-beim-abbremsen/
https://fotos.natenom.com/2022/05/fotos-der-letzten-tage-2/
https://fotos.natenom.com/2022/05/fotos-der-tour-am-14-05-2022-fotorahmen-und-selfie/
https://fotos.natenom.com/2022/05/fotos-der-letzten-tage/
…

• Mit “Suchen und Ersetzen” im Modus “Regular Expression” nach ^ gesucht (Anfang der Zeile) und durch ein Leerzeichen ersetzt, sodass am Anfang jeder Zeile ein Leerzeichen steht.
• Mit “Block selection mode” alles ab dem Ende der Domain bis zum Ende jeder Zeile markiert, z. B. /2022/05/fotos-der-tour-am-14-05-2022-fotorahmen-und-selfie/.

• Weiter im “Block selection mode” in die erste Zeile in die erste Spalte geklickt und die Auswahl eingefügt. Es wird automatisch jede Zeile passend eingefügt.
• Den “Block selection mode” wieder deaktiviert.
• Mit “Suchen und Ersetzen” im Modus “Regular Expression” nach /$ gesucht und durch / redirect; ersetzt.
• Um an den Anfang der Zeile noch das notwendige rewrite einzufügen, mit “Suchen und Ersetzen” nach ^/ im Modus “Regular Expression” suchen und mit rewrite / ersetzen.

Im Ergebnis sieht die Textdatei nun so aus:

…
rewrite /2022/05/der-tag-23-05-2022/ https://fotos.natenom.com/2022/05/der-tag-23-05-2022/ redirect;
rewrite /2022/05/flugtier-beim-abbremsen/ https://fotos.natenom.com/2022/05/flugtier-beim-abbremsen/ redirect;
rewrite /2022/05/fotos-der-letzten-tage-2/ https://fotos.natenom.com/2022/05/fotos-der-letzten-tage-2/ redirect;
rewrite /2022/05/fotos-der-tour-am-14-05-2022-fotorahmen-und-selfie/ https://fotos.natenom.com/2022/05/fotos-der-tour-am-14-05-2022-fotorahmen-und-selfie/ redirect;
rewrite /2022/05/fotos-der-letzten-tage/ https://fotos.natenom.com/2022/05/fotos-der-letzten-tage/ redirect;
…

Insgesamt habe ich auf diese Weise 369 Weiterleitungen eingerichtet.

Diese 369 Zeilen habe ich in eine eigene Datei eingefügt und mittels include an die passende Stelle in der Nginx-Konfiguration des Blogs eingefügt.

Dann einmal kurz getestet, ob die Syntax passt mit:

nginx -t

Und den Webserver neugestartet, da alles okay war.

Fertig. 😊

Doch nach mehreren Monaten und vielen geschriebenen Blogbeiträgen fehlen mir ein paar Funktionen in Kate, die Zeit und Nerven fressen oder umständliche “Lösungen” brauchen.

Was mir in Kate besonders fehlt:

• Live-Vorschau (wenn auch nicht alle Shortcodes gerendert werden können).
• Ordentlich funktionierende Snippets mit Zusatzfunktionen (die in Kate sind nur rudimentär und zudem buggy).
• Inhaltsverzeichnis mit der Möglichkeit, zu einem Eintrag zu springen.
• Distraction free writing (oder zumindest einigermaßen ordentliche Vorschau). Hierfür habe ich in VSCodium noch keine Lösung gefunden.

Ich probierte einige der bereits getesteten Editoren noch einmal aus und am besten gefiel mir MarkText, doch das kann leider keine Snippets.

Deshalb habe ich mich für VSCodium entschieden, einer etwas freieren Variante von Visual Studio Code. Die basiert zwar auf Electron, aber ich jetzt bereit, diesen Kompromiss einzugehen, um dafür viele schöne Funktionen zu bekommen.

In VSCodium gibt es – im Unterschied zu Kate – einige Funktionen, die ich folgend beschreibe.

Erweiterungen

Für VSCodium gibt es extrem viele Erweiterungen (die ich bisher nicht benötige, aber vielleicht finde ich doch noch hilfreiche Dinge).

Für Kate gibt es Plugins, aber nicht annähernd so viele.

Live-Vorschau

An der Live-Vorschau gefällt mir besonders, dass

• sie automatisch mit scrollt.
• es links immer einen Indikator gibt, der anzeige, in welcher Zeile der Cursor gerade ist.
• man optional trotzdem unabhängig vom Code in der Vorschau scrollen kann, diese aber wieder synchron läuft, sobald man im Quelltext scrollt.
• der Cursor bei einem Doppelklick auf einen Bereich in der Vorschau automatisch auf diese Zeile im Quelltext gesetzt wird.

Die Vorschaufunktion gibt zwar nicht genau wieder, wie es später im Blog oder im Wiki aussehen wird, aber es ist ausreichend, sodass ich während des Schreibens den Hugo-Server gar nicht erst anwerfen muss, außer zum Schluss mal wegen Shortcodes, die nicht dargestellt werden, wie figure.

Die Vorschau öffent man mit der Tastenkombination Ctrl + k gefolgt von v.

Inhaltsverzeichnis

Es gibt drei Möglichkeiten, ein Inhaltsverzeichnis des aktuellen Dokuments zu sehen:

• Mit der Tastenkombination Strg + Shift + o öffnet man das Inhaltsverzeichnis und kann zu einer bestimmten Überschrift springen.
• Die aktuelle Überschrift wird auch immer oben in den Breadcrumbs angezeigt. Dort kann man drauf klicken und kann auch wieder zu den Bereichen springen.
• In der Leiste links öffnet man den Explorer oder drück die Tastenkombination Ctrl + Shift + e und öffnet unten den Bereich OUTLINE.

  

Snippets

In VSCodium kann man tolle Dinge mit Snippets machen, die ich teilweise auch schon vom Editor Micro kenne.

Die Dokumentation für Snippets in VSCodium gibt es hier.

Hier einige der Möglichkeiten.

Eigene Snippets trägt man in eine selbst gewählte Datei ein, die man über Ctrl + Shift + p gefolgt von Snippets: Configure User Snippets definieren und öffnen kann.

Tabstops

In Snippet kann man Positionen definieren, zu denen man nach dem Einfügen mit der Tab-Taste springen kann, sodass man notwendige Eingaben schneller erledigen kann, also mit den Cursor-Tasten zu navigieren. Das nutze ich z. B. in meinem Front Matter-Snippet.

Vorauswahl

Hier bekommt man ein kleines Popup-Fenster und kann einen der Einträge auswählen:

Das Snippet dazu sieht so aus:

"notice": {
		"scope": "markdown",
		 "prefix": "md-notice",
		 "body": [
			"{{< notice ${1|hinweis,tipp,info,warnung,update|} >}}",
			"$0",
			"{{< /notice >}}"
		 ],
		 "description": "Notice, tip, info, …"
	}

Snippets auf markierte Bereiche anwenden

Um einen aktuell im Editor markieren Bereich innerhalb eines Snippets nutzen zu können, gibt es die Variable ${TM_SELECTED_TEXT} und weitere (siehe hier). Diese Möglichkeit bietet sich an, wenn man z. B. nachträglich einen Bereich als Codeblock oder Zitat formatieren will.

Hat man so ein Snippet geschrieben, markiert man zuerst den benötigen Bereich, drückt Alt + Leertaste, und wählt anschließend das Snippet mit den Cursor-Tasten aus.

Seltsam wird es, wenn man den Eintrag nicht per Cursor-Taste auswählt, sondern, wie sonst auch, den Namen des Snippets tippt. Dann überschreibt man nämlich den markieren Bereich. Doch das macht nichts. Sobald man den passenden Eintrag ausgewählt hat und sofern das Snippet die genannte Variable nutzt, wird beim Bestätigen mit Enter das komplette Snippet inklusive dem überschrieben geglaubten Bereich eingefügt.

Datum fürs Front Matter direkt statt über Shell

Beim Einfügen meines eigenen Snippets frontmatter ist jetzt direkt das aktuelle Datum enthalten. Bisher musste ich das immer erst über ein Shellkommando machen und dann ins Front Matter einfügen. Theoretisch ginge das auch mit Kate und JavaScript, aber das habe ich bisher nicht geschafft.

So sieht dann das Front Matter nach dem Einfügen aus:

---
title:
slug:
date: 2022-09-11T12:40:57+02:00
draft: false
author: Natenom
#description:
categories:
  -
tags:
  -
---

Und das ist das zugehörige Snippet:

"md-frontmatter": {
  "scope": "markdown",
    "prefix": "md",
    "body": [
    "---",
    "title: $1",
    "slug: $2",
    "date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T${CURRENT_HOUR}:$CURRENT_MINUTE:$CURRENT_SECOND+02:00",
    "draft: false",
    "author: Natenom",
    "#description: ",
    "categories:"
    "  - $3",
    "tags:",
    "  - $4",
    "---"
    ],
    "description": "Front Matter Blog"
}

Tastenkombinationen

Eine Liste der Tastenkombinationen für VSCodium.

Merk dir was

Besonders gut gefällt mir, dass man ein “Verzeichnis” mit Ctrl + k gefolgt von Ctrl + o öffnen kann und der Editor sich dafür dann die geöffneten Dateien und Ansichten merkt.

So kann ich zwischen Blog und Wiki sehr einfach wechseln und die bearbeiteten Dateien sind weiterhin geföffnet. Das erleichtert die Arbeit.

Alternativ nutzt man die Tastenkombination Ctrl + r und kann dann bisher geöffnete Dateien und oben genannte Verzeichnisse wieder öffnen. Hält man Ctrl dabei gedrückt, werden diese in einem neuen Fenster geöffnet.

Hier z. B. die Ansicht für die Arbeit im Wiki, wo gerade die Selfies vom kleinen Elefanten geöffnet sind:

Meine Anpassungen und installierte Erweiterungen

Ich habe ein paar kleine Anpassungen für VSCode, die ich hier aufliste, falls ich das irgendwann mal wieder brauche.

Weniger ist mehr

Ich habe die “Status bar” (View -> Appearence -> Status bar) unten und die “Menu bar” (View -> Appearence -> Menu bar) oben ausgeblendet.

Falls man die “Status Bar” wieder benötigt, kann man sie mit Ctrl + Shift + p und der Eingabe von View: Toggle Status Bar Visibility oder Teilen davon wieder aktivieren.

Für die “Menu bar” gibt man View: Toggle Menu bar ein. Oder man drückt die Alt-Taste, dann erscheint die Menübar, wird direkt fokusiert, und verschwindet dann wieder, sobald man einen Eintrag gewählt hat oder erneut die Alt-Taste drückt.

Hervorhebung der aktuellen Zeile

Die Hervorhebung der aktuellen Zeile gefällt mir bei VSCodium gar nicht, deshalb habe ich das so angepasst, wie ich es von Kate gewohnt bin.

Dazu öffnet man die Datei settings.json via Strg + Shift + p und der Eingabe von Preferences: Open User Settings (JSON) und trägt ein:

"workbench.colorCustomizations": {
    "[Default Dark+]": {
        "editor.lineHighlightBackground": "#4587de2a",
        "editor.lineHighlightBorder": "#4587de2a"
    },
    "[Default Light+]": {
        "editor.lineHighlightBackground": "#4587de2a",
        "editor.lineHighlightBorder": "#4587de2a"
    }
}

Zeilenhervorhebung ohne Anpassung im Dark Theme mit kaum sichtbarer Umrandung:

Und mit Anpassung:

Damit zusätzlich auch noch die Zeilennummer hervorgehoben wird, fügt man hinzu:

"editor.renderLineHighlight": "all",

Installierte Erweiterungen

• streetsidesoftware.code-spell-checker-german für Rechtschreibüberprüfung

Fazit

Ich habe diesen Blogbeitrag schon mit VSCodium geschrieben und währenddessen hier dokumentiert und ausprobiert.

Mein Fazit bisher ist, dass ich mich mit diesem Editor besser auf Inhalte fokussieren kann, da ich nicht ständig andere Tools benutzen muss. Wie z. B. eine Konsole für das aktuelle Datum und die Uhrzeit fürs Front-Matter, weil man auch Bilder (zumindest in der Markdown-Standard-Syntax) über den Dateiexplorer von VSCodium direkt einfügen kann.

Desweiteren brauche ich kein laufendes Hugo und keinen Browser, in dem die Vorschau angezeigt wird. Diese zeigt zwar genau das Ergebnis, wie es auch später online aussehen wird, aber das ist für meine Sachen meist nur zur Endkontrolle vor dem Veröffentlichen notwendig.

Ich kann mir vorstellen, dass man das Bauen mit Hugo auch noch in VSCodium einrichten könnte, aber ich mache das lieber extern. Ich brauche einen guten Editor zum Bearbeiten, aber keine eierlegende Wollmilchsau für alles zusammen.

Ich beschreibe hier, wie ich meine Blogbeiträge schreibe, welche Werkzeuge ich dafür benutze, zeige, wie das im Einzelnen aussieht, was man beachten sollte und so weiter.

Statt eine Anwendung für alles zu verwenden, wie das der Fall bei einigen auf Electron basierenden Editoren für Markdown ist, nutze ich mehrere Tools, von denen jedes eine Sache gut kann. Und ich bin damit auch zufrieden.

Start eines Blogbeitrags

Zuerst erstelle ich ein sogenanntes Page Bundle. Das ist ein Verzeichnis, in welchem sich alle für einen Blogbeitrag relevanten Daten befinden. Das mache ich mit Dolphin, dem Dateibrowser von KDE.

In diesem Page Bundle erstelle ich zunächst die Datei index.md und öffne sie mit Kate. Diese Datei enthält den gesamten Markdown Quelltext des Blogbeitrags.

Dazu kommen während des Schreibens optional beliebige weitere Dateien wie Fotos, Screenshots oder Videos, die aber auch in Unterverzeichnissen organisiert werden können.

Hier die Verzeichnisstruktur (das Page Bundle) zu Beginn des Blogbeitrags:

2022-02-fixme-arbeitsweise-blog-hugo
└── index.md

Editor – Kate

Zuerst füge ich einen selbst erstellen Text Snippet (siehe nächster Abschnitt) für das Front Matter in die geöffnete index.md ein, das in etwa so aussieht:

title:
slug: FIXME # Würde ich hier nichts eintragen, würde Hugo den Namen des Page Bundles # verwenden, also "2022-02-fixme-arbeitsweise-blog-hugo".
date: FIXME
author: Natenom
description: FIXME
categories:

- tags:
- ***

Text Snippets

Seit ich Markdown für meinen Blog verwende, brauche ich immer wieder einen gewissen Satz von immer den selben Textbausteinen für Formatierungen, die Hugo nicht von Haus aus mitbringt und die als Shortcodes realisiert sind. Z. B. zum Einbinden von Bildern oder Videos oder für schöne Hinweis-Boxen. Dafür nutze ich Text Snippets.

Für Kate gibt es Text Snippets als Plugin und man muss dieses aktivieren unter Settings -> Configure Kate -> Plugins -> Snippets Tool View. Sofort erscheint rechts in der Seitenleiste Snippets. Klickt man dort drauf, werden bereits vordefinierte Snippets angezeigt. Diese habe ich gelöscht, da ich sie nicht benötige.

Zuerst legt man ein eigenes Snippet Repository an. Wichtig hierbei ist die Angabe eines Namensraums (Namespace). Innerhalb diesem sind die Snippets später auswählbar. Unten kann man noch auswählen, ob die Snippets für alle oder nur für bestimmte Dateitypen nutzbar sind.

Hier die Liste meiner Snippets zum Schreiben von Blogbeiträgen:

Dabei bedeuten die Abkürzungen:

• bi – builtin
• sc – shortcode
• th – theme (Für Shortcodes, die vom Theme bereitgestellt werden.)

Einfügen kann man die Snippets, in dem man in Kate die Tastenkombination Strg + Leertaste drückt. Es erscheint ein kleines Overlay, in dem man mit den Cursortasten den passenden Eintrag auswählt:

Rechtschreibkorrektur

Kate kann auch eine auf dem System installierte Rechtschreibkorrektur einbinden. Ich habe mich für Hunspell entschieden (apt install hunspell hunspell-de-de).

Zusätzlich zu den Systemeinstellungen kann in KDE (Systemsettings -> Regional Settings -> Spell Check) lässt sich die zu überprüfende Sprache auch in Kate unten in der Leiste einstellen (de_DE steht da in meinem Screenshot).

Konsole – für die Helferlein

Mit F4 wird im Kate-Fenster eine Shell gestartet und man kann dort Dinge tun, wie z. B. meine Helferlein für Hugo nutzen. Dabei wird die Shell automatisch in dem Verzeichnis gestartet, in dem sich auch die bearbeitete Datei befindet.

Man kann die Konsole ausblenden und später wieder einblenden (beides mit F4). Sie wird erst richtig geschlossen, wenn man sich dort ausloggt (Strg + d oder exit).

In dem Screenshot ist übrigens einer meiner Helferlein für Hugo zu sehen, mit dem ich nach bereits verwendeten Tags suchen kann.

Vorschau (Hugo + Browser)

Für die Vorschau verwende ich einen im Hintergrund laufenden Hugo-Server und Konqueror, den Webbrowser von KDE.

Hugo: Server mit eigenem Verzeichnis nur für Entwürfe

Da das Rendern meines gesamten Blogs relativ lange dauert, nutze ich fürs Schreiben von Blogbeiträgen ein eigenes Content-Verzeichnis /home/hugo-light/content, das ich Hugo als Parameter übergebe:

hugo server -E -D -F -v -c /home/hugo-light/content/

• -E rendert auch verfallene Beiträge (expired).
• -D rendert auch Entwürfe, die auf Entwurfsmodus eingestellt sind (tag draft:).
• -F rendert auch Beiträge, deren Datum in der Zukunft liegt.
• -c gibt das alternative Content-Verzeichnis an.

Da in diesem Verzeichnis nur ein paar wenige Entwürfe liegen, ist natürlich auch die Zahl der Kategorien und Tags entsprechend klein.

Der Server von Hugo läuft die ganze Zeit im Hintergrund, merkt automatisch, wenn eine Seite geändert wurde (nachdem man sie in Kate gespeichert hat) und rendert dann die gesamte Webseite lokal neu. Der Webbrowser lädt bei Änderungen die Seite neu, sodass man stehts den aktuellen Stand sieht.

Browser: Konqueror zeigt Vorschau an

Rechts neben Kate platziere ich in der benötigten Größe eine Instanz des KDE Browsers Konqueror, der mir die Webseite anzeigt und automatisch neu lädt, sobald Hugo im Hintergrund die Seite nach einer Änderung neu gerendert hat.

Schreiben, schreiben, schreiben …

Jetzt geht es nur noch um die Inhalte. Text schreiben, Screenshots machen und Bilder z. B. mit dem figure Shortcode in den Blogbeitrag einbinden.

Während des Schreibens füge ich auch immer wieder neue Tags zum Front Matter hinzu, falls ich bestimmte Programme erwähne oder neue Themen beschreibe.

Als dieser Blogbeitrag hier fertig war, sah das Page Bundle so aus:

2022-02-fixme-arbeitsweise-blog-hugo
├── cover.png
├── images
│   ├── 2022-02-16-meine-snippets-in-kate-overlay.png
│   ├── 2022-02-16-meine-snippets-in-kate.png
│   ├── 2022-02-16-snippet-repo-in-kate.png
│   ├── 2022-02-17-konsole-innerhalb-von-kate.png
│   ├── 2022-02-17-screenshot-bildschirm-kate-und-konqueror-dark.png
│   └── 2022-02-17-screenshot-bildschirm-kate-und-konqueror-light.png
└── index.md

Das von mir verwendete Theme verwendet die Datei cover.png automatisch als Artikelbild, Details dazu gibt es hier.

Wenn der Blogbeitrag fertig geschrieben ist

Sobald der Blogbeitrag fertig geschrieben ist, fehlen nur noch wenige Schritte bis zur Veröffentlichung:

• Im Front Matter date: an die aktuelle Zeit anpassen. Den String fürs aktuelle Datum und der Uhrzeit im passenden Format liefert mein Helferlein hugo-date-now.
• Umbenennen des Verzeichnisnamens des Page Bundle (richtiges Datum statt fixme).
• Verschieben des Page Bundle in das Content-Verzeichnis der Produktivumgebung des Blogs, in dem alle Beiträge enthalten sind.
• In Git:
  • git add .
  • git commit -m "Neuer Blogbeitrag Arbeitsweise mit Kate, Konqueror und Hugo"
• Hugo den gesamten Blog rendern lassen: hugo --cleanDestinationDir --minify
• Alle Dateien per Rsync auf den Webserver hochladen.

Ab dann ist der Blogbeitrag öffentlich sichtbar und erscheint auch im Feed.

Und auf dem Smartphone?

Auf dem Smartphone kann ich auch Blogbeiträge schreiben, mit der App Markor. Dank Nextcloud werden meine Entwürfe synchronisiert.

Um sie zu veröffentlichen, muss ich aber erst an den PC und dort die letzten Schritte ausführen.

Verbesserungspotential

Da geht noch eine ganze Menge. Z. B. könnte man den Workflow so gestalten, dass ich neue Blogbeiträge nur mit git zu einen Repository pushen müsste, das dann einen Server dazu veranlasst, den Blog zu generieren und zu veröffentlichen.

Oder es ermöglichen, dass Blogbeiträge veröffentlicht werden, die man in einem Page Bundle an einen bestimmten Ort auf dem Server hochgeladen hat. Und noch Vieles mehr.

Dem Theme widme ich mich in den nächsten Tagen und werde berichten.

Tipps und Hinweise

• Verzeichnisstrukturen kann man sehr schön mit dem Kommando tree ausgeben lassen, das es in jeder gängigen Linux-Distribution als Paket geben sollte. In Debian im Paket tree.
• Ich habe mir auf eine Empfehlung hin auch Autokey angesehen. Das ist ein eigenes Tool zur Bereitstellung von Textsnippets. Es gefällt mir aber nicht, da es ein eigenes Fenster läuft, das zwar an der Position des Cursors geöffnet wird, jedoch den Editor überlagert und man die Maus benutzen muss, um das gewünschte Element auszuwählen. Ich mag die Maus jedoch nicht bedienen, wenn ich gerade schreibe. Auch gibt es noch z. B. Espanso, das mir aber auch nicht zusagt, weil es die ganze Zeit läuft und alles auswertet, was man per Tastatur eingibt.
• Es gibt auch die Möglichkeit, innerhalb von Snippets in Kate JavaScript zu verwenden, um Dinge zu tun. Hier ein Beispiel für ein Snippet mit JavaScript.
• Eine Liste der verschiedenen Rechtschreibkorrekturen gibt es hier.
• Eine Liste der Markdown-Formatierungen, die Hugo von Haus aus unterstützt.

alias hugo-date-now='date +"%Y-%m-%dT%H:%M:%S%:z" | xsel -i -b ; echo "Check your clipboard :)"'

Da man in meinem Editor Kate direkt eine Konsole starten kann, tue ich das, gebe hugo-date-now ein und als Ergebnis befindet sich der benötigte String mit aktuellem Datum und Uhrzeig in der Zwischenablage. Den kann ich dann im Front Matter eintragen, z. B. für diesen Blogbeitrag hier:

2022-02-09T20:14:06+01:00