Einführung für Redakteure

Inhalte erfassen, formatieren und veröffentlichen

An wen richtet sich diese Anleitung?

Diese Anleitung richtet sich an Redakteure mit grundlegenden Computer-Kenntnissen. Sie müssen keine Programmierung beherrschen, sollten aber mit Dateiverwaltung (Ordner erstellen, Dateien umbenennen, Dateien kopieren) vertraut sein. Grundkenntnisse in der Arbeit mit einem FTP-Programm sind hilfreich, werden aber auch erklärt.

Das Grundkonzept von lowmark

Der Grundansatz von lowmark besteht darin, die Inhalte der Website lokal als Textdateien mit ggf. eingebetteten Bildern und Downloads vorzuhalten. Die Inhalte werden in einer Ordnerstruktur abgelegt, die der Gliederung der Website entspricht. Aus dieser Struktur werden dann auch die URLs der einzelnen Webseiten erzeugt.

Zur Veröffentlichung werden die Dateien in den content-Ordner der lowmark-Installation auf den Webserver übertragen. Wenn ein Inhalt ergänzt wird – z.B. ein neuer Blogartikel – muss auch nur dieser auf den Webserver kopiert werden.

Empfehlungen zur Ordnerstruktur

Bei umfangreicheren Websites ist es ist ratsam, die Ordner-Struktur analog zum Navigationskonzept zu bilden, z.B.:
https://ihre-domain.de/hauptmenuepunkt-1/untermenuepunkt-1/index.html

Wenn man in einem Dokument Bilder oder Downloads einbetten will, ist es sinnvoll, "Page-Bundles" zu bilden, wie man es auch von HUGO kennt, und alle Dateien, die zusammen gehören, in einem Ordner abzulegen.

Was ist ein Page-Bundle? Ein Page-Bundle ist ein Ordner, der eine Inhaltsdatei (index.md) zusammen mit allen zugehörigen Medien (Bilder, PDFs etc.) enthält. Der Vorteil: Alle Dateien einer Seite liegen beieinander, und Sie können Bilder mit relativen Pfaden einbinden.

Beispiel für eine Page-Bundle-Struktur:

   index.md                        → Inhalt der Titelseite
   hauptmenuepunkt-1/
     ├── index.md                  → Inhalt von Hauptmenüpunkt 1
     └── untermenuepunkt-1/
              ├── index.md         → Inhalt von Untermenüpunkt 1
              ├── image-1.jpg      → Bild 1
              ├── image-2.jpg      → Bild 2
              └── download-1.pdf   → Download 1
              └── ...

Bei vielen Bildern oder Dateien könnte es evtl. sinnvoll sein, weitere Unterordner zu bilden:

   index.md                           → Inhalt der Titelseite
   hauptmenuepunkt-1/
     ├── index.md                     → Inhalt von Hauptmenüpunkt 1
     └── untermenuepunkt-1/
              ├── index.md            → Inhalt von Untermenüpunkt 1
              ├── img                 → Bilder-Ordner
              │   ├── image-1.jpg     → Bild 1
              │   └── image-2.jpg     → Bild 2
              └── docs                → Dateianhang-Ordner
                   └── download-1.pdf → Download 1

Es ist auch möglich, alle Bilder und Dateien in einem zentralen Verzeichnis abzulegen, statt sie der jeweiligen Seite über Ordner zuzuordnen. Das kann sinnvoll sein, wenn man nur wenige Bilder hat und eine einfache Struktur anstrebt, z.B.: https://ihre-domain.de/hauptmenuepunkt-1/untermenuepunkt-1.html

   img/                        → Ordner für alle Bilder
     ├── image-1.jpg           → Bild 1
     └── image-2.jpg           → Bild 2
   index.md                    → Inhalt der Titelseite
   hauptmenuepunkt-1/
     ├── index.md              → Inhalt von Hauptmenüpunkt 1
     ├── untermenuepunkt-1.md  → Inhalt von Untermenüpunkt 1
     └── untermenuepunkt-2.md  → Inhalt von Untermenüpunkt 2

Es ist im einfachsten Fall natürlich auch möglich, seine Inhalte ohne Unterordner zu verwalten und einfach eine Sammlung von md-Dateien im Ordner content/ abzulegen, die dann so erreichbar sind:
seite-1.md → https://ihre-domain.de/seite-1.html

Inhalte bearbeiten

Jede Seite besteht aus einer einzelnen Textdatei. Der Dateiname wird Teil der URL (Internetadresse) dieser Seite (s.o.). Die Formatierung geschieht über Markdown. Meta-Informationen (wie z.B. Seitentitel, Beschreibung oder Schlagwörter) werden am Anfang der Seite in einem speziellen Format als sogenanntes "Frontmatter" abgelegt.

Was ist Frontmatter? Das Frontmatter ist ein Kopfbereich am Anfang jeder Markdown-Datei, der Zusatzinformationen über die Seite enthält. Diese Informationen sind nicht direkt im Text sichtbar, sondern dienen dem System zur korrekten Darstellung und Organisation der Inhalte (z.B. Seitentitel im Browser-Tab, Beschreibung für Suchmaschinen, Kategorisierung durch Schlagwörter).

Empfehlungen für Datei- und Ordnernamen

Es ist ratsam, sich auf Buchstaben, Zahlen und Minus (-) als Trennzeichen zu beschränken. Verwenden Sie keine Sonderzeichen (wie ä, ö, ü, ß, &, %, $, /) und Leerschritte! Da Groß- und Kleinschreibung unterschieden wird, rate ich dazu, nur Kleinbuchstaben zu verwenden. Die Dateiendung ist .md für das Markdown-Format – z.B.: beispiel-seite-1.md

Warum diese Einschränkungen? URLs (Internetadressen) funktionieren weltweit am zuverlässigsten mit einfachen Zeichen. Umlaute und Sonderzeichen können zu Problemen führen, wenn die Website von verschiedenen Browsern oder Systemen aufgerufen wird.

Empfehlung für einen Editor

Sie können mit einem normalen Text-Editor arbeiten (z.B. Notepad++ unter Windows). Angenehmer ist es aber, einen Markdown-Editor zu verwenden. Wir empfehlen Typora (kostenpflichtig) oder Marktext (kostenlos).

Vorteile eines Markdown-Editors: Sie sehen die Formatierung während des Schreibens, Bilder werden direkt angezeigt, und die Syntax wird farblich hervorgehoben. Das erleichtert die Arbeit erheblich.

Einfache Beispielseite

   ---
   title: Beispielseite
   description: Kurze Beschreibung des Inhalts (z.B. für Suchmaschinen oder Teaser)
   image: /beispiel/teaserbild.jpg
   tags: ["Tag1", "Tag2"]
   ---

   # Überschrift 1
   ## Überschrift 2
   ### Überschrift 3

   **fetter Text**
   *kursiver Text*

   - Listenpunkt 1
   - Listenpunkt 2
   - Listenpunkt 3

   1. Nummerierte Liste
   2. Zweiter Punkt
   3. Dritter Punkt

   [Link-Text](https://beispiel.de)

   ![Bild-Beschreibung](image-1.jpg)

Frontmatter im Detail

• Der Kopfbereich mit den Meta-Informationen (Frontmatter) wird von Zeilen mit drei Minuszeichen eingeschlossen und muss ganz oben stehen. Das Frontmatter muss immer am Anfang der Datei stehen und exakt mit drei Minuszeichen (---), gefolgt von einem Zeilenumbruch eingeleitet und abgeschlossen werden.
• Es folgen Einträge, die immer die Form haben: feldname: Feldinhalt. Die jeweiligen Feldnamen müssen bekannt sein und hängen von der konkreten Anwendung ab. Schauen Sie in die Dokumentation Ihrer Website oder orientieren Sie sich an einem Beispiel. Jeder Eintrag steht in einer eigenen Zeile. Feldinhalte dürfen keine Zeilenumbrüche haben.
• Es ist optional möglich, Feldinhalte in doppelte Anführungszeichen zu setzen: feldname: "Feldinhalt". Da diese Anführungszeichen als Teil der Syntax und nicht des Inhalts interpretiert werden, ist es nicht möglich, doppelte Anführungszeichen redaktionell an dieser Stelle (am Anfang und/oder Ende des Feldinhalts) zu verwenden. Nehmen Sie nötigenfalls andere Anführungszeichen, wie z.B. „typografische Anführungszeichen“.
• Feldinhalte, die Listen vorsehen (wie z.B. Tags), müssen in eckigen Klammern eingefasst und die einzelnen Elemente in doppelte Anführungszeichen gesetzt werden: tags: ["Tag1", "Tag2"]
• Absolute Pfade im Frontmatter: Pfade im Frontmatter (z.B. zu einem Bild) müssen ausgehend vom content/-Ordner absolut definiert werden – also beginnend mit einem Slash (der das Content-Verzeichnis symbolisiert), gefolgt von dem Verzeichnis-Pfad bis zur Datei.
  Beispiel: Wenn Sie ein Bild für den Teaser angeben möchten, das im Ordner /hauptmenuepunkt-1/untermenuepunkt-1/ liegt, schreiben Sie: image: /hauptmenuepunkt-1/untermenuepunkt-1/image-2.jpg. Der Slash am Anfang steht für das content/-Verzeichnis, dann folgt der komplette Pfad zur Datei.

Inhalt formatieren

• Die Formatierung erfolgt über Markdown – entweder manuell mit einem einfachen Texteditor oder mit einem Markdown-Editor (s.o.).
• Interne Links innerhalb der eigenen Website sollten relativ gemacht werden und können auf die .md-Datei verlinkt werden. Dann funktionieren die Links auch lokal auf Ihrem Computer.
  Was bedeutet "relativ"? Ein relativer Pfad beschreibt den Weg zur Datei ausgehend vom aktuellen Dokument – ohne Angabe des kompletten Pfads von der Festplatten-Wurzel. Das macht die Struktur portabel und funktioniert sowohl lokal als auch auf dem Server.
• Beispiele für relative Links:
  Link zu einer Seite im selben Ordner: [Link-Text](andere-seite.md)
  Link zu einer Seite in einem Unterordner: [Link-Text](unterordner/seite.md)
  Link zu einer Seite im übergeordneten Ordner: [Link-Text](../seite-im-ueberordner.md)
  Link zu einer Seite in einem Parallel-Ordner: [Link-Text](../anderer-ordner/index.md)
• Eingebettete Bilder sollten ebenfalls relativ adressiert werden. Dann werden sie bereits im Markdown-Editor angezeigt. Außerdem ist dies eine Voraussetzung damit lowmark sie automatisch skalieren kann.
• Wichtig: Auf keinen Fall dürfen Bilder als absoluter Pfad ausgehend vom Root-Verzeichnis Ihres Computers eingebunden werden. Dann funktionieren sie nur lokal, aber werden später auf der Website nicht angezeigt.
  Richtig:
  ![Bild-Beschreibung](image-1.jpg) – Bild liegt im selben Verzeichnis wie die Markdown-Datei
  ![Bild-Beschreibung](img/image-1.jpg) – Bild liegt in einem Unterordner (img/) des Page-Bundles ![Bild-Beschreibung](../bilder/image-1.jpg) – Bild liegt in einem parallelen Ordner
  Falsch:
  ![Bild-Beschreibung](C:\Users\DeinName\Lowmark\content\img\image-1.jpg) – absoluter Windows-Pfad, funktioniert nur lokal
• Pfade immer mit Vorwärts-Slash: Pfade müssen (auch unter Windows) immer mit einem vorwärts gerichteten Slash "/" geschrieben werden und nicht mit "\", damit es auch auf dem Webserver funktioniert. Webserver verwenden das Unix/Linux-Format mit /, nicht das Windows-Format mit \.

Inhalte veröffentlichen

Die Inhalte – also die Dateien des content/-Verzeichnisses – werden zur Veröffentlichung einfach auf den Webserver übertragen. Bei Änderungen muss nicht das komplette Verzeichnis übertragen werden.

Wichtig bei Teamarbeit: Sollten mehrere Personen an der Website arbeiten, oder falls Sie von verschiedenen Computern aus daran arbeiten wollen, sollten Sie zuvor sicher sein, dass Sie den aktuellen Stand der Website lokal auf Ihrem Gerät haben. Laden Sie ggf. die Datei, die sie bearbeiten wollen, oder den gesamten content/-Ordner vom Webserver herunter, bevor Sie beginnen. (Das sind dieselben Schritte wie das Hochladen, nur von rechts nach links, statt von links nach rechts.)

Voraussetzungen

• FTP-Programm (zum Dateitransfer zwischen Ihrem Computer und dem Webserver)
• FTP-Zugangsdaten zu Ihrem Webserver (bekommen Sie von Ihrem Provider)

Was ist FTP? Das File Transfer Protocol ist ein Verfahren zur Übertragung von Dateien zwischen Computern über das Internet. Mit einem FTP-Programm können Sie Dateien von Ihrem Computer auf den Webserver hochladen oder vom Server herunterladen – ähnlich wie Sie Dateien zwischen Ordnern auf Ihrem Computer kopieren.

Wir empfehlen FileZilla (kostenlos).

Änderungen hochladen Schritt für Schritt

1. FileZilla öffnen und mit dem Server verbinden
   • Geben Sie Ihre FTP-Zugangsdaten ein (Server, Benutzername, Passwort, Port)
     Tipp: Wählen Sie im Regelfall SFTP (Port 22). Das ist die verschlüsselte Variante und heute Standard.
   • Klicken Sie auf "Verbinden"
2. Geänderte Dateien hochladen:
   • Links: Navigieren Sie zum lokalen content/-Ordner auf Ihrem Computer
   • Rechts: Navigieren Sie zum content/-Ordner auf dem Server
   • Ziehen Sie die geänderten Dateien von links nach rechts
   • Oder: Rechtsklick auf Datei → "Hochladen"
   • Wichtig! Achten Sie darauf, dass Sie auf beiden Seiten im selben Verzeichnis stehen, falls Sie Inhalte eines Unterverzeichnisses hochladen wollen.
3. Ganzen Ordner synchronisieren (optional):
   • Rechtsklick auf den lokalen content/-Ordner
   • Wählen Sie "Hochladen"
   • FileZilla lädt alle Dateien hoch (überschreibt vorhandene, bzw. fragt danach, ob überschrieben werden soll.)

Cache löschen

Was ist der Cache und wann muss er gelöscht werden? Komplexere lowmark-Websites nutzen einen Index-Cache – eine Art Zwischenspeicher, der benutzt wird, um z.B. Teaser, Timelines oder Inhaltsverzeichnisse automatisch zu erzeugen. Dieser Cache enthält eine Liste aller Seiten und ihrer Metadaten. Nachdem neue Inhalte hochgeladen worden sind, muss der Index einmal neu aufgebaut werden, damit die neuen Inhalte in automatisch generierten Listen (wie z.B. Blog-Übersichten) erscheinen.

Wann ist das nötig? Immer dann, wenn Sie neue Seiten hinzugefügt oder Metadaten (z.B. Titel, Tags, Beschreibungen im Frontmatter) geändert haben. Bei reinen Textänderungen innerhalb einer Seite ist es meist nicht erforderlich.

Dafür gibt es zwei Wege:

1. Website mit Parameter aufrufen: Rufen Sie die Website einmal mit ?clearcache am Ende der URL auf: https://ihre-domain.de/?clearcache
   Das sollte auf einer Seite geschehen, wo der Index ausgewertet wird, also z.B. auf einer Seite, wo eine Timeline, Blog-Übersicht oder ein automatisches Inhaltsverzeichnis zu sehen ist, wie z.B. https://ihre-domain.de/blog/?clearcache

2. Cache-Datei direkt löschen: Löschen Sie die Datei _page_index.php im Verzeichnis cache/ auf dem Server über Ihr FTP-Programm.