Obsidian

Seit Jahren – vielleicht sogar Jahrzehnten – benutze ich sowohl beruflich als auch privat einen elektronischen Notizkasten. Bei der Auswahl sind für mich Open Source, lokale Speicherung und eine möglichst kostenlose Nutzung die Hauptkriterien. Teamfähigkeit und Synchronisation sind nicht erforderlich. Lange Jahre war WikidPad meine Wahl. Da diese Software jedoch nicht mehr weiterentwickelt wird, bin ich vor einiger Zeit auf Obsidian umgestiegen. Die Notizen werden dort im Format Markdown geschrieben und gespeichert, sodass sie leicht lesbar und ggf. auch portierbar sind. Eine Datenbank ist nicht erforderlich. Die Software wird von einer großen Community unterstützt, die zahllose Erweiterungen (Plug-ins) beisteuert.

Durch die Verwendung von Markdown sind der Gestaltungsfreiheit natürlich Grenzen gesetzt. Es ist auch möglich, HTML direkt innerhalb der Notiz zu verwenden. Durch Verwendung eines Community Plugins lassen sich dadurch sehr einfach mathematische Formeln in einer Notiz unterbringen.

Die kostenlose Variante von Obsidian läuft lokal auf verschiedenen Betriebssystemen (Windows, Android, iOS). Die Synchronisation über eine Cloud und die Veröffentlichung als Webseite sind kostenpflichtige Zusätze, die ich nicht nutze. Da ich meistens am Laptop arbeite, kopiere ich die Notizen bei Gelegenheit einfach auf das Notepad. Falls erforderlich, können die Notizen z. B. im Urlaub auch darauf bearbeitet werden.

Zur Veröffentlichung ausgewählter Notizen benutze ich ein Community Plugin, welches HTML Seiten generiert, die ich in den Webspace meiner bestehenden Domain kopieren kann.

Webpage HTML Export

Die Wahl für dieses Plugin fiel auf "Webpage HTML Export". Dieses erzeugt auch ohne weitere Eingriffe und Ergänzungen eine passable Webseite. Zur Personalisierung sind aber dennoch einige Eingriffe erforderlich. Das Plugin bietet dazu an, HTML Code mit einzubinden. Dieser kann dann ergänzende CSS Stylesheets und auch JavaScript Code beinhalten. Da die generierten Seiten bereits sehr scriptlastig sind, ist die zusätzliche Verwendung kein Nachteil.

Farben

Die neuen Seiten werden neben den Seiten meiner bestehenden Homepage sichtbar sein. Daher sollten die neu erzeugten Seiten einen Wiedererkennungswert zur bestehenden Homepage haben. Dies betrifft zunächst die Farbauswahl. Es werden die gleichen Farben für die gleichen Funktionen verwendet.

Hintergrundfarbe Schriftfarbe Verwendung
#FFFFFF #000000 Inhalt (schwarz auf weiß)
#FFFFFF #00008B Footer
#FFFFCC #0080FF Navigationsflächen (hover)
#D8D8E0 #00008B Seitenleisten links und rechts
#FFFF00 #00008B Aktive Seite im File-Explorer (Seitenleiste links)
#0080FF #FFFFFF Banner (Hintergrund und Verlaufsvordergrund)
#00008B #FFFFFF Navigation oben (alte Webseite, Impressum)

Wie man sieht, gibt es keine separate Farbauswahl für den Dark-Modus. Die Seiten sehen in beiden Modi daher gleich aus. Da Obsidian die Einbindung eigener Stylesheets erlaubt, wurden diese Farben, wenn möglich, auch dort verwendet. Ausgenommen sind die zusätzlichen Elemente der Webseite (Navigation oben, Banner und Footer).

Seitenaufbau

Das Plugin erzeugt eine Single-Page-Application, bei der beim Seitenwechsel immer nur ein Teil der Webseite ausgetauscht wird. Durch Konfiguration wurde als linke Seitenleiste ein baumartiges Verzeichnis der Seiten und für die rechte Seitenleiste das Inhaltsverzeichnis der aktuellen Seite gewählt. Die Seitenleisten sind ein und ausklappbar bzw. sie sind je nach Breite der Anzeige bei Aufruf der Seite schon eingeklappt.

_files/Obsidian-Webpage-Layout.jpg

Zusätzlich wird eine statische Navigationsleiste generiert, die Verweise auf die bestehende Website und das Impressum enthält. Im zentralen Bereich befindet sich ein feststehendes Banner mit der Seitenüberschrift und darunter den Inhalt der Seite, also das gerenderte Markdown.

Beim Seitenwechsel müssen somit lediglich der Text und gegebenenfalls die Bilder im Banner ausgetauscht und der Footer neu generiert werden. Ein kleiner Programmiertipp: Es gibt ein zur Laufzeit ein undokumentiertes ObsidianSite Objekt. In der Konsole des Browsers kann man es erforschen. Daran wird der Seitenwechsel erkannt:
ObsidianSite.onDocumentLoad(doc => {
pageLoaded(doc);
});