Hilfe zum Blog-System

Inhaltsverzeichnis einblenden

Dies ist ein einfaches Blog-System für Leute (wie mich), für die WordPress mit all seinen Möglichkeiten und der Benutzerverwaltung eigentlich "Overkill" ist. Die einfach nur einen Blog oder eine Website erstellen möchten, ohne sich ständig um Updates kümmern oder sich um die weitere Verfügbarkeit und Kompatibilität von Plugins sorgen zu müssen. Denen der Block-Editor etwas "suspekt" ist und die keine Angst vor HTML haben, sondern lieber die volle Kontrolle über ihren Code behalten. Die ihre Erzeugnisse nicht so gerne einer obskuren Datenbank anvertrauen, sondern lieber offenen, transparenten Plaintext-Dateien...

Dieses Blog-System kommt mit einer Handvoll PHP-Dateien aus und benötigt keine Datenbank-Anbindung. Das gesamte Blog-Design und die Konfiguration des des dahinterliegenden Blog-Systems erfolgt über einfach zu pflegende Textdateien. Auch die Artikel werden inklusive ihrer Metadaten wie Kategorien und Schlagwörter in je einer PHP-Datei im Hauptverzeichnis des Webservers gespeichert.

Die Artikel können in einem beliebigen Text-Editor verfasst und per SFTP hochgeladen werden, oder es kann der integrierte Blog-Editor verwendet werden, der noch über einige Sonderfunktionen verfügt, die das Erstellen von Artikeln vereinfachen können, wie z.B. die Angabe der Metadaten, einfache Textformatierungen oder das Einfügen von Medien (Bildern, Audio- und Videoclips, etc.).

Textformatierungen erfolgen durch direkte Zuweisung von HTML-Tags wie z.B. Paperlapapp für einen Absatz (Paragraph) oder Blabla für Fettschrift (Bold). Wie Texte formatiert werden, wird in der Vorlage-Datei "Demo.php" ausführlich erläutert und demonstriert. Dort kann man diese Funktionen einfach mal ausprobieren. Hier in diesem Beitrag soll es um die grundsätzliche Funktionsweise des Blog-Systems gehen.

Die Bedienelemente des Blog-Editors

Die Ansicht des Blog-Editors ist zweigeteilt: In der linken Hälfte befindet sich der eigentliche Text-Editor, und in der rechten Hälfte die Vorschau. Links gibt man HTML-Code ein, rechts erscheint das Ergebnis - so, wie die der Artikel im Blog erscheinen wird.

Um das Ergebnis in der Vorschau (rechte Hälfte) bei verschiedenen Display-Breiten zu kontrollieren, kann man die Größenaufteilung zwischen linker und rechter Hälfte verändern. Hierzu einfach mit der Maus den kleinen dreieckigen "Anfasser" unten in der Mitte in horizontaler Richtung "ziehen".

Alle Funktionen des Editors sind erreichbar über die Menüleiste am oberen Rand mit den Buttons Neu, Öffnen, Speichern (usw.) und die darunter liegende Werkzeugleiste mit den Buttons P, H2, H3 (usw.).

Über die Buttons der Menüleiste sind alle Funktionen des Blog-Editors zugänglich:

Button "Neu"

Erstellt eine neue Datei (z.B. Blog-Artikel) im Editor. Zunächst kann hier eine Vorlage ausgewählt werden, die als Basis für die neue Datei dient. Es können auch eigene Vorlagen erstellt werden - dazu weiter unten mehr.

Nach Auswahl einer Vorlage oder einfach "Leere Seite" öffnet sich das Fenster Datei-Informationen bearbeiten. Hier kann man - muss aber nicht - Angaben zur Datei machen, etwa Titel und Dateiname, Veröffentlichungsdatum, Kategorien und Schlagworte. Will man an dieser Stelle noch nichts eingeben, sondern diekt mit dem Schreiben loslegen, kann man den Dialog auch einfach mit dem "Abbrechen"-Button schließen. Er kann später jederzeit über den Menü-Button "Bearbeiten" erneut aufgerufen werden. Spätestens beim Speichern muss hier zumindest ein Dateiname angegeben werden.

Wenn man keinen Blog-Artikel (Beitrag oder Seite) erstellen möchte, sondern z.B. ein Widget oder ein Snippet, kann man im "Bearbeiten"-Dialog einen anderen Dateityp auswählen.

Button "Öffnen"

Öffnet die Dateiverwaltung. Dort können sämtliche vom Blog-System verwalteten Dateien aufgelistet, im Editor geöffnet, bearbeitet oder gelöscht werden. Außerdem können hier auch Datensicherungen (Backups) verwaltet werden.

Die Dateiliste

In der Liste werden die vorhandenen Dateien aufgelistet. Um sie anders zu sortieren, einfach auf die Spalten im Tabellenkopf klicken. In der Spalte ganz links sind eckige Auswahlelemente (Checkboxen) zu sehen. Diese dienen zur Auswahl eine oder mehrerer Dateien, um anschließend etwas mit ihnen zu machen, z.B. im Editor öffnen, oder löschen. Dateien können auch aus-/abgewählt werden, indem man einfach auf den Dateinamen oder eine andere Angabe in der Tabellenzeile klickt.

Oberhalb der Dateiliste befinden sich mehrere eingerahmte Bereiche, in denen zusammengehörige Bedienelemente gruppiert sind:

Der Bereich "Auflisten"

Hier kann ausgewählt werden, welche Art von Dateien aufgelistet werden sollen: Artikel (Beiträge, Seiten), Vorlagen, Textbausteine, Snippets, Widgets, Systemdateien und Backups. Je nach ausgewählter Dateiart ändert sich die Liste und die zur Verfügung stehenden Bedienelemente.

Der Bereich "Funktionen"

Hier gibt es drei Buttons mit verschiedenen Funktionen:

Löschen: Hiermit kann die in der Dateiliste ausgwählte Datei gelöscht werden. Artikel werden zunächst in den Papierkorb verschoben, alle anderen Dateiarten werden sofort und unwiderruflich gelöscht.
Papierkorb: Öffnet den Papierkorb. Hier können die dorthin verschobenen Artikel und Medien entweder wiederhergestellt oder endgültig gelöscht werden. Die Funktionen des Papierkorbs werden an anderer Stelle genauer erklärt.
Vergleichen: Vergleicht die in der Dateiliste ausgewählte Datei mit dem Inhalt des Editors und zeigt in einem neuen Fenster die Unterschiede an. Mehr zu dieser Funktion weiter unten im Abschnitt Dateien vergleichen.

Der Bereich "Einfügen"

Dieser Bereich ist nur bei der Auflistung "Artikel" sichtbar. Durch Klick auf den Button Einfügen können verschiedene Angaben zur ausgewählten Datei in den Text im Editor eingefügt werden. Was eingefügt werden soll, kann im Auswahlmenü links neben dem Button ausgewählt werden: Link, Titel und/oder Dateiname. Die Auswahl "Link" ist beispielsweise nützlich, um in einem Artikel einen anderen Artikel zu verlinken.

Der Bereich "Backup"

Dieser Bereich ist nur bei der Auflistung von "Backups" sichtbar. Hier können Datensicherungen des Blog-Systems (oder von Teilen davon) durchgeführt und heruntergeladen werden. Es gibt hier zwei Buttons:

Erstellen: Öffnet ein weiteres, kleines Dialogfenster zum Erstellen einer Datensicherung. Hier gibt es folgende Bedien-Elemente:
- Dateiname: Der Name der erzeugten ZIP-Datei. Dieser wird vorausgefüllt und enthält den aktuellen Zeitstempel. Der Name kann beliebig abgeändert werden. Falls bereits eine Datei mit dem eingegebenen Namen existiert, wird sie kommentarlos überschrieben.
- Auswahl: Dies bezieht sich auf die nachfolgend aufgeführten Verzeichnisse. Es können entweder alle Verzeichnisse aus- oder abgewäht, die Auswahl umgekehrt oder nur die Standard-Verzeichnisse ausgewählt werden.
- Verzeichnisse: Hier werden alle gefundenen Verzeichnisse aufgeführt. Die fett geschriebenen Verzeichnisse sind die oben erwähnten Standard-Verzeichnisse - diese gehören zum Blog-System, die übrigen nicht (z.B. selbst angelegte Verzeichnisse). Die Blog-Artikel liegen im obersten Verzeichnis (das mit dem einzelnen Punkt als Namen). Über die Checkboxen kann ausgewählt werden, welche dieser Verzeichnisse in der Datensicherung enthalten sein sollen.
- Start: Dieser Button startet das Backup. Je nach Menge und Größe der zu sichernden Dateien kann das zwischen ein paar Sekunden und Minuten dauern. Während und nach Erstellung des Backups wird unter "Meldung" ein entsprechender Hinweistext ausgegeben - oder eine Fehlermeldung, falls etwas schiefgeht.
Download: Über diesen Button kann die in der Dateiliste ausgewählte Datensicherung als ZIP-Datei auf den lokalen Rrchner heruntergeladen werden.

Eine Rücksicherungs-Funktion ist im Blog-System nicht implementiert. Um eine Datensicherung wieder zurückzuspielen, gibt es zwei Möglichkeiten: Entweder die heruntergeladene ZIP-Datei auf dem lokalen Rechner entpacken und per SFTP auf den Webserver hochladen (zuvor am besten dem Inhalt des Remote-Verzeichnisses löschen oder verschieben), oder per SSH auf dem Webserver anmelden und die ZIP-Datei aus dem Verzeichnis "backup" entpacken (diese dazu am besten vorher in ein Arbeitsverzeichnis verschieben und das Web-Verzeichnis, in dem die Dateien des Blog-Systems liegen, leeren).

Button "Speichern"

Durch Klick auf diesen Button oder durch die Tastenkombination Strg+S wird die aktuell im Editor geöffnete Datei gespeichert, sofern sie geändert wurde. Geänderte Dateien sind an dem roten Disketten-Symbol links unten in der Statusleiste erkennbar, wo auch Titel und Dateiname der bearbeiteten Datei angezeigt werden. Falls bisher noch kein Dateiname eingegeben wurde, öffnet sich der Dialog Datei-Informationen bearbeiten zur Eingabe des Dateinamens und ggf. weiterer Angaben.

Handelt es sich bei der Datei um einen Blog-Artikel (Beitrag, Seite, Index), wird bei jedem Speichern ein "Snapshot" (Schnappschuss / Momentaufnahme) erstellt. Snapshots landen im Papierkorb (unter "Auflisten: Snapshots"). Von dort können sie bei Bedarf "wiederhergestellt" (d.h. in den Ursprungsordner zurückverschoben) werden. So lassen sich gemachte Änderungen bei Bedarf später wieder rückgängig machen.

Button "Bearbeiten"

Dieser Button öffnet den weiter oben schon mehrfach erwähnten Dialog Datei-Informationen bearbeiten. Hier können verschiedene Angaben zur geöffneten Datei gemacht werden. Durch Klick auf einen der drei Buttons unten wird das Dialogfenster geschlossen. Der Button "Speichern" speichert dabei die Datei, der Button "Schließen" übernimmt nur die Angaben in die Datei, ohne sie zu speichern, und der Button "Abbrechen" verwirft die vorgenommenen Änderungen.

Folgende Angaben zur Datei können gemacht werden:

Dateityp

Blog-Artikel haben den Dateityp Beitrag, Seite oder Index. Des weiteren gibt es die Dateitypen Vorlage, Textbaustein, Snippet, Widget und Systemdatei. Je nach ausgewähltem Dateityp stehen in dem Bereich darunter mehr oder weniger Eingabefelder für zusätzliche Angaben zur Datei zur Verfügung.

Dateityp Beitrag: Blog-Artikel, der auf der Übersichts-Seite erscheinen soll.
Dateityp Seite: Blog-Seite, die im Menü oder in einem Widget in der Seitenleiste verlinkt werden soll.
Dateityp Index: Übersichts-Seite für Blog-Beiträge. Hier erscheinen die aufgelisteten Artikel in chronologischer Folge, wobei die neueren Artikel weiter oben stehen.
Dateityp Vorlage: Eine Datei mit beliebigem Inhalt (z.B. HTML oder PHP), die beim Erstellen neuer Artikel/Dateien über den Menü-Button Neu zur Auswahl angeboten wird und als Vorlage für die neu zu erstellende Datei dient. Siehe auch Eine Vorlage erstellen.
Dateityp Textbaustein: Ebenfalls eine Datei mit beliebigem Inhalt (z.B. HTML oder PHP), der in einen Artikel eingefügt werden kann. Textbausteine werden zentral gepflegt, so dass Änderungen an einem Textbaustein sofort in allen Artikeln sichtbar werden, in denen er eingefügt ist. Siehe auch Einen Textbaustein erstellen.
Dateityp Snippet: Ein kleines Text- oder HTML-"Schnipsel", das über das "Einfügen..."-Menü in der Werkzeugleiste ausgewählt werden kann, und dessen Inhalt dann in den Text im Editor eingefügt wird. Snippets können spezielle Variablen enthalten, die beim Einfügen durch den im Editor markierten Text ersetzt werden. Mehr dazu weiter unten im Abschnitt Ein Snippet erstellen.
Dateityp Widget: Eine Datei mit HTML- oder PHP-Inhalt, der als Element in die Seitenleiste des Blogs eingebunden wird. Das kann ein ganz einfacher Link mit Bild sein oder auch ein PHP-Programm zur Ausgabe spezieller Informationen. Standardmäßig sind schon einige Widgets enthalten, z.B. "Neueste Beiträge", "Kategorien", "Schlagwörter", "Blog durchsuchen". Siehe auch Widgets einrichten.
Dateityp Systemdatei: Ein "Konglomerat" verschiedener Systemdateien zur weitreichenden Anpassung des Blogs. Auch die PHP-Programmdateien des Blog-Systems liegen hier. Genauer werden die Systemdateien und was man mit ihnen machen kann, an anderer Stelle erklärt.

Durch entsprechende Benennung der Artikel (Beitrag, Seite, Index) kann festgelegt werden, ob als Startseite (d.h. als erste Seite, die beim Aufruf des Blogs im Browser erscheint) eine Übersichts-Seite aller Blog-Artikel (Dateityp: Index), eine Blog-Seite (Dateityp: Seite) oder sogar ein Blog-Beitrag (Dateityp: Beitrag) verwendet werden soll: Dazu gibt man der entsprechenden Datei einfach den Dateinamen "index" (kleingeschrieben).

Datum

Das Veröffentlichungsdatum des Artikels. Es wird bei Beiträgen oben unter dem Beitragstitel angezeigt, und es bestimmt die Sortierung auf der Übersichts-Seite: Neuere Beiträge werden weiter oben aufgeführt. Die Eingabe erfolgt im Format JJJJ-MM-TT, wobei JJJJ das vierstellige Jahr, MM der zweistellige Monat und TT der zweistellige Tag ist (z.B. 2023-12-31).

Titel

Titel des Artikels. Er wird bei Beiträgen und Seiten ganz oben angezeigt und auch in die Meta-Daten der erzeugten Blog-Seite übernommen, von wo er (wie die Kurzbeschreibung und das Beitragsbild) von Suchmaschinen oder von Social-Media-Anwendungen beim "Teilen" des Artikels ausgewertet werden kann.

Dateiname

Unter diesem Namen wird die Datei gespeichert. Bei Blog-Artikeln ist er auch Teil der URL, über die die Datei im Browser aufgerufen werden kann. Er sollte daher nach der Veröffentlichung eines Artikels nicht mehr geändert werden.

Bei Eingabe eines Titels wird für neue Dateien ein passender Dateiname vorgegeben, er kann aber manuell geändert werden. Ein Dateiname für Artikel, der ja auch als URL-Bestandteil verwendet wird, sollte möglichst nur aus Zahlen, Buchstaben und Bindestrichen bestehen und weder Umlaute, Sonderzeichen oder Leerzeichen enthalten.

Rechts neben dem Eingabefeld befinden sich zwei Buttons: Der "Zauberstab"-Button fügt einen anhand des Titels automatisch erzeugten Dateinamen ein, nachdem dieser manuell geändert wurde. Der "Rückgängig"-Button stellt den ursprünglichen Dateinamen wieder her.

Falls unter dem eingegebenen Dateinamen schon eine Datei existiert, wird ein entsprechender Hinweis ausgegeben. Wird die Datei trotzdem unter diesem Namen gespeichert, dann wird die existierende Datei überschrieben. Für Artikel wird dabei ein Snapshot erstellt, so dass die überschriebene Datei bei Bedarf später wiederhergestellt werden kann.

Wird der Dateiname eines Blog-Artikels, der bereits gespeichert wurde, geändert, so wird er unter diesem neuen Namen gespeichert. In diesem Fall erscheint eine Checkbox "Umbenennen". Wird dort ein Häkchen gesetzt, dann wird der unter dem alten Namen gespeicherte Artikel gelöscht und zusätzlich ein Snapshot erstellt. Ohne Häkchen wird der vorhandene Artikel nicht gelöscht.

Basis-URL

Diese Angabe ist sinnvoll, wenn der Artikel in einem anderen Verzeichnis verwendet werden soll, beispielsweise als Template für ein Script, dessen Pfad sich im Unterverzeichnis "lib/cgi-bin" befindet. In diesem Fall kann z.B. / oder ../ als Basis-URL angegeben werden. Dadurch werden die im Artikel verlinkten Ressourcen (Bilder, JavaScript- und CSS-Dateien) weiterhin gefunden. Normalerweise wird diese Angabe nicht benötigt und sollte daher leergelassen werden.

Beschreibung

Eine kurze (!) Beschreibung des Artikel-Inhalts (1-2 Sätze). Sie wird auf der Übersichtsseite ausgegeben und auch in die Meta-Daten der erzeugten Blog-Seite übernommen, von wo sie (wie der Titel und das Beitragsbild) von Suchmaschinen oder von Social-Media-Anwendungen beim "Teilen" des Artikels ausgewertet werden kann.

Beitragsbild

Ein Bild, das zusammen mit dem Beschreibungstext auf der Übersichtsseite angezeigt wird. Es wird bei Beiträgen und Seiten auch in die Meta-Daten der erzeugten Blog-Seite übernommen, von wo es (wie die der Titel und die Kurzbeschreibung) von Suchmaschinen oder von Social-Media-Anwendungen beim "Teilen" des Artikels übernommen und angezeigt werden kann. Durch Anklicken des rechts daneben befindlichen Buttons kann ein Bild aus der Medienverwaltung ausgewählt werden.

Kategorien

Beliebige Begriffe, unter denen der Artikel eingeordnet wird und gefunden werden können soll, beispielsweise über das "Kategorien"-Widget . Durch Anklicken des rechts daneben befindlichen Buttons können Kategorien, die bereits in anderen Artikeln verwendet werden, ausgewählt und in diesen Artikel übernommen werden. Neue Kategorien können hinzugefügt werden, indem man sie in das Eingabefeld schreibt. Die dort angegebenen Kategorien müssen durch Kommas voneinander getrennt werden.

Schlagwörter

Beliebige Begriffe, unter denen der Artikel verschlagwortet wird und gefunden werden können soll, beispielsweise über das "Schlagwörter"-Widget (Schlagwort-Wolke). Durch Anklicken des rechts daneben befindlichen Buttons können Schlagwörter, die bereits in anderen Artikeln verwendet werden, ausgewählt und in diesen Artikel übernommen werden. Neue Schlagwörter können hinzugefügt werden, indem man sie in das Eingabefeld schreibt. Die dort angegebenen Schlagwörter müssen durch Kommas voneinander getrennt werden.

Veröffentlicht

Wenn dieses Häkchen gesetzt ist, gilt der Artikel als veröffentlicht, d.h. er wird dann auf der Website (Übersichts-Seite, Widgets) automatisch verlinkt. Zudem wird er in die Sitemap (sitemap.xml) aufgenommen und kann so von Suchmaschinen leichter gefunden werden. Ein ungesetztes Häkchen eignet sich für Artikel im Entwurfsstadium oder wenn ein Artikel nicht automatisch verlinkt werden soll.

Hinweis: Ein nichtveröffentlichter Artikel kann weiterhin über seine Seitenadresse (URL) aufgerufen werden. Er ist nur "versteckt", aber nicht gesperrt! Wenn eine Seite oder ein Beitrag im Menü oder in einem Sidebar-Widget manuell verlinkt wird, kann er von dort geöffnet werden. Auch wer die Seitenadresse kennt, kann den Artikel öffnen und lesen.

Auflisten

Ist hier ein Häkchen gesetzt, erscheint der Artikel auf der Übersichts-Seite; sonst nicht. Sinnvoll z.B. für Seiten oder Beiträge, die keine Blog-Einträge sind und nicht auf der Übersichts-Seite aufgelistet werden sollen, sondern nur im Menü oder in einem Sidebar-Widget verlinkt werden sollen.

Anpinnen

Ein hier gesetztes Häkchen bewirkt, dass ein Artikel in der Beitrags-Übersicht oben gehalten wird und somit eine höhere Aufmerksamkeit erhält.

Vollständig

Ist dieses Häkchen gesetzt, dann wird statt des Beschreibungstextes der komplette Inhalt des Artikels auf der Übersichtsseite ausgegeben. In Kombination mit dem Häkchen "Anpinnen" lässt sich so z.B. ein einführender "Wilkommen"-Artikel oben auf der Übersichts-Seite plazieren.

Button "Medien"

Öffnet die Medienverwaltung. Hier können beliebige Dateien wie Bilder, Audio- und Videoclips oder z.B. auch PDF-Dateien hochgeladen werden, um sie anschließend in einen Artikel einzufügen.

Die Dateiliste

In der Dateiliste werden die vorhandenen Medien aufgelistet. Um sie anders zu sortieren, einfach auf die Spalten im Tabellenkopf klicken. Die Checkboxen in der ersten Spalte von links dienen zur Auswahl einer oder mehrerer Mediendateien. Mediendateien können auch aus-/abgewählt werden, indem man einfach auf den Dateinamen oder eine andere Angabe in der Tabellenzeile klickt. Durch Klick auf den Button Einfügen werden die Links der ausgewählten Dateien in den gerade bearbeiteten Text eingefügt.

In der zweiten Spalte wird eine Vorschau der Mediendatei angezeigt. Bei Audio- und Video-Dateien gibt es einen kleinen Player für die Wiedergabe. Bilder werden durch Anklicken in einem neuen Browser-Tab in voller Größe geöffnet. Die letzte Spalte (Verwendung) gibt an, wie oft eine Mediendatei in Blog-Artikeln verwendet wird. Die Dateinamen der betreffenden Artikel werden in der Spalte "Dateiname" ausgegeben. Ein Fragezeichen (?) in der letzten Spalte bedeutet, dass die Verwendung der Mediendatei nicht ermittelt werden konnte. Sie wird endweder nicht verwendet oder ist in einer anderen Datei eingebunden, die kein Artikel (Beitrag, Seite) ist.

Oberhalb der Dateiliste befinden sich mehrere eingerahmte Bereiche, in denen zusammengehörige Bedienelemente gruppiert sind:

Der Bereich "Auswahl"

Hier gibt es vier Buttons, um die Auswahl von Mediendateien zu unterstützen:

Alle: Wählt alle in der Liste zu sehenden Mediendateien aus.
Keine: Entfernt das Auswahlhäkchen aller in der Liste zu sehenden Mediendateien.
Umkehren: Kehrt die Auswahl um: Gesetzte Häkchen werden entfernt, nicht gesetzte Häkchen werden gesetzt.
Bereiche: Setzt alle Häkchen zwischen zwei gesetzten Häkchen. Um also die 5. bis 10. Datei auszuwählen, braucht man nicht alle 6 Häkchen einzeln zu setzen, sondern nur zwei, und klickt dann auf "Bereiche".

Die Auswahl-Buttons beziehen sich nur auf die gerade sichtbaren Dateien. Wenn ein Filter aktiv ist (siehe nachfolgende Überschrift) und dadurch Dateien ausgeblendet werden, bleiben deren Häkchen unverändert.

Der Bereich "Filter"

Hier kann die Liste der angezeigten Dateien eingeschränkt werden:

Medientyp: Einschränkung auf Audio-, Video-, Bild- und sonstige Dateien.
Datei-Endung: Einschränkung auf Dateien mit einer bestimmten Endung (z.B. *.jpg oder *.mp3).
Datei-Jahr: Einschränkung auf Dateien mit einem bestimmten Jahr des Dateidatums.
Datei-Monat: Einschränkung auf Dateien mit einem bestimmten Monat des Dateidatums.

Das Dateidatum, das auch in der Listen-Spalte "Datum" angezeigt wird, ist entweder das Hochlade-Datum oder das Zuletzt-Geändert-Datum - je nachdem, ob beim Hochladen der Datei das Häkchen "Ursprüngliches Dateidatum beibehalten" gesetzt wurde oder nicht.

Der Bereich "Funktionen"

Hier gibt es drei Buttons mit verschiedenen Funktionen:

Hinzufügen: Öffnet ein weiteres, kleines Dialogfenster zum Hochladen einer Mediendatei vom lokalen Rechner. Dort gibt es folgende Bereiche:
- Datei: Hier klicken, um die hochzuladende Mediendatei von der Festplatte auszuwählen.
- Datum: Wird hier ein Haken gesetzt, dann behält die hochgeladene Datei ihr originales Änderungsdatum. Andernfalls bekommt sie das aktuelle Datum (Hochlade-Datum).
- Hochladen: Nach Klick auf diesen Button startet der Upload. Das kann bei größeren Dateien schonmal ein paar Sekunden dauern. Anschließend wird eine Fertigmeldung angezeigt (oder eine Fehlermeldung, falls etwas schiefgelaufen ist).
Löschen: Verschiebt die ausgewählten Mediendateien in den Papierkorb.
Papierkorb: Offnet den Papierkorb. Hier können die dorthin verschobenen Artikel und Medien entweder wiederhergestellt oder endgültig gelöscht werden. Die einzelnen Funktionen des Papierkorbs werden weiter unten genauer erklärt.

Button "Anzeigen"

Öffnet die "Live"-Version (d.h. die zuletzt gespeicherte Version) des gerade bearbeiteten Blog-Artikels in einem neuen Browser-Tab. Wenn sich kein Blog-Artikel im Editor befindet, wird die Start-Seite des Blogs geladen.

Button "Vorschau"

Öffnet den gerade bearbeiteten Blog-Artikel im Vorschau-Modus in einem neuen Browser-Tab. Wenn sich kein Blog-Artikel im Editor befindet, wird die Start-Seite des Blogs geladen. Im Vorschau-Modus werden andere Stylesheets als im Live-Modus verwendet (mehr dazu weiter unten unter Vorschau-Modus).

Um eine Blog-Seite im Vorschau-Modus zu öffnen, wird an die URL der Parameter preview angehängt (z.B. https://beispiel.de/artikel?preview). Auch alle internen Links werden dann automatisch so geändert, dass der Vorschau-Modus aktiv bleibt, wenn man auf Links zu Unterseiten klickt.

Button "Hilfe"

Öffnet die Hilfe-Seite (diese Seite) in einem neuen Browser-Tab. Je nachdem, welche Sprache in der config.php konfiguriert wurde, wird die Hilfe-Seite in der entsprechenden Übersetzung geöffnet. Falls für die konfigurierte Sprache (noch) keine Hilfe-Seite existiert, wird die deutsche Übersetzung angezeigt.

Der Papierkorb

Den Papierkorb erreicht man über gleichnamigen Button, der im Bereich "Funktionen" von Dateiverwaltung (Menü-Button Öffnen) und Medienverwaltung (Menü-Button Medien) zu finden ist. Hier landen die "gelöschten" Blog-Artikel und Mediendateien sowie die Snapshots, die bei jedem Speichern eines Artikels automatisch erzeugt werden.

Auch hier gibt es oberhalb der Liste mehrere eingerahmte Bereiche, in denen zusammengehörige Bedienelemente gruppiert sind:

Der Bereich "Auswahl"

Hier gibt es vier Buttons, um die Auswahl von Mediendateien zu unterstützen. Deren Funktion entspricht exakt denen in der Medienverwaltung (siehe dort).

Der Bereich "Auflisten"

Über diese Radiobuttons kann ausgewählt werden, welche Art von Dateien aufgelistet werden sollen: Artikel (Beiträge, Seiten), Snapshots und Mediendateien.

Der Bereich "Funktionen"

Hier gibt es drei Buttons mit verschiedenen Funktionen:

Wiederherstellen: Die ausgewählte Datei wird in ihren Ursprungsordner zurückverschoben. Dies funktioniert nur, wenn genau 1 Datei ausgewählt ist, nicht mit mehreren auf einmal.
Endgültig löschen: Löscht die ausgewählten Dateien aus dem Papierkorb. Sie sind dann "futsch" und können nicht wiederhergestellt werden.
Vergleichen: Vergleicht zwei in der Dateiliste ausgewählte Dateien miteinander und zeigt in einem neuen Fenster die Unterschiede an. Ist nur eine Datei ausgewählt, wird diese mit dem Inhalt des Editors verglichen. Mehr zu dieser Funktion weiter unten im Abschnitt Dateien vergleichen.

Dateien vergleichen

Die Funktion "Dateien vergleichen" erreicht man über den Vergleichen-Button im Bereich "Funktionen" von Dateiverwaltung (Menü-Button Öffnen) oder Papierkorb. In einem Textfenster werden die gefundenen Unterschiede zwischen Datei 1 (alter Stand) und Datei 2 (neuer Stand) farblich wie folgt gekennzeichnet:

Rot hinterlegt sind Löschungen, d.h. Teile von Datei 1, die in Datei 2 fehlen.
Grün hinterlegt sind Hinzufügungen, d.h. sind Teile von Datei 2, die in Datei 1 fehlen.

Wird die Funktion "Vergleichen" aus der Dateiverwaltung heraus aufgerufen, dann wird die in der Dateiliste ausgewählte Datei (alter Stand) mit dem Inhalt des Editors (neuer Stand) verglichen. Hierbei ist zu beachten, dass die beiden PHP-Blöcke am Anfang und am Ende von Artikeln als vermeintlich "gelöscht" angezeigt werden, da diese zwar Teil der Datei sind (sie enthalten einige Variablen mit Metadaten), aber nicht in den Editor geladen werden.

Wird die Funktion "Vergleichen" aus dem Papierkorb heraus aufgerufen, dann hängt es von der Anzahl der ausgewählten Dateien ab, was womit verglichen wird: Ist nur eine Datei ausgewählt, wird diese mit dem Inhalt des Editors verglichen (wie in der Dateiverwaltung). Sind zwei Dateien ausgewählt, werden diese miteinander verglichen. Hierbei gilt die zuerst ausgewählte Datei als "Datei 1" (alter Stand) und die zuletzt ausgewählte Datei als "Datei 2" (neuer Stand).

Der Dateivergleich kann speziell bei "Snapshots" nützlich sein, um zu sehen, welche Änderungen bei den einzelnen Speichervorgängen eines Artikels vorgenommen wurden.

Einige "unsichtbare" Zeichen werden im Textfenster in roter Schrift visualisiert: Leerzeichen (•), Tabulator (HT), Wagenrücklauf (CR) und Zeilenvorschub (LF). Dadurch sollen Änderungen noch genauer erkennbar werden.

Oberhalb der Liste gibt es wieder mehrere eingerahmte Bereiche, in denen zusammengehörige Bedienelemente gruppiert sind:

Der Bereich "Springen"

Hier gibt es zwei Buttons, um innerhalb des Textfensters zum vorherigen und zum nächsten Unterschied zu springen. Statt auf die Buttons zu klicken, kann man auch die Tastenkürzel Strg+Pfeil hoch bzw. Strg+Pfeil runter benutzen.

Die Bereiche "Datei 1" und "Datei 2"

Hier werden die Namen der beiden miteinander verglichenen Dateien angezeigt.

Hinweis: Bei größeren Dateien kann der Vergleich schonmal etwas länger dauern. In der Fußzeile wird dann der Hinweis "Bitte warten..." angezeigt.

Unterhalb der Menüleiste befindet sich die Werkzeugleiste für den Texteditor mit den Buttons zur Textformatierung und dem Auswahlmenü für die "Snippets".

Wie in der Einleitung bereits gesagt, verfügt dieses Blog-System über keinen "WYSIWYG-Editor" ("What You See Is What You Get"), sondern die Blog-Artikel werden direkt in HTML geschrieben. So hat man die volle Kontrolle über das Ergebnis, allerdings kann das Einfügen der HTML-Tags manchmal etwas lästig sein, denn beim Schreiben will man sich ja eigentlich auf den Inhalt konzentrieren. Auch kann HTML-Code schonmal etwas unübersichtlich sein.

Daher gibt es in der Werkzeugleiste einige nützliche Funktionen zur Textformatierung, die das Einfügen der HTML-Tags erleichtert. Außerdem gibt es eine "Live-Vorschau": Während links der Text geschrieben wird, ist rechts sofort das Ergebnis zu sehen.

Wird einer der Buttons angeklickt oder das dazugehörige Tastaturkürzel eingegeben, dann werden die entsprechenden HTML-Tags direkt in den Text eingefügt. Ist kein Text markiert, werden leere Tags an die aktuelle Cursorposition eingefügt (z.B. ). Ist Text markiert, wird der Text mit den Tags umschlossen (z.B. Markierter Text).

Button	Tastaturkürzel	Funktion
P	Alt+P	Absatzformatierung einfügen
H2 bis H5	Alt+2...5	Überschrift 2...5 einfügen
B	Alt+B	Text fett formatieren
I	Alt+I	Text kursiv formatieren
U	Alt+U	Text unterstrichen formatieren

Zusätzlich zu den oben angegebenen Tastaturkürzeln und den Standard-Tastaturkürzeln des Browsers wie z.B. Strg+C/X/V für die Zwischenablage gibt es noch folgende weitere:

Strg+Enter: Trennt einen Absatz an der aktuellen Cursorposition auf, indem  eingefügt wird. Wenn man etwa beim Schreiben in der Mitte eines Absatzes feststellt, dass der Absatz schon viel zu lang geworden ist, drückt man Strg+Enter und schwupps steht der Text in zwei Absätzen.
Umschalt+Enter: Fügt einen Zeilenwechsel ( ) ein. Wenn der Text innerhalb eines Absatzes in einer neuen Zeile weitergehen soll, einfach Umschalt+Enter drücken.
Strg+D: Dupliziert den markierten Text oder, wenn kein Text markiert ist, die ganze Zeile, in der sich der Cursor gerade befindet.
Strg+Hoch/Runter: Zeilenweises Scrollen des Editor-Inhalts.

Es können auch eigene Tastaturkürzel angelegt werden - Genaueres dazu im Abschnitt Eigene Tastaturkürzel anlegen.

Daneben gibt es noch 3 weitere Buttons für die farbliche Formatierung des Textes:

Funktion	Beispiel
Textmarker	Beispiel
Hintergrundfarbe	Beispiel
Schriftfarbe	Beispiel

Der Textmarker hat eine vom Browser vorgegebene Farbe (meist gelb). Die Hintergrundfarbe und die Schriftfarbe können frei gewählt werden. Hierzu gibt es zwei Farbpicker. Diese sehen auf den verschiedenen Browsern etwas unterschiedlich aus. Grundsätzlich sind sie aber zweigeteilt: Mit Klick auf die rechte Hälfte wird die Farbe ausgewählt, und ein Klick auf die linke Hälfte fügt die Farb-Tags in den Editor ein.

Um eine Formatierung wieder zu entfernen, einfach den Text inklusive der Tags markieren und den Button x anklicken. Mit jedem Klick auf den x-Button wird von außen nach innen bzw. von links nach rechts eine weitere Formatierung entfernt. Welches Tag-Paar entfernt wird, ist in dem Tooltip zu sehen, das erscheint, wenn man den Mauszeiger über den x-Button hält (ohne zu klicken).

Snippets sind (wie schon der Name suggeriert) kleine Schnipsel von HTML- oder PHP-Code, die in den Text eingefügt werden können. Sie können Variablen enthalten, die dann durch die im Text markierten Zeilen / Textteile ersetzt werden. Als Trenner zwischen den einzelnen Text-Teilen fungieren dabei der Zeilenumbruch, der Tabulator und die drei Zeichen [ | ].

Die Snippets können aus der Auswahlbox ganz rechts in der Werkzeugleiste (im folgenden einfach "Snippet-Menü" genannt) oder - falls vorhanden - durch Eingabe einer Tastenkombination ausgewählt werden.

Ist kein Text markiert, wird ein "leeres" Snippet in den Text eingefügt. Ist Text markiert, dann wird es mit dem markierten Text "ausgefüllt". So lassen sich markierte Textteile ganz einfach z.B. als Link, Bild, Zitat, Tabelle oder Aufzählungsliste formatieren.

Eine Demonstration aller Snippets ist in der Datei Demo.php unter "Vorlagen" enthalten. Wie man eigene Snippets erstellt, wird weiter unten im Abschnitt Ein Snippet erstellen erklärt.

Installation und Einrichtung des Blog-Systems

Um das Blog-System nutzen zu können, muss es auf einem Webserver installiert werden, der PHP unterstützt. Hier gibt es sowohl kommerzielle als auch kostenlose Anbieter. Möchte man eine eigene Domain für die Website haben (z.B. beispiel.de), wird man wohl zu einem kommerziellen Anbieter greifen müssen. Bei Strato beispielsweise bekommt man 50 GB Webspace inklusive 1 Domain mit SSL-Zertifikat (https) für 5 €/Monat; bei Manitu kostet es sogar nur die Hälfte (Stand: Juni 2024).

Dateien auf den Webspace hochladen

Zuerst wird die heruntergeladene ZIP-Datei in ein Verzeichnis auf dem lokalen Rechner entpackt. Folgende Verzeichnisse sollten nun zu sehen sein:

common: Gemeinsame Dateien für alle Sprachen.
de: Dateien für die Sprache Deutsch.
en: Dateien für die Sprache Englisch.

Als nächstes wird der Inhalt des Verzeichnisses common auf den Webserver hochgeladen. Dazu startet man ein SFTP-Programm (z.B. FileZilla oder WinSCP), verbindet sich mit dem Webserver, öffnet im linken Fenster das lokale Verzeichnis "common", markiert alle dort zu sehenden Dateien und Unterverzeichnisse startet den Upload.

Danach lädt man auf die gleiche Weise den Inhalt eines der beiden lokalen Verzeichnisse de oder en hoch - je nachdem, in welcher Sprache (Deutsch oder Englisch) man das Blog-System nutzen möchte. (Nicht wundern, dass common und de/en identische Unterverzeichnisse enthalten - das gehört so!)

Jetzt sollte die Website durch Eingabe der Adresse (z.B. "beispiel.de") im Browser aufgerufen werden können.

Grundeinstellungen vornehmen mit dem Setup-Programm

Nun sollten noch einige Grundeinstellungen vorgenommen werden. Dazu ruft man aus dem Menü den Punkt "Admin > Setup" auf. Wichtig sind zunächst folgende Einstellungen:

Zugriffsschutz: Hier sollte Aktiv auf ja gesetzt werden. Dadurch wird der Administrationsbereich des Blog-Systems durch eine Benutzeranmeldung geschützt. Vorkonfiguriert ist der Benutzername "admin" und das Passwort "start", was aber durch Angabe eines neuen Benutzernamens und eines neuen Passwortes in die entsprechenden Eingabefelder geändert werden kann. Zumindest das Passwort sollte unbedingt geändert werden, sonst kann sich jeder in den Administrationsbereich einloggen, der diese Hilfe-Datei kennt! Es können auch weitere Benutzer angelegt werden, falls mehrere Personen den Blog administrieren und Beiträge erstellen sollen.
CGI-Scripts: Hier sollte Ausführbar setzen auf ja gesetzt sein. Dies ist schon automatisch so voreingestellt, wenn das Setup zum ersten Mal nach einer neuen Installation ausgeführt wird. Dadurch wird das Ausführen-Flag der .pl-Dateien im Unterverzeichnis "cgi-bin" gesetzt. Ist dies einmal geschehen, dann kann die Auswahl bei späteren Aufrufen des Setup auf "nein" bleiben.
Sprache und Region: Hier gibt es folgende Einstellungen:
- Sprache: Die Sprache, in der die Webseiten erstellt werden sollen. Diese Angabe bestimmt auch die Übersetzung der Texte dieses Blog-Systems.
- Land: Das Land, in dem das Blog-System benutzt wird. Diese Angabe bestimmt die Formatierung von Datumsangaben und die Sortierung von Listen.
- Zeitzone: Die Zeitzone für Datumsberechnungen.
- Datumsformat (für Editor): Das Format des Zeitstempels von Dateien im Editor.
Welche Werte für die obigen Felder zulässig sind, kann man durch Klick auf das Info-Icon 🛈 erfahren.
Angaben zur Website: Diese Angaben erscheinen auf den einzelnen Seiten des Blogs:
- Adresse der Website: Die Basis-URL für Metadaten, Sitemap und Aufruf der Suchfunktion. Wenn hier nichts eingetragen wird, dann wird die Adresse anhand der Seiten-URL automatisch ermittelt.
- Name der Website: Der Name der Website für Logo und E-Mail-Absender.
- Titel des Seiten-Headers: Der Titel des Seiten-Headers.
- Untertitel des Seiten-Headers: Der Untertitel des Seiten-Headers.
Der Seiten-Header erscheint oben quer über jeder Seite des Blogs.

Zum Speichern der vorgenommenen Eingaben muss dann nur noch auf den Button Speichern unten geklickt werden. Dabei werden im Hintergrund die Dateien config.php, .htpasswd und .htaccess angepasst sowie das X-Flag .pl-Dateien im Unterverzeichnis "cgi-bin" gesetzt.

Alternativ: Grundeinstellungen manuell vornehmen

Anstelle der Verwendung des Setup-Programms können die Grundeinstellungen auch durch manuelle Bearbeitung einzelner Dateien vorgenommen werden:

Zuerst sollten für die .pl-Dateien im Unterverzeichnis lib/cgi-bin (und den darunterliegenden) die Ausführungsrechte gesetzt werden. Dazu verbindet man sich per SFTP oder SSH mit dem Webserver, wechselt in das Unterverzeichnis lib/cgi-bin und setzt das X-Flag der .pl-Dateien. Im SFTP-Programm markiert man die Dateien und ruft durch Rechtsklick das Eigenschaften-Menü auf, wo man mittels Checkboxen das X-Flag setzen kann. Im SSH-Terminal gibt man den Befehl "chmod 755 *.pl" ein.

Anschließend ruft man den Blog-Editor auf. Diesen erreicht man nach Eingabe der Blog-URL (z.B. beispiel.de) im Browser über das Menü "Admin > Editor" oder über die Adresse beispiel.de/lib/editor (wobei beispiel.de natürlich dem verwendeten Domainnamen entspricht).

Dort sollte zuerst ein Benutzer und ein Passwort vergeben werden, damit nur berechtigte Personen den Editor aufrufen können. Dazu öffnet man die Datei lib/.htpasswd im Editor ("Öffnen > Auflisten: System > Datei: .htaccess > Öffnen"). Die Datei .htpasswd enthält die folgende Zeile:

admin:$2y$10$V1xgLMroqleW56Sja.s0c.szh2oXgST.vVqZ1FiCowrJdZjMkaLn.

Der Teil vor dem Doppelpunkt ist der Benutzername (hier "admin"), dahinter steht das verschlüsselte Passwort (hier "start"). Ersetze den Benutzernamen einfach durch einen beliebigen Namen (ohne Leerzeichen und Sonderzeichen), z.B. "fritz", oder belasse ihn auf "admin". Das Passwort sollte nicht zu einfach zu erraten sein. Schreibe es einfach im Klartext hinter den Doppelpunkt. Um es zu verschlüsseln, markiere es...

fritz:test1234

...und klicke auf den Button Passwort verschlüsseln in der Werkzeugleiste. Das Passwort sollte nun verschlüsselt sein und die Datei kann gespeichert werden:

fritz:$2y$10$AdnOhm3i.xhEX0yC0KmHwuSmXY5Jy0irPux4meh67TNkI.Zy.uiCu

Um nun den Zugriffsschutz zu aktivieren, öffne die Vorlage-Datei .htaccess.tpl im Editor. Dann klicke auf den Menü-Button Bearbeiten und ändere den Dateinamen zu .htaccess. Wichtig: An dieser Stelle die Datei noch nicht speichern, sondern den Dialog durch Klick auf Schließen schließen! (Andernfalls wird eine nicht funktioniernde .htaccess-Datei gespeichert und es erscheint eine Server-Fehlermeldung "Internal Server Error". In diesem Fall muss die .htaccess-Datei per SFTP oder SSH gelöscht werden.)

Die Datei enthält folgende Zeilen (Auszug):

AuthType Basic
AuthName "Bitte anmelden"
AuthUserFile /path/to/lib/.htpasswd
Require valid-user

Markiere oder lösche die Zeile mit dem "AuthUserFile". Klicke nun auf den Button AuthUserFile in der Werkzeugleiste. Dadurch wird eine neue AuthUserFile-Zeile in die Datei eingefügt, die nun den tatsächlichen Server-Pfad zur Datei .htpasswd enthält:

AuthType Basic
AuthName "Bitte anmelden"
AuthUserFile /home/strato/http/premium/rid/12/34/567890/htdocs/beispiel.de/lib/.htpasswd
Require valid-user

Jetzt kann die Datei durch Klick auf den Menü-Button Speichern gespeichert werden.

Wenn alles funktioniert hat, sollte jetzt beim nächsten Öffnen des Editors oder beim Aufruf bestimmter Funktionen ein Anmeldefenster kommen, in das die soeben konfigurierten Anmeldedaten (Benutzer + Passwort) eingegeben werden können, um sich zu authentifizieren. Falls stattdessen eine Server-Fehlermeldung "Internal Server Error" erscheint, die .htaccess-Datei per SFTP oder SSH löschen und nochmal probieren.

Die Website-Konfiguration anpassen

Nach erfolgter Installation sollten als erstes einige grundlegende Einstellungen zur Website vorgenommen werden, etwa Sprache und Region, Adresse und Name der Website, Header-Titel und -Untertitel. Wenn dies nicht bereits mit Hilfe des Setup-Programms durchgeführt wurde, kann dies auch manuell konfiguriert werden.

Hierzu wird die Datei lib/config.php bearbeitet - entweder die Kopie auf dem lokalen Rechner, die anschließend per SFTP auf den Server hochgeladen wird, oder direkt im Editor des Blog-Systems über "Öffnen > Auflisten: System > Dateiname: config.php > Öffnen". Letzteres hat den Vorteil, dass man in der Vorschau auf der rechten Seite gleich das Ergebnis der Änderungen sieht.

// Sprache und Region
$lang = 'de';
$locale = 'de_DE';
$phpLocale = 'de_DE.utf8';
$timezone = 'Europe/Berlin';
$DateTimeFormat = 'd.m.Y H:i:s';

// Angaben zur Website
$baseUrl = 'https://beispiel.de';
$websiteName = 'Mein Blog';
$headerTitle = 'Mein Blog';
$headerSubtitle = 'Willkommen auf | meinem Blog';

Die Angabe der Adresse der Website (Variable $baseUrl) ist optional; wenn sie fehlt, wird sie anhand der URL der Seite automatisch ermittelt. Der Name der Website (Variable $websiteName) wird u.a. für das Logo über dem Header (Kopfbereich der Website) verwendet. Header-Titel und -Untertitel (Variablen $headerTitle und $headerSubtitle) werden über das Header-Bild (s.u.) geschrieben. Dieses befindet sich oben quer über jeder Webseite. Das Zeichen | im Header-Untertitel wird nicht mit ausgegeben; es fügt eine "Sollbruchstelle" ein, an der der Text auf schmalen Displays zuerst umgebrochen wird, damit er auch dann noch symmetrisch erscheint.

Weitere Hinweise zu den möglichen Anpassungen enthalten die Kommentare in der config.php.

Individuelle Anpassungen

Das Blog-System kann in weiten Teilen individuell angepasst werden ("Customizing"). Hier ein Überblick über die verschiedenen Möglichkeiten:

Das Aussehen anpassen

Grundlegende Anpassungen, die das Erscheinungsbild der Website betreffen, etwa Farben, Ecken-Radien und Bilder, lassen sich in der Datei lib/user.css vornehmen. Dabei handelt es sich um einen Ausschnitt aus dem großen Standard-Stylesheet lib/default.css. Hier ein Auszug aus dieser Datei mit einigen anschließenden Erläuterungen:

--WebsiteIcon: url('media/default-favicon.png');
--DefaultFgColor: #000000;
--DefaultBgColor: #E6E9EC;
--DefaultBorderRadius: 7px;
--HeaderImage: url('media/default-header-image.jpg');
--ContentBgImage: url('media/default-article-image.jpg');

Die auf "Color" endenden Variablen sind die Farbvariablen. Die Farbwerte sind hier in Hexadezimal-Schreibweise angegeben, aber man kann natürlich auch andere Schreibweisen verwenden wie z.B. rgb(...). Mehr zur Anpassung der Farben weiter unten unter Ein Benutzer-Stylesheet erstellen.

Das Website-Icon (Variable --WebsiteIcon) wird z.B. im Browser beim Lesezeichen oder in der Tab-Leiste angezeigt. Das Header-Bild (Variable --HeaderImage) wird oben quer über jeder Webseite des Blogs angezeigt. Das Standard-Beitragsbild (Variable --ContentBgImage) wird verwendet, wenn man zu einem Artikel kein individuelles Beitragsbild angibt. Das Beitragsbild wird in der Beitragsübersicht angezeigt und auch beim "Teilen" des Links in Messengern und Sozialen Netzwerken verwendet.

Die angegebenen Bilder sind bereits in der Grundinstallation enthalten. Eigene Bilder können über die Medienverwaltung hochgeladen und deren Pfade (media/...) dann hier eingefügt werden.

Dies ist nur ein kleiner Teil der möglichen Anpassungen am Design und am Layout der Website. Mehr dazu weiter unten.

Eine Übersetzung hinzufügen

In der config.php gibt es den Parameter $lang für die verwendete Sprache. Dieser kann z.B. 'de' für Deutsch oder 'en' für Englisch lauten. Wird eine andere Sprache gewünscht, kann deren zweistelliges Kürzel hier angegeben werden (z.B. $lang = 'fr'; für Französisch). Falls für eine Sprache noch keine Übersetzung existiert, wird Englisch verwendet.

Um eine Übersetzung für eine neue Sprache zu erstellen, kann man eine der vorhandenen Sprachdateien lib/lang-en.php oder lib/lang-de.php öffnen und anpassen. Die neue Sprachdatei wird dann unter dem Namen lang-xx.php abgespeichert, wobei xx das Sprachkürzel ist, z.B. lang-fr.php für Französisch.

Das Design und das Layout ändern

Das Design umfasst das Aussehen einzelner Elemente wie z.B. die Farben, Randabstände oder Rundungen. Das Layout bezieht sich auf die Anordnung der einzelnen Elemente, z.B. ob die Seitenleiste links oder rechts neben dem Hauptinhalt angezeigt wird.

Alle Änderungen am Design und am Layout werden an Stylesheet-Dateien (*.css) vorgenommen, die im Unterverzeichnis lib liegen. Welche Stylesheets aktiv sind, kann in der Datei config.php angegeben werden:

// Stylesheets für den "Live"-Modus
$stylesheet = 'default.css'; // Standard-Stylesheet
$userStylesheet = 'user.css'; // Benutzer-Stylesheet (optional)

Das Standard-Stylesheet ist default.css. Zusätzlich ist es möglich, ein optionales Benutzer-Stylesheet zu erstellen und dessen Dateinnamen dann hier einzutragen (hier user.css), um einzelne Angaben des Standard-Stylesheets zu "überschreiben" (siehe dazu weiter unten im Abschnitt Ein Benutzer-Stylesheet erstellen).

Einige beispielhafte Benutzer-Stylesheets und die dazugehörigen Bilder (Website-Icon, Header-Bild, Standard-Beitragsbild) werden bereits mitgeliefert:

user.css: Ein Ausschitt aus dem Standard-Stylesheet default.css.
cool.css: Ein Stylesheet mit kühlen Farbtönen (entspricht dem Standard-Stylesheet).
warm.css: Ein Stylesheet mit warmen Farbtönen.
green.css: Ein Stylesheet mit hellgrünen Farbtönen.
dark.css: Ein Stylesheet mit sehr dunklen Farben.

Um eins dieser Stylesheets zu aktivieren und zu sehen, wie es das Design der Website verändert, einfach mal einen dieser Dateinamen in die config.php unter $userStylesheet eintragen und die Website neu laden.

Möchte man nicht nur geringfügige Änderungen am vorgegebenen Design vornehmen (z.B. nur die Farben oder die Rundungsradien der Ecken ändern), sondern ein komplett neues Design erstellen, legt man sich dafür am besten ein neues Stylesheet an und gibt dessen Namen in der config.php unter $stylesheet an. Dazu kann man sich eine Kopie der default.css erstellen und diese anpassen.

Vorschau-Modus

Damit sich Änderungen am Design und am Layout nicht sofort auf das "Live-System" auswirken, gibt es einen speziellen Vorschau-Modus mit einem eigenen Satz von Stylesheets.

Um die Blog-Seiten im Vorschau-Modus zu betrachten, einfach auf den Menü-Button Vorschau klicken. Im Vorschau-Fenster auf der rechten Seite des Editors ist der Vorschau-Modus immer aktiv.

Standardmäßig sind die Stylesheets von "Live"- und Vorschau-Modus identisch. Während der Entwicklung eines neuen Layouts oder Designs können für den Vorschau-Modus andere Stylesheets in der config.php angegeben werden, z.B.:

// Stylesheets für den Vorschau-Modus
$stylesheetPreview = 'mein-neues-layout.css';
$userStylesheetPreview = 'mein-design.css';

Wenn das neue Layout oder Design fertig ist, können die Vorschau-Stylesheets "scharfgeschaltet" werden, indem man sie in der config.php auch für das "Live-System" übernimmt.

Ein Benutzer-Stylesheet erstellen

Geringfügige Anpassungen, die das Erscheinungsbild betreffen, etwa das Website-Icon, ein Header-Bild, ein Standard-Beitragsbild und die Farben, kann man entweder im Benutzer-Stylesheet user.css vornehmen, oder man erstellt man sich dafür ein eigenes Benutzer-Stylesheet. Dieses enthält nur die gegenüber dem Standard-Stylesheet abweichenden Definitionen und ist somit sehr klein und übersichtlich.

Um ein neues Benutzer-Stylesheet zu erstellen, legt man über den Menü-Button Neu eine neue, leere Datei mit dem Dateityp "System" an, trägt als Dateiname z.B. mein-design.css ein uns speichert sie ab. Dann trägt man diesen Namen in die config.php unter $userStylesheetPreview ein:

// Stylesheets für den Vorschau-Modus
$stylesheetPreview = 'default.css';
$userStylesheetPreview = 'mein-design.css';

Dann kopiert man sich aus der default.css die Zeilen aus dem oberen Teil mit den Variablen von "html {" bis einschließlich zum dazugehörigen "}" in die Zwischenablage (markieren und Strg+C) und fügt ihn mit Strg+V in das Benutzer-Stylesheet ein:

html {
	--DefaultFgColor: #000000;
	--DefaultBgColor: #E0E3F2;
	--DefaultBorderRadius: 10px;
	... (usw.) ...
}

Man braucht nicht alle Zeilen zu kopieren, sondern nur die, deren Werte man gegenüber dem Standard-Stylesheet verändern möchte.

Diese Datei kann man nun "nach Herzenslust" anpassen. Keine Angst, man kann nichts kaputtmachen, da man ja nur die Vorschau-Version verändert, die keine Auswirkungen auf das Live-System hat.

Öffnet man eine CSS-Datei im Editor ("Öffnen > Auflisten: System > Dateiname: default.css > Öffnen"), dann werden in der Vorschau auf der rechten Seite die Farb-Variablen visuell dargestellt.

Zur Anpassung einer Farbe markiert man im Editor (linke Seite) den Farbwert mit der Maus (z.B. #E0E3F2) und klickt auf den Farbpicker oben in der Werkzeugleiste, um eine andere Farbe auszuwählen und in den Editor einzufügen.

Der Farbpicker sieht auf den verschiedenen Browsern etwas unterschiedlich aus. Grundsätzlich ist er aber zweigeteilt: Mit Klick auf die rechte Hälfte wird die Farbe ausgewählt, und ein Klick auf die linke Hälfte fügt den Farbcode in den Editor ein.

Um das Ergebnis der Anpassungen zu kontrollieren, speichert man die Datei ab und klickt auf den Vorschau-Button im Menü. Dadurch öffnet sich die Hauptseite des Blogs in einem neuen Browser-Tab. Falls die Seite bereits in einem anderen Tab geöffnet ist, kann man dort F5 drücken zum Neuladen.

Ist alles fertig, übernimmt man den Namen des neuen Benutzerstylesheets auch in die config.php-Variable $userStylesheet:

// Stylesheets für den "Live"-Modus
$stylesheet = 'default.css';
$userStylesheet = 'mein-design.css';

Änderung am Webseiten-Layout

Hätte man z.B. auf großen Displays die Seitenleiste mit den Widgets lieber links vom Hauptinhalt, dann übernimmt man den folgenden Abschnitt aus dem Standard-Stylesheet in das Benutzer-Stylesheet und vertauscht dort im Abschnitt...

@media (min-width: 800px) {
	body {
		grid-template-areas:
			"menu-left-space     menu                menu                menu-right-space"
			"header              header              header              header"
			"left-space          main                sidebar             right-space"
			"left-space          footer              footer              right-space";
		grid-template-columns:
			auto                 minmax(auto, 800px) 280px               auto;
	}
}

... die blau mit den grün gekennzeichneten Angaben, so dass dann "sidebar" links von "main" und "280px" links von "minmax(...)" steht. Ein Beispiel dafür ist im Benutzer-Stylesheet dark.css zu finden.

Das soll als Anregung an dieser Stelle erst einmal genügen. Durch entsprechend umfangreiche Änderungen an der default.css lässt sich im Prinzip ein komplett anderes "Theme" (wie man bei WordPress sagen würde) erstellen. Und falls man sich mal "verkonfiguriert" hat, einfach die Originaldatei wieder auf den Server hochladen und nochmal probieren...

Eine Startseite erstellen

Blog oder klassische Website?

Reine Blogs listen die vorhandenen Artikel meist direkt auf der Startseite auf. Dazu erstellt man eine leere Datei mit dem Dateityp "Index" und speichert sie unter dem Dateinamen "index" ab - fertig. Diese Variante ist im Auslieferungszustand bereits vorgegeben.

Hat man als Startseite lieber eine statische Seite und die Auflistung der Artikel auf einer Unterseite, dann erstellt man eine neue Datei mit dem Dateityp "Seite" und speichert sie unter dem Dateinamen "index" ab. Dann erstellt man eine leere Datei mit dem Dateityp "Index" und speichert sie unter einem beliebigen anderen Dateinamen ab, z.B. "blog". Unter diesem Namen kann man sie dann im Menü verlinken.

Theoretisch wäre es natürlich auch möglich, eine Website nur aus statischen Seiten zu erstellen, ohne die Blog-Funktionalität zu nutzen.

Das Menü erscheint beim vorgegebenen Design am oberen Seitenrand. Wenn genügend Platz vorhanden ist, sind alle Menüpunkte nebeneinander zu sehen. Auf schmalen Displays oder wenn zu viele Menüpunkte vorhanden sind, erscheint stattdessen ein "Hamburger-Symbol" (☰). Klickt man darauf (oder tippt es auf Touchscreens an), öffnet sich das Menü, wobei die Menüpunkte diesmal untereinander dargestellt werden.

Im Menü kann alles verlinkt werden, was eine URL hat: Interne Artikel (Beiträge, Seiten), externe Seiten, ein Kontaktformular, ... etc. Standardmäßig sind einige Beispiel-Menüpunkte enthalten, die aber nach Belieben angepasst oder auch gelöscht werden können.

Nach der Installation enthält das Menü bereits einige Beispiel-Menüpunkte und Untermenüs, die angepasst oder entfernt werden können. Insbesondere wäre zu überlegen, das "Admin"-Untermenü zu entfernen und sich die dort enthaltenen Links zum Blog-Editor, zum Setup-Programm, zur Website-Statistik und zur Hilfe-Seite als Browser-Bookmarks abzuspeichern.

Um das Menü anzupassen, bearbeitet man die Datei lib/menu.xml. Öffnet man diese über "Öffnen > Auflisten: System > Dateiname: menu.xml > Öffnen" im Blog-Editor, dann sieht man rechts auch gleich eine Vorschau, wie das Menü aussehen wird.

Die Datei menu.xml hat folgenden Aufbau:

<menu>
	<item link="URL">LABEL</item>
</menu>

Hierbei steht URL für die Adresse der zu verlinkenden Seite und LABEL für den Text des Menüpunktes. Also z.B.:

<menu>
	<item link="about">Über diese Seite</item>
</menu>

Weitere Menüpunkte werden nach demselben Schema hinzugefügt, indem man die item-Zeile dupliziert und entsprechend anpasst.

Links zu Blog-Artikeln lassen sich auch über die Dateiverwaltung einfügen: Öffnen > Auflisten: Artikel > (den gewünschten Artikel auswählen) > (in der Dropdown-Box links neben dem Einfügen-Button "Dateiname" auswählen) > Einfügen.

Möchte man, dass sich die verlinkte Seite in einem neuen Browser-Tab öffnet, kann man noch newtab="true" angeben:

<menu>
	<item link="help" newtab="true">Hilfe</item>
</menu>

Das Menü kann theoretisch beliebig tief "verschachtelt" werden. Um ein Untermenü hinzuzufügen, wird folgende Syntax verwendet (blau hervorgehoben):

<menu>
	<item link="about">Über diese Seite</item>
	<item>Untermenü</item>
	<menu>
		<item link="URL">LABEL</item>
	</menu>
</menu>

Auch hier können nach demselben Schema weitere Menüpunkte zum Untermenü hinzugefügt werden, nämlich indem man die item-Zeile dupliziert und entsprechend anpasst. Auch lassen sich innerhalb des inneren menu-Blocks weitere Untermenüs einfügen.

Schließlich gibt es noch zwei Typen von "automatischen Untermenüs": Neue Beiträge und Beitragskategorien (ebenfalls blau hervorgehoben):

<menu>
	<item link="about">Über diese Seite</item>
	<item>Untermenü</item>
	<menu>
		<item link="aktuell">Aktuell</item>
	</menu>
	<item type="recent-posts" max="10">Neu</item>
	<item type="categories" max="10">Themen</item>
</menu>

Das Attribut type gibt an, was in das Untermenü eingefügt wird: "recent-posts" fügt die Titel der neuesten Blog-Einträge ein, "categories" die vorhandenen Kategorien. Das Attribut max gibt an, wieviele Menüpunkte (Beiträge bzw. Kategorien) maximal in das jeweilige Untermenü eingefügt werden sollen.

Ein Kontaktformular erstellen

Das Kontaktformular emöglicht es den Besuchern der Seite, dir eine E-Mail-Nachricht zukommen zu lassen, ohne dass auf der Website deine E-Mail-Adresse angegeben werden muss. So kann diese nicht von Datensammlern abgegriffen werden und ist zudem vor Spam geschützt.

Es können beliebig viele Kontaktformulare erstellt werden, etwa für unterschiediche Empfänger oder zu unterschiedlichen Zwecken. Das eigentliche Formular sieht jedoch immer gleich aus und enthält immer die vier Felder Name, E-Mail-Adresse, Betreff und Nachricht. (Um das Layout des Formulars zu ändern, müsste die Systemdatei contact.php angepasst werden.)

Um ein neues Kontaktformular zu erstellen, lege über den Menü-Button Neu eine neue Datei an. Wähle die Vorlage "Kontaktformular" aus. Im Dialog Datei-Informationen bearbeiten wähle als Dateityp "Seite" aus und gib einen Titel an (z.B. "Kontakt"). Als Dateiname wird dann "kontakt" vorgeschlagen. Klicke auf Schließen oder Speichern. Rechts wird jetzt eine Vorschau des Kontaktformulars angezeigt, und im Editor steht folgender Code:

<?php
//$infoText = '';
	$recipientEmail = 'me@example.com';
	$recipientName = 'My Name';
	$subjectPrefix = '[Prefix]';
	$adminDataEnabled = false;
	$sessionLogEnabled = false;
	$captchaEnabled = false;
	$captchaSecret = 'A1b2C3d4E5f6';
	include 'lib/contact.php';
?>

(Diesen Code kannst Du natürlich auch manuell in einen bestehenden Artikel kopieren.)

Passe nun die Werte nach Bedarf an:

$infoText: Ein kurzer Einleitungstext oder -satz, der über dem Kontaktformular ausgegeben werden soll. Falls ein Fehler auftritt, oder wenn die Nachricht erfolgreich gesendet wurde, erscheint stattdessen eine entsprechende Meldung. Entferne die beiden Kommentarzeichen // am Zeilenbeginn, um den Infotext zu aktivieren; andernfalls wird ein Standardtext ausgegeben. Die Angabe %s im Infotext kann als Platzhalter für den Namen des Empfängers (s.u.) verwendet werden. Wenn aktiviert, aber leer, wird kein Infotext ausgegeben.
$recipientEmail: Die E-Mail-Adresse, an die die Nachricht geschickt werden soll.
$recipientName: Der Name des Empfängers. Kann auch leer bleiben (dann wird der Name der Website verwendet).
$subjectPrefix: Ein kurzer Text, der der Betreffzeile vorangestellt werden soll. Das soll es erleichtern, schon im Posteingang zu erkennen, ob eine Mail über das Kontaktformular versendet wurde. Kann auch leer bleiben.
$adminDataEnabled: Auf true setzen, um einige administrative Daten an die E-Mail anzuhängen (IP-Adresse, Referrer, Sprache, Browser).
$sessionLogEnabled: Auf true setzen, um einige Informationen an die E-Mail anzuhängen, aus denen hervorgeht, wie der Besucher mit dem Kontaktformular interagiert hat. Dies soll es ermöglichen, zukünftig geeignete Maßnahmen gegen Spambots zu ergreifen, z.B. falls erkennbar ist, dass die Formularfelder schneller ausgefüllt worden sind, als das ein Mensch normalerweise schafft.
$captchaEnabled: Auf true setzen, wenn eine Spamschutz-Aufgabe (Captcha) verwendet werden soll. Ist das Captcha aktiviert, wird unter dem Formular ein Schachbrett eingeblendet, auf das durch Klicken oder Tippen zwei Smileys auf die richtigen Felder gesetzt werden müssen. Bei einer falschen Antwort gibt es nach dem Absenden eine Verzögerung von einigen Sekunden (dies soll Brute-Force-Angriffe abwehren), bevor eine Fehlermeldung ausgegeben wird.
$captchaSecret: Ein geheimer Text, mit dem die Captcha-Antwort beim Absenden des Formulars verschlüsselt wird. Das soll es den "bösen Buben" erschweren, den Spamschutz zu umgehen. Das kann einfach irgend eine zufällige Folge von Buchstaben und Zahlen sein.

Zusätzlich kann das Kontaktformular natürlich - wie jeder andere Artikel auch - mit individuellen Texten, Bildern und beliebigen anderen Inhalten "angereichert" werden.

Ist alles konfiguriert, speichere die Datei.

Verwendung

Das Kontaktformular kann nun über seinen Dateinamen aufgerufen werden oder im Menü oder in einem Artikel verlinkt werden. Lautet der Dateiname z.B. "kontakt", kann man es ins Menü einbinden, indem man Folgendes in die menu.xml einfügt:

<menu>
	<item link="kontakt">Kontakt</item>
</menu>

Ebenso einfach kann das Kontaktformular auch in einem Artikel verlinkt werden.

<a href="kontakt">Kontaktformular</a>

Es ist auch möglich, den Betreff und/oder das Nachrichtenfeld mit einem Text vorzubelegen:

<a href="kontakt?subject=Bestellung">Bestellen</a>

<a href="kontakt?subject=Betreff&message=Nachricht Zeile 1{}Nachricht Zeile 2">Kontaktformular</a>

Der Platzhalter {} bewirkt im Nachrichtentext einen Zeilenwechsel.

Zum komfortablen Einbinden des Kontaktformulars in einen Artikel existieren beispielhaft drei Snippets (contact*.html), in denen aber ggf. noch der Dateiname des Kontaktformulars angepasst werden muss.

Widgets einrichten

Widgets (übersetzt in etwa "Dingsbums") sind Elemente, die in die Seitenleiste eingebunden werden können. Sie können beliebigen Inhalt anzeigen, sollten aber auf jeweils eine Aufgabe beschränkt sein. Klassische Widgets sind bei Blogs so Sachen wie "Neueste Beiträge", "Beitragskategorien", "Schlagwörter" und "Suche". Diese sind auch Bestandteil dieses Blog-Systems. Zudem noch ein Losungs-Widget und ein Bild-mit-Link-Widget. Letzteres macht nichts anderes, als ein Bild anzuzeigen, das mit einem Link versehen ist. Wenn der Besucher das Bild anklickt, wird er auf die verlinkte Seite geleitet.

Die Widget-Dateien befinden sich im Unterverzeichnis "widgets" und können mit dem Blog-Editor bearbeitet werden ("Öffnen > Auflisten: Widgets > Dateiname: (die gewünschte Datei auswählen) > Öffnen"), was den Vorteil hat, dass man rechts gleich eine Vorschau sieht.

Dateien mit der Endung .php oder .html sind die Widget-Dateien. Diese enthalten PHP- und/oder HTML-Code zur Darstellung des Inhalts. Über die Konfigurationsdatei widgets.xml werden die Widgets in die Seitenleiste eingebunden. Die Syntax ist ganz einfach:

<widgets>
	<item filename="dateiname.php">Titel</item>
</widgets>

dateiname.php ist der Dateiname des Widgets, also z.B. "tags.php". Titel ist der Widget-Titel, so wie er in der Seitenleiste erscheinen soll.

Die Widgets erscheinen in genau der Reihenfolge und mit den Titeln in der Seitenleiste, wie sie auch in der widgets.xml angegeben sind. Um ein Widget aus der Seitenleiste zu entfernen, kann man die betreffende item-Zeile entweder löschen oder mit  auskommentieren.

Ein neues Widget erstellen

Um nun ein neues Widget zu erstellen, legt man eine neue, leere Datei mit Dateityp "Widget" an. Um - als einfaches Beispiel - ein Widget mit Bild-Link zu erstellen, kann man folgenden HTML-Code verwenden:

<p><a href="artikel-link"><img src="media/bild.jpg"></a></p>

Den Link zu einem Artikel (artikel-link) kann man direkt hinschreiben, oder man fügt ihn über die Dateiverwaltung ein ("Öffnen > Auflisten: Artikel > (den gewünschten Artikel auswählen) > (in der Dropdown-Box links neben dem Einfügen-Button „Dateiname“ auswählen) > Einfügen"). Den Bild-Link (media/bild.jpg) kann man aus der Medienverwaltung einfügen ("Medien > (die gewünschten Mediendatei auswählen) > Einfügen").

Im Vorschau-Bereich rechts müsste nun das neue Widget zu sehen sein, allerdings noch mit einem Standard-Titel. Wenn alles so aussieht, wie es soll, speichert man die Widget-Datei unter einem neuen Namen ab, z.B. test-widget.html, öffnet die Konfigurationsdatei widgets.xml und fügt das neue Widget dort zusammen mit einem kurzen Titel (z.B. Test-Widget) ein:

<widgets>
	<item filename="test-widget.html">Test-Widget</item>
</widgets>

In der Vorschau rechts müsste das Test-Widget nun zusammen mit den anderen Widgets zu sehen sein. Nach Speichern der geänderten widgets.xml erscheint das neue Widget dann auch auf der "echten" Website.

Eine Vorlage erstellen

Wenn man oft neue Blog-Artikel erstellt, kann es sinnvoll ein, sich dafür eine Vorlage zu machen, die einige immer wiederkehrende Elemente enthält, etwa ein Aufmacher-Bild, ein kurzer Anreißer-Text in Fettschrift und z.B. eine Datumsangabe. Nichts leichter als das! Aus dem Menü wählen: "Neu > Leere Seite > OK > Dateityp: Vorlage > Dateiname: (irgendwas Aussagekräftiges) > Schließen". Dann Text eingeben und speichern. Das war's!

Um nun einen neuen Artikel auf Basis dieser Vorlage zu erstellen, einfach den Menü-Button Neu anklicken, die neue Vorlage auswählen und loslegen...

Einen Textbaustein erstellen

Textbausteine sind wiederverwendbare kurze Texte, die in Artikel eingefügt werden können und zentral gepflegt werden. Änderungen an einem Textbaustein werden sofort in allen Artikeln sichtbar, in denen er eingefügt ist.

Um einen neuen Textbaustein zu erstellen, lege über den Menü-Button Neu eine neue Datei mit dem Dateityp "Textbaustein" an, schreibe den gewünschten Text hinein und speichere sie unter einem sprechenden Namen ab.

Mit folgendem PHP-Code wird dieser Textbaustein dann in einen Artikel eingebunden, wobei dateiname.html dem Dateinamen der soeben abgespeicherten Datei entspricht:

<?php include 'textblocks/dateiname.html';?>

Und weil man das natürlich nicht jedesmal tippen will, legt man sich dafür sinnvollerweise ein Snippet an und bindet dieses in das Snippet-Menü ein: Erstelle eine neue Datei mit dem Dateityp "Snippet" und füge dort obigen PHP-Code ein. Öffne anschließend die Datei "snippets.xml" aus dem Bereich Snippets und füge das neue Snippet an passender Stelle ein.

Das Erstellen eigener Snippets wird im nächsten Abschnitt ausführlich erklärt.

Ein Snippet erstellen

Um ein neues Snippet für den Editor zu erzeugen, einfach über den Menü-Button Neu eine neue Datei (Vorlage: "Leere Seite") mit dem Dateityp "Snippet" erstellen, einen Dateinamen vergeben, den Code einfügen und abspeichern. Anschließend über den Menü-Button Öffnen die Datei snippets.xml aus dem Bereich Snippets öffnen und nach folgendem Beispiel das neue Snippet an gewünschter Stelle einbinden:

<snippets>
	<section caption="——— Abschnitt ———">
		<item filename="snippet-dateiname.html">Snippet-Titel</item>
	</section>
</snippets>

Das Snippet-Menü besteht aus beliebig vielen Abschnitten (section-Blöcke). Jeder Abschnitt hat eine Überschrift (caption) und enthält seinerseits wiederum beliebig viele Snippet-Elemente (item-Zeilen). Ein Snippet-Element (item-Zeile) enthält den Dateinamen des Snippets (filename) und den Titel, der im Menü angezeigt wird.

In der Vorschau rechts sollte das neue Snippet nun aufgeführt und sein Inhalt angezeigt werden. Falls unter dem angegebenen Dateinamen kein Snippet gefunden werden kann, wird eine entsprechende Fehlermeldung angezeigt. Nach Speichern der snippets.xml ist das neue Snippet im Snippet-Menü auswählbar.

Ein Snippet kann verschiedene Variablen enthalten, die beim Einfügen in den Text durch die im Text markierten Zeilen / Textteile ersetzt werden. Als Trenner zwischen den einzelnen Text-Teilen fungieren dabei der Zeilenumbruch, der Tabulator und die Zeichen [ | ].

Es gibt 3 unterschiedliche Snippet-Typen:

1. Inline-Snippets

Diese bestehen meist aus einer einzelnen Zeile (z.B. einem Link) und können bis zu 5 einzelne Teile enthalten:

Die Variablen @PART1@ bis @PART5@ werden durch den 1., 2., 3., 4. oder 5. markierten Teil bzw. Zeile ersetzt.

Beispiel-Snippet:

<a href="@PART2@">@PART1@</a>

Markierter Text:

Herzlich willkommen!|willkommen

Der erste Teil des markierten Textes (Herzlich willkommen!) wird in die Variable @PART1@ eingesetzt, der zweite Teil (willkommen) in die Variable @PART2@. Das Ergebnis nach Einfügen des Snippets wäre dann:

<a href="willkommen">Herzlich willkommen!</a>

Darstellung auf der Webseite:

Herzlich willkommen!

2. Multiline-Snippets

Bei diesen werden die Variablen durch die markierten Zeilen ersetzt:

@LINE1@ bis @LINE3@ wird durch die 1., 2. oder 3. markierte Zeile ersetzt.
@MULTILINE@ wird durch weitere aufeinanderfolgende, markierte Zeilen ersetzt (z.B. mehrere Absätze bei Zitaten). Hierzu wird die Snippet-Zeile, die das @MULTILINE@ enthält, entsprechend oft vervielfältigt.
@LASTLINE@ wird durch die letzte markierte Zeile ersetzt (z.B. für eine Zitatquelle oder einen Bild-Untertitel). Falls nicht benötigt, bitte eine Leerzeile zusätzlich markieren.

Beispiel-Snippet:

<blockquote>
	<p>@MULTILINE@</p>
	<cite>@LASTLINE@</cite>
</blockquote>

Markierter Text:

Dies ist ein schlaues Zitat von irgendjemand ganz Berühmten.
Etwas ganz Tolles, das er irgendwann mal gesagt haben soll.
Quelle: Vergessen

Ergebnis nach Einfügen des Snippets:

<blockquote>
	<p>Dies ist ein schlaues Zitat von irgendjemand ganz Berühmten.</p>
	<p>Etwas ganz Tolles, das er irgendwann mal gesagt haben soll.</p>
	<cite>Quelle: Vergessen</cite>
</blockquote>

Darstellung auf der Webseite:

Dies ist ein schlaues Zitat von irgendjemand ganz Berühmten.

Etwas ganz Tolles, das er irgendwann mal gesagt haben soll.
Quelle: Vergessen

3. Tabellen-Snippets

Zum Einfügen von Tabellen. Hierbei handelt es sich quasi um ein "zweidimensionales" Multiline-Snippet: Jede markierte Zeile kann mehrere Teile enthalten. Folgende Variablen gibt es hier:

@TH@ wird durch die in der ersten markierten Zeile enthaltenen Teile ersetzt (Tabellenkopf mit mehreren Spalten). Hierzu wird die Snippet-Zeile mit dem @TH@ entsprechend oft vervielfältigt. Die einzelnen Spalten können durch | oder das Tabulator-Zeichen voneinander getrennt werden.
@TD@ wird durch die in den weiteren markierten Zeilen enthaltenen Teile ersetzt (Tabellenrumpf). Hierzu wird für jede Tabellenspalte die Snippet-Zeile mit dem @TD@ und für jede Tabellenzeile zusätzlich die davor und dahinter liegende Zeile mit dem <tr> und </tr> entsprechend oft vervielfältigt. Die Anzahl der Teile (Tabellenspalten) sollte in allen Zeilen mit @TH@ und @TD@ gleich sein!
@LASTLINE@ wird durch die letzte markierte Zeile ersetzt (Tabellen-Untertitel). Falls nicht benötigt, bitte eine Leerzeile zusätzlich markieren.

Beispiel-Snippet:

<figure>
	<table>
		<tr>
			<th>@TH@</th>
		</tr>
		<tr>
			<td>@TD@</td>
		</tr>
	</table>
	<figcaption>@LASTLINE@</figcaption>
</figure>

Markierter Text:

Ergebnis nach Einfügen des Snippets:

<figure>
	<table>
		<tr>
			<th>Spalte A</th>
			<th>Spalte B</th>
			<th>Spalte C</th>
		</tr>
		<tr>
			<td>Zelle A1</td>
			<td>Zelle B1</td>
			<td>Zelle C1</td>
		</tr>
		<tr>
			<td>Zelle A2</td>
			<td>Zelle B2</td>
			<td>Zelle C2</td>
		</tr>
		<tr>
			<td>Zelle A3</td>
			<td>Zelle B3</td>
			<td>Zelle C3</td>
		</tr>
	</table>
	<figcaption>Tabelle</figcaption>
</figure>

Darstellung auf der Webseite:

Spalte A	Spalte B	Spalte C
Zelle A1	Zelle B1	Zelle C1
Zelle A2	Zelle B2	Zelle C2
Zelle A3	Zelle B3	Zelle C3

Tabelle

Eigene Tastaturkürzel anlegen

Im Editor gibt es bereits einige Tastaturkürzel (siehe Abschnitt Textformatierung). Zusätzlich können auch eigene Tastaturkürzel angelegt oder vorhandene geändert oder entfernt werden. Dies geschieht durch Bearbeiten der Datei keyboard.xml im Bereich System. Das grundsätzliche Format dieser Datei sieht so aus:

<keyboard>
	<shortcut key="x" ctrl="true" shift="false" alt="false" meta="false">
		<command name="Kommando" value="Parameter" />
	</shortcut>
</keyboard>

Für jedes Tastaturkürzel gibt es dort einen <shortcut>...</shortcut>-Block mit Angaben zu den gedrückten Tasten:

key: Der Tastencode der gedrückten Taste (z.B. ein Buchstabe oder eine Zahl). Um einen Tastencode einzufügen, einfach den Button Tastencode oben in der Werkzeugleiste anklicken und innerhalb von 5 Sekunden eine Taste drücken.
ctrl: true, wenn gleichzeitig die "Strg"-Taste gedrückt werden muss.
shift: true, wenn gleichzeitig die "Umschalt"-Taste gedrückt werden muss.
alt: true, wenn gleichzeitig die "Alt"-Taste gedrückt werden muss.
meta: true, wenn gleichzeitig die "Meta"-Taste gedrückt werden muss. Unter Windows ist das die "Windows"-Taste.

Wenn eine der Tasten "Strg", "Umschalt", "Alt" oder "Meta" nicht gedrückt werden muss, kann der Attributwert false oder anders oder leer sein, oder das Attribut kann auch ganz fehlen, so wie in dem Beispiel weiter unten.

Innerhalb des shortcut-Blocks gibt es einen oder mehrere command-Zeilen mit Angaben zu dem Kommando, das ausgeführt werden soll, wenn das Tastaturkürzel betätigt wurde: name ist der Name des Kommandos, value ein optionaler Parameterwert für das Kommando. Je nach Kommando sind nur bestimmte Parameterwerte zulässig. Folgende Kommandos (name) und Parameter (value) sind möglich:

name	value	Anmerkung
Duplicate		Dupliziert den im Editor markierten Text oder - wenn kein Text markiert ist - die gesamte Zeile, in der sich der Cursor befindet.
InsertSnippet	Dateiname	Fügt ein Snippet in den Editor ein. Als Parameter muss der Dateiname eines existierenden Snippets angegeben werden (siehe Abschnitt Ein Snippet erstellen). Das Tastaturkürzel wird im Snippet-Menü als Tooltip angezeigt, wenn die Maus dort über den Snippet-Namen gehalten wird (ohne zu klicken).
InsertString	Text	Fügt den als Parameter angegebenen Text in den Editor ein. Ist dort Text markiert, wird er durch den eingefügten Text ersetzt. Die Zeichen < und > müssen als < und > geschrieben werden.
InsertTag	Text	Fügt den als Parameter angegebenen Text in Form von HTML-Tags in den Editor ein. Wenn dort Text markiert ist, wird dieser von den Tags umschlossen.
Save		Speichert die gerade bearbeitete Datei, sofern ungespeicherte Änderungen vorliegen.
ScrollLine	Zahl	Scrollt den Text im Editor um die angegebene Anzahl von Zeilen hoch (negativer Wert) oder runter (positiver Wert). Der Wert -3 scrollt z.B. 3 Zeilen hoch.

Beispiel:

Das Tastenkürzel Alt+C soll den markierten Text im Editor in die HTML-Tags <code> und </code> einschließen.

<keyboard>
	<shortcut key="c" alt="true">
		<command name="InsertTag" value="code" />
	</shortcut>
</keyboard>

Damit die Änderungen an der keyboard.xml wirksam werden, muss die Editor-Anwendung einmal neu geladen werden (F5-Taste im Browser).

Hilfe zum Blog-System

Die Bedienelemente des Blog-Editors

Die Menüleiste

Button "Neu"

Button "Öffnen"

Die Dateiliste

Der Bereich "Auflisten"

Der Bereich "Funktionen"

Der Bereich "Einfügen"

Der Bereich "Backup"

Button "Speichern"

Button "Bearbeiten"

Dateityp

Datum

Titel

Dateiname

Basis-URL

Beschreibung

Beitragsbild

Kategorien

Schlagwörter

Veröffentlicht

Auflisten

Anpinnen

Vollständig

Button "Medien"

Die Dateiliste

Der Bereich "Auswahl"

Der Bereich "Filter"

Der Bereich "Funktionen"

Button "Anzeigen"

Button "Vorschau"

Button "Hilfe"

Der Papierkorb

Der Bereich "Auswahl"

Der Bereich "Auflisten"

Der Bereich "Funktionen"

Dateien vergleichen

Der Bereich "Springen"

Die Bereiche "Datei 1" und "Datei 2"

Die Werkzeugleiste

Textformatierung

Farben

Formatierung entfernen

Das Snippet-Menü

Installation und Einrichtung des Blog-Systems

Dateien auf den Webspace hochladen

Grundeinstellungen vornehmen mit dem Setup-Programm

Alternativ: Grundeinstellungen manuell vornehmen

Die Website-Konfiguration anpassen

Individuelle Anpassungen

Das Aussehen anpassen

Eine Übersetzung hinzufügen

Das Design und das Layout ändern

Vorschau-Modus

Ein Benutzer-Stylesheet erstellen

Änderung am Webseiten-Layout

Eine Startseite erstellen

Blog oder klassische Website?

Das Menü einrichten

Ein Kontaktformular erstellen

Verwendung

Widgets einrichten

Ein neues Widget erstellen

Eine Vorlage erstellen

Einen Textbaustein erstellen

Ein Snippet erstellen

1. Inline-Snippets

2. Multiline-Snippets

3. Tabellen-Snippets

Eigene Tastaturkürzel anlegen

Beispiel: