1. Einführung - technische Details

Alle Inhalte dieser Webseite werden aus Markdown-Textdateien erzeugt, die innerhalb eines git-Repository auf unserem Onedev-Server onedev.ds-jetzt.de bearbeitet und verwaltet werden. Des Weiteren setzen wir zur Generierung der Inhalte in HTML-Code den statischen Seitengenerator Hugo ein.

2. Bestehende Artikel ändern

Du möchtest uns schnell und einfach auf inhaltliche Fehler in einem Artikel hinweisen oder diese mit wertvollen Informationen ergänzen? Auf Onedev können Issue-Tickets angelegt werden, welche dann von uns bearbeitet werden. Diese Form der Mitarbeit ist mit, aber auch ohne Registrierung möglich.

Es wird dir vielleicht schon aufgefallen sein, dass es auf den bereits vorhandenen Seiten oben rechts möglich ist, in den Bearbeitungsmodus zu wechseln. Dieser Schalter blendet zu den verschiedenen Abschnitten des Artikels ein Bearbeitungssymbol ein. Ein Klick darauf öffnet ein Popupfenster, das erklärt, wie der Quelltext für den gewählten Abschnitt bearbeitet werden kann. Hier ein kurzer Überblick:

Per E-Mail: Änderungen per E-Mail einreichen (setzt keine Registrierung voraus)

Ein Link wird bereitgestellt, über den du deinen E-Mail-Client öffnen kannst. In dem E-Mail-Fenster, in dem bereits die E-Mail-Adresse eingetragen ist, kannst du dann deine Änderungswünsche zu dem gewählten Abschnitt angeben.

Per Onedev (git-Versionsverwaltung): Änderungen als Merge Request

Dies ist besonders für alle diejenigen interessant, die mit dem Git-Veröffentlichungssystem vertraut sind. Hier stellen wir registrierten GitLab-Nutzern einen Link bereit, der sie direkt zum Onedev-Text-Editor weiterleitet.

3. Als Autor teilnehmen

Hier sind einige Informationen für diejenigen zusammengefasst, die als Autor aktiv an unserem Projekt mitwirken möchten. Ein erster Schritt wäre die Kontaktaufnahme mit dem Team von ds-jetzt mithilfe unseres Matrix-Chat-Servers ( Details hier .

3.1. Artikel veröffentlichen

3.1.1 Ordnerstruktur

Der Bereich für alle Autoren befindet sich in /collections und in den dazu gehörigen Bereichen. In einen der thematisch sortierten Unterordner legen wir einen neuen Ordner mit einem abgekürzten Titel unserer Wahl an. Beispielsweise befindet sich der Artikel, den du gerade liest, in der folgenden Ordnerhierarchie:

/collections/06-community/howto/blogbeitrag-erstellen

In den erstellten Ordner werden nun sämtliche Textinhalte des Artikels als Markdown-Datei gespeichert: Es empfiehlt sich, diese in mehrere Abschnitte zu unterteilen und diese Inhalte dann in einzelne durchnummerierte Markdown-Dateien einzusetzen, z.B. 010_einleitung.md, 020_text.md, 030_tabelle.md.

Ganz wichtig: In der Reihenfolge der Nummerierung der Markdowndateien werden auch die Textinhalte auf der Webseite angezeigt.

Diese Unterteilung bringt einige Vorteile: So kann für den verwendeten Textabschnitt eine bestimmte Stilvorgabe gemacht werden, z.B. eine besondere Hervorhebung, oder ob nach/vor dem Absatz ein Bild angezeigt werden soll u.v.m. Dazu später mehr …

3.1.2 setup.yml

Des Weiteren muss in dem Ordner die Konfigurationdatei “setup.yml” hineingelegt werden, die einige Variablen wie z.B. Titel, Untertitel des veröffentlichen Beitrags uvm. festlegt. String-Werte, die Leerzeichen beinhalten, werden in Anführungszeichen angeführt.

3.1.2.1 setup.yml: Zuweisung der Variable “icon:”

in Arbeit

3.1.3 Nummerierte Markdowndateien

Hier bekommen wir es mit dem eigentlichen Inhalt der Webseite zutun. Es können fast alle gängigen Markdown-Formatierungen genutzt werden - sie werden von unserem Seitengenerator Hugo in die HTML-Seitensprache übersetzt.

Für einen neuen Absatz im Text muss auch hier der für Markdown typische Doppelzeilenumbruch eingesetzt werden. Eine weitere Möglichkeit, Inhalte in mehreren Absätzen zu unterteilen, besteht darin, mehrere Markdown-Files mit Textinhalten anzulegen. Im Verarbeitungsprozess unseres Seitengenerators werden die Inhalte dieser Dateien anhand der Dateinamen-Nummerierung zusammengefügt.

Markdowndateien Stilvorlagen zuweisen

In den ersten Zeilen der Markdownfiles befinden sich zwischen zwei “—” Bindestrich-Markierungen oft einige Angaben, z.B. ‘style: default’. Diese als ‘front-matter’ oder zu deutsch “Deckblatt”-Bereiche werden auf der eigentlichen Webseite nicht wiedergegeben, sondern beinhalten Informationen zur Gestaltung der Textabschnitte oder auch Stilvorgaben. So enthält die erste Markdowndatei text01.md möglicherweise ein Inhaltverzeichnis für den Artikel, daher haben wir diesem “style: table-of-contents " zugewiesen (Inhaltsverzeichnisse sind wahrscheinlich eher nur bei längeren Textbeiträgen nützlich):

Wie du am Endergebnis jetzt sehen kannst, wurde der Inhalt dieser Markdowndatei in einem Design für ein Inhaltsverzeichnis eingebettet.

Die Standardangabe, der nur den Markdown-Inhalt wiedergibt, ist “style: default” bzw. es fällt auf diesen zurück, im Falle, dass die Variable “style” überhaupt nicht angegeben wird.

Stilvorlagen-Übersicht

Wir haben für diese Webseite noch weitere Stilvorlagen erarbeitet - ich möchte hier davon eine Übersicht geben - manche sind davon möglicherweise noch in Arbeit und werden erst in naher Zukunft in diese Webseite implementiert:

Ich bin durchaus dankbar für weitere Vorschläge. Wenn dir ein Baustein in der Layoutgestaltung noch fehlt, bitte dies melden.

Bild einfügen

Wie schon erwähnt, werden im Projektordner des Artikelbeitrag alle Bilder in dem Unterordner “/img” einsortiert. Den Dateinamen des Coverbilds “post-cover-960width.png” haben wir bereits in der setup.yml-Datei angegeben. Im unsichtbaren Frontmatter-Bereich der Markdown-Textdateien “—” können neben “style: " nun noch weitere Variablen festgelegt werden, um zu diesen Textabschnitten passende Bilder/Fotodateien ins Layout einzubinden.

1
2
3
4
5

style: default
img_before: "image01.png"   # Ein Bild vor dem text04.md-Abschnitt einfügen ...
img_before_caption: "Optional hier eine Bildbeschreibung einfügen" #  ... mit einer Bildbeschreibung
img_after: "image02.png" # Ein Bild vor dem text04.md-Abschnitt einfügen ...
img_after_caption: "Eine Bildbeschriftung" # ... mit einer Bildbeschreibung

Weitere Befehle, um Bilder ins Layout einzubinden