<?php
	$type = 'page';
	$published = false;
	$date = '2024-06-01';
	$title = 'Hilfe zum Blog-System';
	$description = '';
	$image = '';
	$cats = '';
	$tags = '';
	$listed = false;
	$pinned = false;
	$front = false;
	$noindex = true;
	$nofollow = false;
	$noarchive = true;
	include 'lib/default-header.php';
?>

<p class="translate center hidden" x-data-translate-from=""></p>

<style>
html:not(.dark) {
	--ExampleFgColor: #0000FF;
	--ExampleBgColor: #FFC0FF;
	--KeywordFgColor: #FF8000;
	--CommentFgColor: #00AA00;
	--SelectBgColor: #C0E0FF;
}
html.dark {
	--ExampleFgColor: #65D9FF;
	--ExampleBgColor: #800000;
	--KeywordFgColor: #FFDE01;
	--CommentFgColor: #80E080;
	--SelectBgColor: #2165A5;
}
.border {
	border: 1px solid var(--ImageBorderColor);
	border-radius: var(--DefaultBorderRadius);
	padding: 0.5em 1em;
}
	<?php include 'lib/contact.css' ?>
</style>

<script>
	<?php include 'lib/contact.js'; ?>
</script>

<details class="toc textbox noprint">
	<summary><b>Inhaltsverzeichnis</b></summary>
</details>

<p>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...</p>

<p>Dieses Blog-System kommt mit einer Handvoll PHP-Dateien aus und benötigt keine Datenbank-Anbindung. Das gesamte Blog-Design und die Konfiguration 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.</p>

<p>Die Artikel können in einem beliebigen Text-Editor verfasst und per SFTP hochgeladen werden, oder es kann der integrierte <a href="lib/editor" target="_blank" rel="noopener">Blog-Editor</a> 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.).</p>

<p>Textformatierungen erfolgen durch direkte Zuweisung von HTML-Tags wie z.B. <b>&lt;p&gt;</b>Paperlapapp<b>&lt;/p&gt;</b> für einen Absatz (Paragraph) oder <b>&lt;b&gt;</b>Blabla<b>&lt;/b&gt;</b> für <b>Fettschrift</b> (Bold). Wie Texte formatiert werden, wird in dem <a href="demo">Demo</a>-Artikel 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.</p>

<h2 id="user-controls">Die Bedienelemente des Blog-Editors</h2>

<p>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.</p>

<p>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".</p>

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

<h2 id="menu-bar">Die Menüleiste</h2>

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

<h3 id="new">Button "Neu"</h3>

<p>Erstellt eine neue Datei (z.B. Blog-Artikel) im Editor. Zunächst kann hier eine <b>Vorlage ausgewählt</b> werden, die als Basis für die neue Datei dient. Es können auch eigene Vorlagen erstellt werden - dazu <a href="#templates">weiter unten</a> mehr.</p>

<p>Nach Auswahl einer Vorlage oder einfach "Leere Seite" öffnet sich das Fenster <b>Datei-Informationen bearbeiten</b>. 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.</p>

<p>Wenn man keinen Blog-Artikel (Beitrag oder Seite) erstellen möchte, sondern z.B. ein <a href="#widgets">Widget</a> oder ein <a href="#snippets">Snippet</a>, kann man im "Bearbeiten"-Dialog einen anderen Dateityp auswählen.</p>

<h3 id="open">Button "Öffnen"</h3>

<p>Öffnet die <b>Dateiverwaltung</b>. 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.</p>

<h4 id="open-files">Die Dateiliste</h4>

<p>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 einer 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.</p>

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

<h4 id="open-list">Der Bereich "Auflisten"</h4>

<p>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.</p>

<h4 id="open-functions">Der Bereich "Funktionen"</h4>

<p>Hier gibt es drei Buttons mit verschiedenen Funktionen:</p>

<ul>
	<li><b>Löschen:</b> 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.</li>

	<li><b>Papierkorb:</b> Ö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 <a href="#trash">an anderer Stelle</a> genauer erklärt.</li>

	<li><b>Vergleichen:</b> 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 <a href="#compare">Dateien vergleichen</a>.</li>
</ul>

<h4 id="open-insert">Der Bereich "Einfügen"</h4>

<p>Dieser Bereich ist nur bei der Auflistung "Artikel" oder "Textbausteine" sichtbar. Durch Klick auf den Button <b>Einfügen</b> 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:</p>

<ul>
	<li><b>Auflistung "Artikel"</b>: Link, Link (geschützt), Popup-Link (statisch oder dynamisch), Titel und/oder Dateiname.
	<ul>
		<li><b>Link</b> ist beispielsweise nützlich, um in einem Artikel einen anderen Artikel zu verlinken.</li>
		<li><b>Link (geschützt)</b> fügt ebenfalls einen Link zu einem Artikel ein, allerdings einen besonderen: Mit Hilfe des Snippets "<a href="demo#protect-section">Absatz &gt; Schützen</a>" kann die über einen solchen Link aufgerufene Seite einen zu schützenden Textabschnitt (z.B. Kontaktinformationen im Impressum) verbergen und stattdessen einen Hinweistext anzeigen, falls die Seite nicht über einen internen Link aufgerufen wurde, sondern von "außerhalb", etwa über eine Suchmaschine oder ein Browser-Lesezeichen. Dies soll dem Schutz der Daten vor Bots dienen.</li>
		<li><b>Popup-Link</b> (stat./dyn.) fügt ebenfalls einen Link zu einem Artikel ein, jedoch wird beim Anklicken zuvor ein Popup-Fenster geöffnet mit dem Beitragsbild und dem Beschreibungstext des Artikels sowie die zwei Buttons "Link öffnen" und "Schließen". Es können zwei Arten von Popup-Links eingefügt werden: Ein "statischer" Popup-Link fügt das Bild und den Beschreibungstext direkt in den Quelltext der Seite ein, wo er nach Bedarf bearbeitet werden kann. Ein "dynamischer" Popup-Link ist dagegen nicht bearbeitbar, sondern ermittelt das Bild und den Beschreibungstext jedesmal neu und reflektiert somit auch spätere Änderungen am verlinkten Artikel.</li>
		<li><b>Titel</b> und/oder <b>Dateiname</b> ist nützlich, um eines der Link-Snippets anzuwenden (siehe <a href="demo#section-links">Demo</a>-Artikel).</li>
	</ul>
	<li><b>Auflistung "Textbausteine"</b>: Hier stehen zwei Einfügearten zur Verfügung:
	<ul>
		<li><b>PHP-Include</b> fügt den Inhalt des ausgewählten Textbausteins in den Artikel ein.</li>
		<li><b>Dateiname</b> fügt den Dateipfad des Textbausteins ein. Dies wird für das oben genannte Snippet "<a href="demo#protect-section">Absatz &gt; Schützen</a>" benötigt.</li>
	</ul>
	</li>
</ul>

<h4 id="open-backup">Der Bereich "Backup"</h4>

<p>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:</p>

<ul>
	<li><b>Erstellen:</b> Öffnet ein weiteres, kleines Dialogfenster zum Erstellen einer Datensicherung. Hier gibt es folgende Bedien-Elemente:
		<ul>
			<li><b>Dateiname:</b> 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.</li>

			<li><b>Auswahl:</b> 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.</li>

			<li><b>Verzeichnisse:</b> Hier werden alle gefundenen Verzeichnisse aufgeführt. Die <b>fett</b> 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.</li>

			<li><b>Start:</b> 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.</li>
		</ul>
	</li>
	<li><b>Download:</b> Über diesen Button kann die in der Dateiliste ausgewählte Datensicherung als ZIP-Datei auf den lokalen Rrchner heruntergeladen werden.</li>
</ul>

<p>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).</p> 

<h3 id="save">Button "Speichern"</h3>

<p>Durch Klick auf diesen Button oder durch die <a href="#keyboard-shortcuts">Tastenkombination</a> <b>Strg+S</b> 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 <b>Datei-Informationen bearbeiten</b> zur Eingabe des Dateinamens und ggf. weiterer Angaben.</p>

<p>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.</p>

<h3 id="edit">Button "Bearbeiten"</h3>

<p>Dieser Button öffnet den weiter oben schon mehrfach erwähnten Dialog <b>Datei-Informationen bearbeiten</b>. 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.</p>

<p>Folgende Angaben zur Datei können gemacht werden:</p>

<h4 id="edit-type">Dateityp</h4>

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

<ul>
	<li>Dateityp <b>Beitrag</b>: Blog-Artikel, der auf der Übersichts-Seite erscheinen soll.</li>

	<li>Dateityp <b>Seite</b>: Blog-Seite, die im Menü oder in einem Widget in der Seitenleiste verlinkt werden soll.</li>

	<li>Dateityp <b>Index</b>: Übersichts-Seite für Blog-Beiträge. Hier erscheinen die aufgelisteten Artikel in chronologischer Folge, wobei die neueren Artikel weiter oben stehen.</li>

	<li>Dateityp <b>Vorlage</b>: Eine Datei mit beliebigem Inhalt (z.B. HTML oder PHP), die beim Erstellen neuer Artikel/Dateien über den Menü-Button <b>Neu</b> zur Auswahl angeboten wird und als Vorlage für die neu zu erstellende Datei dient. Siehe auch <a href="#templates">Eine Vorlage erstellen</a>.</li>

	<li>Dateityp <b>Textbaustein</b>: 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 <a href="#textboxes">Einen Textbaustein erstellen</a>.</li>

	<li>Dateityp <b>Snippet</b>: Ein kleines Text- oder HTML-"Schnipsel", das über das "<b>Einfügen...</b>"-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 <a href="#snippets">Ein Snippet erstellen</a>.</li>

	<li>Dateityp <b>Widget</b>: 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 <a href="#widgets">Widgets einrichten</a>.</li>

	<li>Dateityp <b>Systemdatei</b>: 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, <a href="#config">an anderer Stelle</a> erklärt.</li>
</ul>

<p>Durch entsprechende Benennung der Artikel (Beitrag, Seite, Index) kann festgelegt werden, ob als <a href="#homepage">Startseite</a> (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).</p>

<h4 id="edit-date">Datum</h4>

<p>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).</p>

<h4 id="edit-title">Titel</h4>

<p>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.</p>

<h4 id="edit-filename">Dateiname</h4>

<p>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.</p>

<p>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.</p>

<p>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.</p>

<p>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.</p>

<p>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.</p>

<h4 id="edit-baseurl">Basis-URL</h4>

<p>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. <b>/</b> oder <b>../</b> 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.</p>

<h4 id="edit-description">Beschreibung</h4>

<p>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.</p>

<h4 id="edit-image">Beitragsbild</h4>

<p>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 <a href="#media">Medienverwaltung</a> ausgewählt werden.</p>

<h4 id="edit-cats">Kategorien</h4>

<p>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.</p>

<h4 id="edit-tags">Schlagwörter</h4>

<p>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.</p>

<h4 id="edit-published">Veröffentlicht</h4>

<p>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 (<a href="sitemap.xml" target="_blank" rel="noopener">sitemap.xml</a>) 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.</p>

<p><b>Hinweis:</b> 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 <a href="#menu">Menü</a> oder in einem <a href="#widgets">Sidebar-Widget</a> manuell verlinkt wird, kann er von dort geöffnet werden. Auch wer die Seitenadresse kennt, kann den Artikel öffnen und lesen.</p>

<h4 id="edit-listed">Auflisten</h4>

<p>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 <a href="#menu">Menü</a> oder in einem <a href="#widgets">Sidebar-Widget</a> verlinkt werden sollen.</p>

<h4 id="edit-pinned">Anpinnen</h4>

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

<h4 id="edit-front">Vollständig</h4>

<p>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.</p>

<h4 id="robots">Robots</h4>

<p>Ist eines der folgenden Häkchen gesetzt, dann wird in den Header der Webseite der sogenannte Robots-Tag (&lt;meta name="robots" content="noindex,nofollow,noarchive" /&gt;) eingefügt, der das Verhalten sogenannter Web-Crawler (Bots, Robots) von Suchmaschinen für diesen Artikel steuert:</p>

<ul>
	<li><b>noindex</b>: Die Seite soll nicht in den Suchindex aufgenommen werden.</li>
	<li><b>nofollow</b>: Den Links auf der Seite soll nicht gefolgt werden, um andere Seiten zu finden.</li>
	<li><b>noarchive</b>: Der Inhalt der Seite soll nicht zwischengespeichert und verwendet werden.</li>
</ul>

<p>Es werden nur die Werte in den Robots-Tag aufgenommen, für die ein Häkchen gesetzt ist. Für Seiten wie beispielsweise das Kontaktformular oder das Impressum, die nicht mit Suchmaschinen gefunden werden sollen, würde man die Werte "noindex" und "noarchive" anhaken. Allerdings handelt es sich hierbei nur um eine "Empfehlung". Einige (wie Google und Bing) halten sich daran, andere (Datensammel-Bots) nicht.</p>

<p>Damit Bots die Anweisungen lesen können, müssen sie natürlich erst den Inhalt der Seite laden. Um dies zu verhindern, kann man die betreffenden Seiten zusätzlich auch in der Datei <b>robots.txt</b> im obersten Verzeichnis des Webservers aufführen. Beispiel:</p>

<pre class="textbox">
User-agent: *
Disallow: /lib/
<span style="color: var(--ExampleFgColor);">Disallow: /kontakt</span>
</pre>

<p>Auch hierbei handelt es sich allerdings nur um eine "Empfehlung". Bösartige Bots könnten die Einträge in der <b>robots.txt</b> sogar dafür nutzen, um die für sie interessanten Inhalte überhaupt erst zu finden... also besser mit Vorsicht verwenden.</p>

<h3 id="media">Button "Medien"</h3>

<p>Öffnet die <b>Medienverwaltung</b>. 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. </p>

<h4 id="media-files">Die Dateiliste</h4>

<p>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 <b>Einfügen</b> werden die Links der ausgewählten Dateien in den gerade bearbeiteten Text eingefügt.</p>

<p>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.</p>

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

<h4 id="media-select">Der Bereich "Auswahl"</h4>

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

<ul>
	<li><b>Alle:</b> Wählt alle in der Liste zu sehenden Mediendateien aus.</li>

	<li><b>Keine:</b> Entfernt das Auswahlhäkchen aller in der Liste zu sehenden Mediendateien.</li>

	<li><b>Umkehren:</b> Kehrt die Auswahl um: Gesetzte Häkchen werden entfernt, nicht gesetzte Häkchen werden gesetzt.</li>

	<li><b>Bereiche:</b> 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".</li>
</ul>

<p>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.</p>

<h4 id="media-filter">Der Bereich "Filter"</h4>

<p>Hier kann die Liste der angezeigten Dateien eingeschränkt werden:</p>
<ul>
	<li><b>Medientyp:</b> Einschränkung auf Audio-, Video-, Bild- und sonstige Dateien.</li>

	<li><b>Datei-Endung:</b> Einschränkung auf Dateien mit einer bestimmten Endung (z.B. *.jpg oder *.mp3).</li>

	<li><b>Datei-Jahr:</b> Einschränkung auf Dateien mit einem bestimmten Jahr des Dateidatums.</li>

	<li><b>Datei-Monat:</b> Einschränkung auf Dateien mit einem bestimmten Monat des Dateidatums.</li>
</ul>

<p>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.</p>

<h4 id="media-functions">Der Bereich "Funktionen"</h4>

<p>Hier gibt es drei Buttons mit verschiedenen Funktionen:</p>

<ul>
	<li><b>Hinzufügen:</b> Öffnet ein weiteres, kleines Dialogfenster zum Hochladen einer Mediendatei vom lokalen Rechner. Dort gibt es folgende Bereiche:
		<ul>
			<li><b>Datei:</b> Hier klicken, um die hochzuladende Mediendatei von der Festplatte auszuwählen.</li>

			<li><b>Datum:</b> Wird hier ein Haken gesetzt, dann behält die hochgeladene Datei ihr originales Änderungsdatum. Andernfalls bekommt sie das aktuelle Datum (Hochlade-Datum).</li>

			<li><b>Hochladen:</b> 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).</li>
		</ul>
	</li>
	<li><b>Löschen:</b> Verschiebt die ausgewählten Mediendateien in den Papierkorb.</li>

	<li><b>Papierkorb:</b> 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 <a href="#trash">weiter unten</a> genauer erklärt.</li>
</ul>

<h3 id="view">Button "Anzeigen"</h3>

<p>Ö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.</p>

<h3 id="preview">Button "Vorschau"</h3>

<p>Ö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 <a href="#design-preview">Vorschau-Modus</a>).</p>

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

<h3 id="help">Button "Hilfe"</h3>

<p>Öffnet die Hilfe-Seite (<i>diese</i> Seite) in einem neuen Browser-Tab. Je nachdem, welche Sprache in der <b>config.php</b> <a href="#config">konfiguriert</a> 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.</p>

<h3 id="trash">Der Papierkorb</h3>

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

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

<h4 id="trash-select">Der Bereich "Auswahl"</h4>

<p>Hier gibt es vier Buttons, um die Auswahl von Mediendateien zu unterstützen. Deren Funktion entspricht exakt denen in der Medienverwaltung (<a href="#media-select">siehe dort</a>).</p>

<h4 id="trash-list">Der Bereich "Auflisten"</h4>

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

<h4 id="trash-functions">Der Bereich "Funktionen"</h4>

<p>Hier gibt es drei Buttons mit verschiedenen Funktionen:</p>

<ul>
	<li><b>Wiederherstellen:</b> 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.</li>

	<li><b>Endgültig löschen:</b> Löscht die ausgewählten Dateien aus dem Papierkorb. Sie sind dann "futsch" und können nicht wiederhergestellt werden.</li>

	<li><b>Vergleichen:</b> 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 <a href="#compare">Dateien vergleichen</a>.</li>
</ul>

<h3 id="compare">Dateien vergleichen</h3>

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

<ul>
	<li><span style="background-color: #FF0000; color: white; padding: 0.2em; margin: -0.2em;">Rot hinterlegt</span> sind <b>Löschungen</b>, d.h. Teile von Datei 1, die in Datei 2 fehlen.</li>

	<li><span style="background-color: #00C000; color: white; padding: 0.2em; margin: -0.2em;">Grün hinterlegt</span> sind <b>Hinzufügungen</b>, d.h. sind Teile von Datei 2, die in Datei 1 fehlen.</li>
</ul>

<p>Wird die Funktion "Vergleichen" aus der <b>Dateiverwaltung</b> 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.</p>

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

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

<p>Einige "unsichtbare" Zeichen werden im Textfenster in roter Schrift visualisiert: Leerzeichen (<span style="color: #FF0000; font-size: 0.7em;">&bull;</span>), Tabulator (<span style="color: #FF0000; font-size: 0.7em;">HT</span>), Wagenrücklauf (<span style="color: #FF0000; font-size: 0.7em;">CR</span>) und Zeilenvorschub (<span style="color: #FF0000; font-size: 0.7em;">LF</span>). Dadurch sollen Änderungen noch genauer erkennbar werden.</p>

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

<h4 id="compare-skip">Der Bereich "Springen"</h4>

<p>Hier gibt es zwei Buttons, um innerhalb des Textfensters zum <b>vorherigen</b> und zum <b>nächsten</b> Unterschied zu springen. Statt auf die Buttons zu klicken, kann man auch die <a href="#keyboard-shortcuts">Tastenkürzel</a> <b>Strg+Pfeil hoch</b> bzw. <b>Strg+Pfeil runter</b> benutzen.</p>

<h4 id="compare-filenames">Die Bereiche "Datei 1" und "Datei 2"</h4>

<p>Hier werden die Namen der beiden miteinander verglichenen Dateien angezeigt.</p>

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

<h2 id="toolbar">Die Werkzeugleiste</h2>

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

<p>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.</p>

<p>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.</p>

<h3 id="toolbar-format">Textformatierung</h3>

<p>Wird einer der Buttons angeklickt oder das dazugehörige <a href="#keyboard-shortcuts">Tastaturkürzel</a> 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. <span style="background-color: var(--SelectBgColor); padding: 0.2em; margin: -0.2em;">&lt;p&gt;&lt;/p&gt;</span>). Ist Text markiert, wird der Text mit den Tags umschlossen (z.B. <span style="background-color: var(--SelectBgColor); padding: 0.2em; margin: -0.2em;">&lt;p&gt;Markierter Text&lt;/p&gt;</span>).</p>

<figure>
	<table>
		<tr>
			<th>Button</th>
			<th>Tastaturkürzel</th>
			<th>Funktion</th>
		</tr>
		<tr>
			<td><b>P</b></td>
			<td>Alt+P</td>
			<td>Absatzformatierung einfügen</td>
		</tr>
		<tr>
			<td><b>H2</b> bis <b>H5</b></td>
			<td>Alt+2...5</td>
			<td>Überschrift 2...5 einfügen</td>
		</tr>
		<tr>
			<td><b>B</b></td>
			<td>Alt+B</td>
			<td>Text <b>fett</b> formatieren</td>
		</tr>
		<tr>
			<td><b><i>I</i></b></td>
			<td>Alt+I</td>
			<td>Text <i>kursiv</i> formatieren</td>
		</tr>
		<tr>
			<td><b><u>U</u></b></td>
			<td>Alt+U</td>
			<td>Text <u>unterstrichen</u> formatieren</td>
		</tr>
	</table>
</figure>

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

<ul>
	<li><b>Strg+Enter:</b> Trennt einen Absatz an der aktuellen Cursorposition auf, indem <b>&lt;/p&gt;&lt;p&gt;</b> 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 <i>schwupps</i> steht der Text in zwei Absätzen.</li>

	<li><b>Umschalt+Enter:</b> Fügt einen Zeilenwechsel (<b>&lt;br&gt;</b>) ein. Wenn der Text innerhalb eines Absatzes in einer neuen Zeile weitergehen soll, einfach Umschalt+Enter drücken.</li>

	<li><b>Strg+D:</b> Dupliziert den markierten Text oder, wenn kein Text markiert ist, die ganze Zeile, in der sich der Cursor gerade befindet.</li>

	<li><b>Strg+Hoch/Runter:</b> Zeilenweises Scrollen des Editor-Inhalts.</li>
</ul>

<p>Es können auch eigene Tastaturkürzel angelegt werden - Genaueres dazu im Abschnitt <a href="#keyboard-shortcuts">Eigene Tastaturkürzel anlegen</a>.</p>

<h3 id="toolbar-colors">Farben</h3>

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

<figure>
	<table>
		<tr>
			<th>Funktion</th>
			<th>Beispiel</th>
		</tr>
		<tr>
			<td>Textmarker</td>
			<td><mark>Beispiel</mark></td>
		</tr>
		<tr>
			<td>Hintergrundfarbe</td>
			<td><span style="background-color: var(--ExampleBgColor); padding: 0.2em; margin: -0.2em;">Beispiel</span></td>
		</tr>
		<tr>
			<td>Schriftfarbe</td>
			<td><span style="color: var(--CommentFgColor);">Beispiel</span></td>
		</tr>
	</table>
</figure>

<p>Der <b>Textmarker</b> hat eine vom Browser vorgegebene Farbe (meist gelb). Die <b>Hintergrundfarbe</b> und die <b>Schriftfarbe</b> 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.</p>

<h3 id="toolbar-remove">Formatierung entfernen</h3>

<p>Um eine Formatierung wieder zu entfernen, einfach den Text inklusive der Tags markieren und den Button <b>x</b> anklicken. Mit jedem Klick auf den <b>x</b>-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 <b>x</b>-Button hält (ohne zu klicken).</p>

<h3 id="toolbar-snippets">Das Snippet-Menü</h3>

<p>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 der senkrechte Strich |.</p>

<p>Die Snippets können aus der Auswahlbox ganz rechts in der Werkzeugleiste (im folgenden einfach "Snippet-Menü" genannt) oder - falls vorhanden - durch Eingabe einer <a href="#keyboard-shortcuts">Tastenkombination</a> ausgewählt werden.</p>

<p>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.</p>

<p>Eine Demonstration aller Snippets ist im <a href="demo">Demo</a>-Artikel zu sehen. Wie man eigene Snippets erstellt, wird weiter unten im Abschnitt <a href="#snippets">Ein Snippet erstellen</a> erklärt.</p>

<h2 id="installation">Installation und Einrichtung des Blog-Systems</h2>

<p>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 <a href="https://duckduckgo.com/?q=webspace+php+kostenlos" target="_blank" rel="noopener">kostenlose Anbieter</a>. Möchte man eine eigene Domain für die Website haben (z.B. <b>beispiel.de</b>), wird man wohl zu einem kommerziellen Anbieter greifen müssen. Bei <a href="https://www.strato.de/hosting/" target="_blank" rel="noopener">Strato</a> beispielsweise bekommt man 50 GB Webspace inklusive 1 Domain mit SSL-Zertifikat (https) für 5 €/Monat; bei <a href="https://www.manitu.de/webhosting/" target="_blank" rel="noopener">Manitu</a> kostet es sogar nur die Hälfte (Stand: Juni 2024).</p>

<h3 id="upload">Dateien auf den Webspace hochladen</h3>

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

<ul>
	<li><b>common:</b> Gemeinsame Dateien für alle Sprachen.</li>
	<li><b>de:</b> Dateien für die Sprache Deutsch.</li>
	<li><b>en:</b> Dateien für die Sprache Englisch.</li>
</ul>

<p>Als nächstes wird der Inhalt des Verzeichnisses <b>common</b> auf den Webserver hochgeladen. Dazu startet man ein SFTP-Programm (z.B. <a href="https://www.filezilla.de" target="_blank" rel="noopener">FileZilla</a> oder <a href="https://winscp.net/" target="_blank" rel="noopener">WinSCP</a>), verbindet sich mit dem Webserver, öffnet im linken Fenster das lokale Verzeichnis "common", markiert alle dort zu sehenden Dateien und Unterverzeichnisse startet den Upload.</p>

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

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

<h3 id="setup">Grundeinstellungen vornehmen mit dem Setup-Programm</h3>

<p>Nun sollten noch einige Grundeinstellungen vorgenommen werden. Dazu ruft man aus dem Menü den Punkt "Admin &gt; <a href="lib/setup" target="_blank" rel="noopener">Setup</a>" auf. Wichtig sind zunächst folgende Einstellungen:</p>

<ul>
	<li><b>Zugriffsschutz:</b> Hier sollte <b>Aktiv</b> auf <b>ja</b> 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.</li>
	<li><b>CGI-Scripts:</b> Hier sollte <b>Ausführbar setzen</b> auf <b>ja</b> 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.</li>
	<li><b>Sprache und Region:</b> Hier gibt es folgende Einstellungen:
		<ul>
			<li><b>Sprache:</b> Die Sprache, in der die Webseiten erstellt werden sollen. Diese Angabe bestimmt auch die Übersetzung der Texte dieses Blog-Systems.</li>
			<li><b>Land:</b> Das Land, in dem das Blog-System benutzt wird. Diese Angabe bestimmt die Formatierung von Datumsangaben und die Sortierung von Listen.</li>
			<li><b>Zeitzone:</b> Die Zeitzone für Datumsberechnungen.</li>
			<li><b>Datumsformat (für Editor):</b> Das Format des Zeitstempels von Dateien im Editor.</li>
		</ul>
		Welche Werte für die obigen Felder zulässig sind, kann man durch Klick auf das Info-Icon 🛈 erfahren.
	</li>
	<li><b>Angaben zur Website:</b> Diese Angaben erscheinen auf den einzelnen Seiten des Blogs:
		<ul>
			<li><b>Adresse der Website:</b> 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.</li>
			<li><b>Name der Website:</b> Der Name der Website für Logo und E-Mail-Absender.</li>
			<li><b>Titel des Seiten-Headers:</b> Der Titel des Seiten-Headers.</li>
			<li><b>Untertitel des Seiten-Headers:</b> Der Untertitel des Seiten-Headers.</li>
		</ul>
		Der Seiten-Header erscheint oben quer über jeder Seite des Blogs.
	</li>
	<li><b>Stylesheets</b> für den "Live"- und für den Vorschau-Modus: Durch Auswahl eines der Stylesheets kann das Aussehen (Design und Layout) der gesamten Website geändert werden. Mehr dazu im Kapitel <a href="#design" title="">Das Design und das Layout ändern</a>.</li>
	<li><b>Spezielle Seiten:</b> Hier können die Dateimamen spezieller Seiten angegeben werden, die vom Blog-System verwendet werden.
		<ul>
			<li><b>Link zur Datenschutzerklärung:</b> Dies ist die Seite mit der Datenschutzerklärung, die nach deutschem Recht (und vermutlich auch in anderen Ländern) für Websites vorgeschrieben ist. Ein Link zum Abschnitt "#external-content" dieser Seite wird etwa angezeigt, bevor eingebettete externe Inhalte (z.B. YouTube-Videos) geladen werden.</li>
		</ul>
	</li>
</ul>

<p>Zum Speichern der vorgenommenen Eingaben muss dann nur noch auf den Button <b>Speichern</b> 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.</p>

<h3 id="setup-manual">Alternativ: Grundeinstellungen manuell vornehmen</h3>

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

<p>Zuerst sollten für die .pl-Dateien im Unterverzeichnis <b>lib/cgi-bin</b> (und den darunterliegenden) die Ausführungsrechte gesetzt werden. Dazu verbindet man sich per SFTP oder SSH mit dem Webserver, wechselt in das Unterverzeichnis <b>lib/cgi-bin</b> 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 "<code><b>chmod 755 *.pl</b></code>" ein.</p>

<p>Anschließend ruft man den <a href="lib/editor" target="_blank" rel="noopener">Blog-Editor</a> auf. Diesen erreicht man nach Eingabe der Blog-URL (z.B. <b>beispiel.de</b>) im Browser über das Menü "Admin &gt; Editor" oder über die Adresse <b><i>beispiel.de</i>/lib/editor</b> (wobei <b><i>beispiel.de</i></b> natürlich dem verwendeten Domainnamen entspricht).</p>

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

<pre class="textbox">
admin:$2y$10$V1xgLMroqleW56Sja.s0c.szh2oXgST.vVqZ1FiCowrJdZjMkaLn.
</pre>

<p>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...</p>

<pre class="textbox">
fritz:<span style="background-color: var(--SelectBgColor); padding: 0.2em; margin: -0.2em;">test1234</span>
</pre>

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

<pre class="textbox">
fritz:$2y$10$AdnOhm3i.xhEX0yC0KmHwuSmXY5Jy0irPux4meh67TNkI.Zy.uiCu
</pre>

<p>Um nun den Zugriffsschutz zu aktivieren, öffne die Vorlage-Datei <b>.htaccess.tpl</b> im Editor. Dann klicke auf den Menü-Button <b>Bearbeiten</b> und ändere den Dateinamen zu <b>.htaccess</b>. Wichtig: An dieser Stelle die Datei noch <i>nicht speichern</i>, sondern den Dialog durch Klick auf <b>Schließen</b> 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.)</p>

<p>Die Datei enthält folgende Zeilen (Auszug):</p>

<pre class="textbox">
AuthType Basic
AuthName "Bitte anmelden"
<span style="background-color: var(--SelectBgColor); padding: 0.2em; margin: -0.2em;">AuthUserFile /path/to/lib/.htpasswd</span>
Require valid-user
</pre>

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

<pre class="textbox">
AuthType Basic
AuthName "Bitte anmelden"
<span style="color: var(--ExampleFgColor);">AuthUserFile /home/strato/http/premium/rid/12/34/567890/htdocs/beispiel.de/lib/.htpasswd</span>
Require valid-user
</pre>

<p>Jetzt kann die Datei durch Klick auf den Menü-Button <b>Speichern</b> gespeichert werden.</p>

<p>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.</p>

<h3 id="config">Die Website-Konfiguration anpassen</h3>

<p>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 <a href="#setup">Setup-Programms</a> durchgeführt wurde, kann dies auch manuell konfiguriert werden.</p>

<p>Hierzu wird die Datei <b>lib/config.php</b> 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.</p>

<pre class="textbox">
<span style="color: var(--CommentFgColor);">// Sprache und Region</span>
$lang = '<span style="color: var(--ExampleFgColor);">de</span>';
$locale = '<span style="color: var(--ExampleFgColor);">de_DE</span>';
$phpLocale = '<span style="color: var(--ExampleFgColor);">de_DE.utf8</span>';
$timezone = '<span style="color: var(--ExampleFgColor);">Europe/Berlin</span>';
$DateTimeFormat = '<span style="color: var(--ExampleFgColor);">d.m.Y H:i:s</span>';

<span style="color: var(--CommentFgColor);">// Angaben zur Website</span>
$baseUrl = '<span style="color: var(--ExampleFgColor);">https://beispiel.de</span>';
$websiteName = '<span style="color: var(--ExampleFgColor);">Mein Blog</span>';
$headerTitle = '<span style="color: var(--ExampleFgColor);">Mein Blog</span>';
$headerSubtitle = '<span style="color: var(--ExampleFgColor);">Willkommen auf | meinem Blog</span>';
</pre>

<p>Die Angabe der Adresse der Website (Variable <b>$baseUrl</b>) ist optional; wenn sie fehlt, wird sie anhand der URL der Seite automatisch ermittelt. Der Name der Website (Variable <b>$websiteName</b>) wird u.a. für das Logo über dem Header (Kopfbereich der Website) verwendet. Header-Titel und -Untertitel (Variablen <b>$headerTitle</b> und <b>$headerSubtitle</b>) werden über das Header-Bild (s.u.) geschrieben. Dieses befindet sich oben quer über jeder Webseite. Das Zeichen <b>|</b> 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.</p>

<p>Weitere Hinweise zu den möglichen Anpassungen enthalten die Kommentare in der <b>config.php</b>.</p>

<h2 id="customizing">Individuelle Anpassungen</h2>

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

<h3 id="appearance">Das Aussehen anpassen</h3>

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

<pre class="textbox">
--WebsiteIcon: url('<span style="color: var(--ExampleFgColor);">media/default-favicon.png</span>');
--DefaultFgColor: <span style="color: var(--ExampleFgColor);">#000000</span>;
--DefaultBgColor: <span style="color: var(--ExampleFgColor);">#E6E9EC</span>;
--DefaultBorderRadius: <span style="color: var(--ExampleFgColor);">7px</span>;
--HeaderImage: url('<span style="color: var(--ExampleFgColor);">media/default-header-image.jpg</span>');
--ContentBgImage: url('<span style="color: var(--ExampleFgColor);">media/default-article-image.jpg</span>');
</pre>

<p>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 <a href="#design-user-css">Ein Benutzer-Stylesheet erstellen</a>. </p>

<p>Das Website-Icon (Variable <b>--WebsiteIcon</b>) wird z.B. im Browser beim Lesezeichen oder in der Tab-Leiste angezeigt. Das Header-Bild (Variable <b>--HeaderImage</b>) wird oben quer über jeder Webseite des Blogs angezeigt. Das Standard-Beitragsbild (Variable <b>--ContentBgImage</b>) 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.</p>

<p>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.</p>

<p>Dies ist nur ein kleiner Teil der möglichen Anpassungen am Design und am Layout der Website. Mehr dazu <a href="#design">weiter unten</a>.</p>

<h3 id="translation">Eine Übersetzung hinzufügen</h3>

<p>In der <b>config.php</b> gibt es den Parameter <b>$lang</b> 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. <b>$lang = 'fr';</b> für Französisch). Falls für eine Sprache noch keine Übersetzung existiert, wird Englisch verwendet.</p>

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

<h3 id="design">Das Design und das Layout ändern</h3>

<p>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.</p>

<p>Alle Änderungen am Design und am Layout werden an Stylesheet-Dateien (*.css) vorgenommen, die im Unterverzeichnis <b>lib</b> liegen. Welche Stylesheets aktiv sind, kann in der Datei <b>config.php</b> angegeben werden (oder bequemer noch im <a href="#setup">Setup-Programm</a>):</p>

<pre class="textbox">
<span style="color: var(--CommentFgColor);">// Stylesheets für den "Live"-Modus</span>
$stylesheet = '<b>default.css</b>'; <span style="color: var(--CommentFgColor);">// Standard-Stylesheet</span>
$userStylesheet = '<b>user.css</b>'; <span style="color: var(--CommentFgColor);">// Benutzer-Stylesheet (optional)</span>
</pre>

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

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

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

<p>Um eins dieser Stylesheets zu aktivieren und zu sehen, wie es das Design der Website verändert, einfach mal einen dieser Dateinamen im <a href="#setup">Setup-Programm</a> auswählen oder manuell in die <b>config.php</b> unter <code>$userStylesheet</code> eintragen und die Website neu laden.</p> 

<p>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 <b>config.php</b> unter <code>$stylesheet</code> an. Dazu kann man sich eine Kopie der <b>default.css</b> erstellen und diese anpassen.</p>

<h4 id="design-preview">Vorschau-Modus</h4>

<p>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.</p>

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

<p>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 <b>config.php</b> angegeben werden, z.B.:</p>

<pre class="textbox">
<span style="color: var(--CommentFgColor);">// Stylesheets für den Vorschau-Modus</span>
$stylesheet<u>Preview</u> = '<span style="color: var(--ExampleFgColor);">mein-neues-layout.css</span>';
$userStylesheet<u>Preview</u> = '<span style="color: var(--ExampleFgColor);">mein-design.css</span>';
</pre>

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

<h4 id="design-user-css">Ein Benutzer-Stylesheet erstellen</h4>

<p>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 <b>user.css</b> 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.</p>

<p>Um ein neues Benutzer-Stylesheet zu erstellen, legt man über den Menü-Button <b>Neu</b> eine neue, leere Datei mit dem Dateityp "System" an, trägt als Dateiname z.B. <span style="color: var(--ExampleFgColor);">mein-design.css</span> ein uns speichert sie ab. Dann trägt man diesen Namen in die <b>config.php</b> unter <code>$userStylesheetPreview</code> ein:</p>

<pre class="textbox">
<span style="color: var(--CommentFgColor);">// Stylesheets für den Vorschau-Modus</span>
$stylesheetPreview = 'default.css';
$userStylesheetPreview = '<span style="color: var(--ExampleFgColor);">mein-design.css</span>';
</pre>

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

<pre class="textbox">
html {
	--DefaultFgColor: #000000;
	--DefaultBgColor: #E0E3F2;
	--DefaultBorderRadius: 10px;
	<span style="color: #666666;">... (usw.) ...</span>
}
</pre>

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

<p>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.</p> 

<p>Ö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.</p>

<p>Zur Anpassung einer Farbe markiert man im Editor (linke Seite) den Farbwert mit der Maus (z.B. <span style="background-color: var(--SelectBgColor); padding: 0.2em; margin: -0.2em;">#E0E3F2</span>) und klickt auf den Farbpicker oben in der Werkzeugleiste, um eine andere Farbe auszuwählen und in den Editor einzufügen.</p>

<p>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.</p>

<p>Um das Ergebnis der Anpassungen zu kontrollieren, speichert man die Datei ab und klickt auf den <b>Vorschau</b>-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.</p>

<p>Ist alles fertig, übernimmt man den Namen des neuen Benutzerstylesheets auch in die <b>config.php</b>-Variable <code>$userStylesheet</code>:</p>

<pre class="textbox">
<span style="color: var(--CommentFgColor);">// Stylesheets für den "Live"-Modus</span>
$stylesheet = 'default.css';
$userStylesheet = '<span style="color: var(--ExampleFgColor);">mein-design.css</span>';
</pre>

<h4 id="design-layout">Änderung am Webseiten-Layout</h4>

<p>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...</p>

<pre class="textbox">
@media (min-width: 800px) {
	body {
		grid-template-areas:
			"menu-left-space     menu                menu                menu-right-space"
			"header              header              header              header"
			"left-space          <span style="color: var(--ExampleFgColor);">main</span>                <span style="color: var(--CommentFgColor);">sidebar</span>             right-space"
			"left-space          footer              footer              right-space";
		grid-template-columns:
			auto                 <span style="color: var(--ExampleFgColor);">minmax(auto, 800px)</span> <span style="color: var(--CommentFgColor);">280px</span>               auto;
	}
}
</pre>

<p>... die <span style="color: var(--ExampleFgColor);">blau</span> mit den <span style="color: var(--CommentFgColor);">grün</span> gekennzeichneten Angaben, so dass dann "sidebar" links von "main" und "280px" links von "minmax(...)" steht. Ein Beispiel dafür ist im Benutzer-Stylesheet <b>dark.css</b> zu finden.</p>

<p>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...</p>

<h4 id="light-dark-mode">Hell-/Dunkel-Modus</h4>

<p>Viele moderne Betriebssysteme und Browser bieten einen sogenannten "Dark-Modus", in dem vorwiegend dunkle Farben verwendet werden. Auch Webseiten bieten häufig einen solchen "Dark-Modus" an. Das Blog-System ist hierfür bereits vorbereitet: Über einen Menüpunkt vom Typ "design" (siehe dazu <a href="#menu-type" title="">hier</a>) kann zwischen folgenden drei Möglichkeiten umgeschaltet werden:</p>

<ul>
	<li><b>Automatisch:</b> Das Farbdesign der Website passt sich automatisch an die Voreinstellungen des Betriebssystems bzw. des Browsers an.</li>
	<li><b>Hell:</b> Die Website wird unabhängig von den Voreinstellungen des Betriebssystems bzw. des Browsers in <u>hellem</u> Farbdesign dargestellt.</li>
	<li><b>Dunkel:</b> Die Website wird unabhängig von den Voreinstellungen des Betriebssystems bzw. des Browsers in <u>dunklem</u> Farbdesign dargestellt.</li>
</ul>

<p>Damit diese Umschaltung zwischen Hell und Dunkel funktioniert, muss ein entsprechendes Stylesheet verwendet werden, das die entsprechenden Angaben (z.B. Farben) in zwei unterschiedlichen Blöcken enthält:</p>

<pre class="textbox">
html:not(.dark) {
	<span style="color: var(--CommentFgColor);">/* CSS-Angaben für helles Design, z.B.: */</span>
	--DefaultFgColor: black;
	--DefaultBgColor: white;
	...
}

html.dark {
	color-scheme: dark;
	<span style="color: var(--CommentFgColor);">/* CSS-Angaben für dunkles Design, z.B.: */</span>
	--DefaultFgColor: white;
	--DefaultBgColor: black;
	...
}
</pre>

<p>Ein Beispiel dafür ist in dem Benutzer-Stylesheet <b>user.css</b> enthalten.</p>

<h3 id="homepage">Eine Startseite erstellen</h3>

<h4 id="homepage-options">Blog oder klassische Website?</h4>

<p>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.</p>

<p>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.</p>

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

<h3 id="menu">Das Menü einrichten</h3>

<p>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.</p>

<p>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.</p>

<p>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 <a href="lib/editor" target="_blank" rel="noopener">Blog-Editor</a>, zum <a href="lib/setup" target="_blank" rel="noopener">Setup-Programm</a>, zur <a href="lib/cgi-bin/showlog.pl" target="_blank" rel="noopener">Website-Statistik</a> und zur <a href="help" target="_blank" rel="noopener">Hilfe-Seite</a> als Browser-Bookmarks abzuspeichern.</p>

<p>Um das Menü anzupassen, bearbeitet man die Datei <b>lib/menu.xml</b>. Ö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.</p> 

<p>Die Datei menu.xml hat folgenden Aufbau:</p>

<pre class="textbox">
&lt;menu&gt;
	&lt;item link="<b>URL</b>"&gt;<b>LABEL</b>&lt;/item&gt;
&lt;/menu&gt;
</pre>

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

<pre class="textbox">
&lt;menu&gt;
	&lt;item link="<span style="color: var(--ExampleFgColor);">about</span>"&gt;<span style="color: var(--ExampleFgColor);">Über diese Seite</span>&lt;/item&gt;
&lt;/menu&gt;
</pre>

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

<p>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.</p>

<p>Möchte man, dass sich die verlinkte Seite in einem neuen Browser-Tab öffnet, kann man noch <code><span style="color: var(--ExampleFgColor);">newtab="true"</span></code> angeben:</p>

<pre class="textbox">
&lt;menu&gt;
	&lt;item link="help" <span style="color: var(--ExampleFgColor);">newtab="true"</span>&gt;Hilfe&lt;/item&gt;
&lt;/menu&gt;
</pre>

<p>Mit dem Zusatz <code><span style="color: var(--ExampleFgColor);">type="protected"</span></code> wird der Menüpunkt zu einem "geschützten Link" (siehe dazu die Beschreibung im <a href="demo#protect-section">Demo</a>-Artikel.) Dies eignet sich zur Verlinkung von Seiten mit sensiblen Informationen, z.B. den Kontaktdaten im Impressum. Beispiel:</p> 

<pre class="textbox">
&lt;menu&gt;
	&lt;item link="impressum" <span style="color: var(--ExampleFgColor);">type="protected"</span>&gt;Impressum&lt;/item&gt;
&lt;/menu&gt;
</pre>

<p>Das Menü kann theoretisch beliebig tief "verschachtelt" werden. Um ein Untermenü hinzuzufügen, wird folgende Syntax verwendet (<span style="color: var(--ExampleFgColor);">blau</span> hervorgehoben):</p>

<pre class="textbox">
&lt;menu&gt;
	&lt;item link="about"&gt;Über diese Seite&lt;/item&gt;
	<span style="color: var(--ExampleFgColor);">&lt;item&gt;Untermenü&lt;/item&gt;
	&lt;menu&gt;
		&lt;item link="<b>URL</b>"&gt;<b>LABEL</b>&lt;/item&gt;
	&lt;/menu&gt;</span>
&lt;/menu&gt;
</pre>

<p>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.</p>

<p id="menu-type">Schließlich gibt es noch drei Typen von "automatischen Untermenüs": Neue Beiträge, Beitragskategorien und das Farbdesign der Website (ebenfalls <span style="color: var(--ExampleFgColor);">blau</span> hervorgehoben):</p>

<pre class="textbox">
&lt;menu&gt;
	&lt;item link="about"&gt;❔ Über diese Seite&lt;/item&gt;
	&lt;item&gt;Untermenü&lt;/item&gt;
	&lt;menu&gt;
		&lt;item link="aktuell"&gt;🔔 Aktuell&lt;/item&gt;
	&lt;/menu&gt;
	<span style="color: var(--ExampleFgColor);">&lt;item type="recent-posts" max="10" icons="📄"&gt;Neu&lt;/item&gt;
	&lt;item type="categories" max="10" icons="📌"&gt;Themen&lt;/item&gt;
	&lt;item type="design" icons="🌗🌕🌑"&gt;🎨 Farbdesign&lt;/item&gt;</span>
&lt;/menu&gt;
</pre>

<p>Das Attribut <b>type</b> 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 und "design" drei Menüpunkte zum Umschalten  des Farbdesigns zwischen "Automatisch", "Hell" und "Dunkel". Das Attribut <b>max</b> gibt an, wieviele Menüpunkte (Beiträge bzw. Kategorien) maximal in das jeweilige Untermenü eingefügt werden sollen. Im Attribut <b>icons</b> können Emojis angegeben werden, die vor den automatisch erzeugten Menüpunkten als Icons ausgegeben werden. Werden mehr Menüpunkte erzeugt als Icons angegeben sind, dann wird wieder mit ersten Icon begonnen (d.h. die Icons werden "rolliert"). Für die manuell definierten Menüpunkte können die Emojis einfach direkt vor das Menülabel geschrieben werden. Zur Veranschaulichung wurden im obigen Beispiel einige Emojis beispielhaft angegeben.</p>

<h3 id="footer">Den Fußbereich einrichten</h3>

<p>Der Fußbereich befindet sich ganz am Ende jeder Seite. Dort können beispielsweise Links zu Seiten untergebracht werden, die schnell erreichbar sein sollen, etwa das Kontaktformular, das Impressum oder die Hinweise zum Datenschutz.</p>

<p>Nach der Installation enthält der Fußbereich bereits einige Beispiel-Links, die angepasst oder entfernt werden können.</p>

<p>Um den Fußbereich anzupassen, kann man die Datei <b>widgets/footer-links.html</b> bearbeiten. Nach dem Öffnen dieser Datei über "Öffnen > Auflisten: Widgets > Dateiname: footer-links.html > Öffnen" im Blog-Editor sieht man rechts eine Vorschau des Inhalts des Fußbereichs. Dort kann man nun ganz normales HTML oder PHP hineinschreiben.</p>

<p>Weitere, ausführlichere Informationen zum Bearbeiten des Fußbereichs finden sich im Kapitel <a href="#widgets">Widgets einrichten</a>.</p>

<h3 id="contact">Ein Kontaktformular erstellen</h3>

<p>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.</p>

<p>Es können beliebig viele Kontaktformulare erstellt werden, etwa für unterschiedliche Empfänger oder zu unterschiedlichen Zwecken. Standardmäßig enthält das Kontaktformular die vier Felder Name, E-Mail-Adresse, Betreff und Nachricht, jedoch können auch andere Felder konfiguriert werden.</p>

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

<pre class="textbox">
&lt;?php
<span style="color: var(--CommentFgColor);">//$infoText = '';</span>
	$recipientEmail = '<span style="color: var(--ExampleFgColor);">me@example.com</span>';
	$recipientName = '<span style="color: var(--ExampleFgColor);">My Name</span>';
	$subjectPrefix = '<span style="color: var(--ExampleFgColor);">[Prefix]</span>';
	$adminDataEnabled = <span style="color: var(--ExampleFgColor);">false</span>;
	$sessionLogEnabled = <span style="color: var(--ExampleFgColor);">false</span>;
	$captchaEnabled = <span style="color: var(--ExampleFgColor);">false</span>;
	$captchaSecret = '<span style="color: var(--ExampleFgColor);">A1b2C3d4E5f6</span>';
	$fields = '';
	$mailTemplate = '';
	include 'lib/contact.php';
?&gt;
</pre>

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

<p>Passe nun die Werte nach Bedarf an:</p>

<ul>
	<li><b>$infoText:</b> 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 <span style="color: var(--CommentFgColor);"><b>//</b></span> am Zeilenbeginn, um den Infotext zu aktivieren; andernfalls wird ein Standardtext ausgegeben. Die Angabe <b>%s</b> im Infotext kann als Platzhalter für den Namen des Empfängers (s.u.) verwendet werden. Wenn aktiviert, aber leer, wird kein Infotext ausgegeben.</li>

	<li><b>$recipientEmail:</b> Die E-Mail-Adresse, an die die Nachricht geschickt werden soll.</li>

	<li><b>$recipientName:</b> Der Name des Empfängers. Kann auch leer bleiben (dann wird der Name der Website verwendet).</li>

	<li><b>$subjectPrefix:</b> 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.</li>

	<li><b>$adminDataEnabled:</b> Auf <span style="color: var(--ExampleFgColor);">true</span> setzen, um einige administrative Daten an die E-Mail anzuhängen (IP-Adresse, Referrer, Sprache, Browser).</li>

	<li><b>$sessionLogEnabled:</b> Auf <span style="color: var(--ExampleFgColor);">true</span> 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.</li>

	<li><b>$captchaEnabled:</b> Auf <span style="color: var(--ExampleFgColor);">true</span> 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.</li>

	<li><b>$captchaSecret:</b> 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.</li>

	<li><b>$fields:</b> XML-Definition individueller Felder für das Kontaktformular. Fehlt diese Variable oder ist sie leer, wird ein Standard-Kontaktformular mit den vier Pflichtfeldern Name, E-Mail-Adresse, Betreff und Nachricht erstellt. Siehe hierzu den Abschnitt <a href="#contact-fields" title="">Individuelle Felder</a> weiter unten.</li>

	<li><b>$mailTemplate:</b> HTML-String zur Definition einer individuellen Mail-Vorlage. Fehlt diese Variable oder ist sie leer, wird eine Standard-Vorlage verwendet, in der alle Felder der Reihe nach untereinander aufgeführt sind. Siehe hierzu den Abschnitt <a href="#contact-template" title="">Erstellen einer E-Mail-Vorlage</a> weiter unten.</li>
</ul>

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

<p>Ist alles konfiguriert, speichere die Datei.</p>

<h4 id="contact-usage">Verwendung</h4>

<p>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 <b>menu.xml</b> einfügt:</p>

<pre class="textbox">
&lt;menu&gt;
	<b>&lt;item link="<span style="color: var(--ExampleFgColor);">kontakt</span>"&gt;Kontakt&lt;/item&gt;</b>
&lt;/menu&gt;
</pre>

<p>Ebenso einfach kann das Kontaktformular auch in einem Artikel verlinkt werden.</p>

<pre class="textbox">
&lt;a href="<span style="color: var(--ExampleFgColor);">kontakt</span>"&gt;Kontaktformular&lt;/a&gt;
</pre>

<p>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.</p>

<p>Es ist auch möglich, die Felder anhand ihres Namens (Wert des Attributs <b>name</b>) mit einem Text vorzubelegen – hier am Beispiel der Felder "Betreff" (subject) und "Nachricht" (message) gezeigt:</p>

<pre class="textbox">
&lt;a href="kontakt<span style="color: var(--ExampleFgColor);">?subject=Bestellung</span>"&gt;Bestellen&lt;/a&gt;
</pre>

<pre class="textbox">
&lt;a href="kontakt?subject=Betreff<span style="color: var(--ExampleFgColor);">&message=Nachricht Zeile 1{}Nachricht Zeile 2</span>"&gt;Kontaktformular&lt;/a&gt;
</pre>

<p>Der Platzhalter <b>{}</b> bewirkt im Nachrichtentext einen Zeilenwechsel.</p>

<p>Die Vorbelegung von Feldern funktioniert auch mittels POST-Parametern, z.B. wenn das Kontaktformular über einen geschützten Link (<a href="#open-insert" title="">siehe hier</a>) aufgerufen wird. Hierzu gibt man die Namen und Inhalte der vorzubelegenden Felder mittels "versteckter Eingabefelder" (&lt;input type="hidden" ...&gt;) an:</p>

<pre class="textbox">
&lt;form action="<span style="color: var(--ExampleFgColor);">kontakt</span>" method="post" style="display: block;"&gt;
	&lt;p class="center"&gt;
		&lt;button type="submit" name="token" value="&lt;?php echo $token; ?&gt;"&gt;<span style="color: var(--ExampleFgColor);">Bestellen</span>&lt;/button&gt;
		&lt;input type="hidden" name="<span style="color: var(--ExampleFgColor);">subject</span>" value="<span style="color: var(--ExampleFgColor);">Bestellung</span>"&gt;
		&lt;input type="hidden" name="<span style="color: var(--ExampleFgColor);">message</span>" value="<span style="color: var(--ExampleFgColor);">Nachricht Zeile 1{}Nachricht Zeile 2</span>"&gt;
	&lt;/p&gt;
&lt;/form&gt;
</pre>

<h4 id="contact-fields">Individuelle Felder</h4>

<p>Durch Angabe eines XML-Strings im Feld <b>$fields</b> kann das Kontaktformular in weiten Teilen angepasst werden. Hierzu fügt man innerhalb eines <span style="color: var(--KeywordFgColor);">fields</span>-Blocks die gewünschten Felddefinitionen in Form beliebig vieler <span style="color: var(--KeywordFgColor);">field</span>-Tags ein:</p>

<pre class="textbox">
$fields = '&lt;<span style="color: var(--KeywordFgColor);">fields</span>&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <i>Felddefinitionen</i> /&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <i>Felddefinitionen</i> /&gt;
	...
&lt;/<span style="color: var(--KeywordFgColor);">fields</span>&gt;';
</pre>

<p>Zur Veranschaulichung nachfolgend einige Beispiele (der Übersichtlichkeit halber ohne den umgebenden <span style="color: var(--KeywordFgColor);">fields</span>-Block):</p>

<h5>Eingabefelder</h5>

<p>Am Beispiel des Standard-Kontaktformulars ist hier zu sehen, wie ein- und mehrzeilige Eingabefelder definiert werden können:</p>

<pre class="textbox">
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">name</span>" <b>size</b>="<span style="color: var(--ExampleFgColor);">50</span>" <b>mandatory</b>="<span style="color: var(--ExampleFgColor);">true</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Dein Name</span>" /&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">email</span>" <b>type</b>="<span style="color: var(--ExampleFgColor);">email</span>" <b>size</b>="<span style="color: var(--ExampleFgColor);">50</span>" <b>mandatory</b>="<span style="color: var(--ExampleFgColor);">true</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Deine E-Mail-Adresse</span>" /&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">subject</span>" <b>size</b>="<span style="color: var(--ExampleFgColor);">50</span>" <b>mandatory</b>="<span style="color: var(--ExampleFgColor);">true</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Betreff</span>" /&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">message</span>" <b>lines</b>="<span style="color: var(--ExampleFgColor);">10</span>" <b>size</b>="<span style="color: var(--ExampleFgColor);">5000</span>" <b>mandatory</b>="<span style="color: var(--ExampleFgColor);">true</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Deine Nachricht ...</span>" /&gt;
</pre>

<details class="border">
	<summary><span><b>Und so sieht’s aus...</b> (Klick)</span></summary>
	<div class="fields">
		<p><input id="input-name-1" type="text" placeholder="Dein Name*" name="input-name" value="" maxlength="50" style="width: 100%;"></p>
		<p><input id="input-email-2" type="text" placeholder="Deine E-Mail-Adresse*" name="input-email" value="" maxlength="50" style="width: 100%;"></p>
		<p><input id="input-subject-3" type="text" placeholder="Betreff*" name="input-subject" value="" maxlength="50" style="width: 100%;"></p>
		<p><textarea id="input-message-4" rows="10" placeholder="Deine Nachricht ...*" name="input-message" maxlength="5000" style="width: 100%;"></textarea></p>
	</div>
</details>

<p>Jedes Feld hat mindestens das eindeutige Attribut <b>name</b>. Mittels <b>size</b> kann angegeben werden, wieviele Zeichen maximal in das Feld eingegeben werden können. Mit <b>mandatory</b>="<span style="color: var(--ExampleFgColor);">true</span>" wird das Feld zum Pflichtfeld (ein Sternchen* und ein Hinweistext am Ende des Formulars weist den Benutzer darauf hin). Mittels <b>label</b> wird eine Feldbezeichnung bzw. -beschreibung angegeben, die standardmäßig als Platzhaltertext innerhalb des Eingabefeldes erscheint. Das Attribut <b>lines</b> macht das Eingabefeld mehrzeilig. Werden mehr Zeilen als angegeben eingegeben, passt sich die Höhe des Feldes automatisch an. Die Angabe <b>type</b>="<span style="color: var(--ExampleFgColor);">email</span>" ist speziell für die Eingabefelder mit E-Mail-Adressem sinnvoll, da hier eine entsprechende Syntaxprüfung erfolgt.</p>

<p>Den obigen vier Werten des name-Attributs (<span style="color: var(--ExampleFgColor);">name</span>, <span style="color: var(--ExampleFgColor);">email</span>, <span style="color: var(--ExampleFgColor);">subject</span>, <span style="color: var(--ExampleFgColor);">message</span>) kommt eine spezielle Bedeutung zu: Name (name), E-Mail-Adresse (email) und Betreff (subject) erscheinen im Header der E-Mail, die beim Abschicken des Kontaktformulars versendet wird. Im E-Mail-Body erscheint die vom Benutzer eingegebene Nachricht (message) zuoberst und ohne Feldbezeichnung, sofern diese das erste "Nutzfeld" im Kontaktformular ist. Werden <i>vor</i> der Nachricht noch andere Felder (abgesehen von <span style="color: var(--ExampleFgColor);">name</span>, <span style="color: var(--ExampleFgColor);">email</span> und <span style="color: var(--ExampleFgColor);">subject</span>) definiert, dann erscheint die Nachricht <i>unter</i> diesen Felder und mit der Feldbezeichnung als Überschrift.</p>

<p>Anhand eines fiktiven Bestellformulars werden nun noch einige weitere Attribute erläutert:</p>

<pre class="textbox">
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">subject</span>" <b>size</b>="<span style="color: var(--ExampleFgColor);">50</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Betreff</span>" <b>content</b>="<span style="color: var(--ExampleFgColor);">Bestellung</span>" <b>readonly</b>="<span style="color: var(--ExampleFgColor);">true</span>" /&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">artikel-1</span>" <b>size</b>="<span style="color: var(--ExampleFgColor);">100</span>" <b>and</b>="<span style="color: var(--ExampleFgColor);">position-1</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Artikel</span>" <b>labelpos</b>="<span style="color: var(--ExampleFgColor);">above</span>" <b>lineup</b>="<span style="color: var(--ExampleFgColor);">true</span>" /&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">anzahl-1</span>" <b>size</b>="<span style="color: var(--ExampleFgColor);">3</span>" <b>and</b>="<span style="color: var(--ExampleFgColor);">position-1</span>" <b>or</b>="<span style="color: var(--ExampleFgColor);">anzahl</span>" <b>width</b>="<span style="color: var(--ExampleFgColor);">80px</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Menge</span>" <b>labelpos</b>="<span style="color: var(--ExampleFgColor);">above</span>" /&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">artikel-2</span>" <b>size</b>="<span style="color: var(--ExampleFgColor);">100</span>" <b>and</b>="<span style="color: var(--ExampleFgColor);">position-2</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Artikel</span>" <b>labelpos</b>="<span style="color: var(--ExampleFgColor);">none</span>" <b>lineup</b>="<span style="color: var(--ExampleFgColor);">true</span>" /&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">anzahl-2</span>" <b>size</b>="<span style="color: var(--ExampleFgColor);">3</span>" <b>and</b>="<span style="color: var(--ExampleFgColor);">position-2</span>" <b>or</b>="<span style="color: var(--ExampleFgColor);">anzahl</span>" <b>width</b>="<span style="color: var(--ExampleFgColor);">80px</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Menge</span>" <b>labelpos</b>="<span style="color: var(--ExampleFgColor);">none</span>" /&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">adresse</span>" <b>lines</b>="<span style="color: var(--ExampleFgColor);">3</span>" <b>size</b>="<span style="color: var(--ExampleFgColor);">500</span>" <b>mandatory</b>="<span style="color: var(--ExampleFgColor);">true</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Lieferadresse</span>" /&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">nachricht</span>" <b>lines</b>="<span style="color: var(--ExampleFgColor);">2</span>" <b>size</b>="<span style="color: var(--ExampleFgColor);">500</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Anmerkungen</span>" /&gt;
</pre>

<details class="border">
	<summary><span><b>Und so sieht’s aus...</b> (Klick)</span></summary>
	<div class="fields">
		<p><input id="input-subject-1" type="text" placeholder="Betreff" name="input-subject" value="Bestellung" maxlength="50" style="width: 100%;" readonly></p>
		<table class="nostyle lineup"><tr>
		<td><p><label for="input-artikel-1-2">Artikel</label><br><input id="input-artikel-1-2" type="text" placeholder="" name="input-artikel-1" value="" maxlength="100" style="width: 100%;"></p></td>
		<td style="width: 0;"><p><label for="input-anzahl-1-3">Menge*</label><br><input id="input-anzahl-1-3" type="text" placeholder="" name="input-anzahl-1" value="" maxlength="3" style="width: 80px; max-width: 100%;"></p></td>
		</tr></table>
		<table class="nostyle lineup"><tr>
		<td><p><input id="input-artikel-2-4" type="text" placeholder="" name="input-artikel-2" value="" maxlength="100" style="width: 100%;"></p></td>
		<td style="width: 0;"><p><input id="input-anzahl-2-5" type="text" placeholder="" name="input-anzahl-2" value="" maxlength="3" style="width: 80px; max-width: 100%;"></p></td>
		</tr></table>
		<p><textarea id="input-adresse-6" rows="3" placeholder="Lieferadresse*" name="input-adresse" maxlength="500" style="width: 100%;"></textarea></p>
		<p><textarea id="input-nachricht-7" rows="2" placeholder="Anmerkungen" name="input-nachricht" maxlength="500" style="width: 100%;"></textarea></p>
	</div>
</details>

<p>Im obigen Beispiel wurde der Betreff (1. Feld) mittels <b>readonly</b>="<span style="color: var(--ExampleFgColor);">true</span>" mit einem "Schreibschutz" versehen, so dass er vom Benutzer nicht verändert werden kann. Außerdem wurde mittels <b>content</b> der Inhalt des Betreff-Feldes vorbelegt. Dies kann z.B. für Formulare sinnnvoll sein, die anhand eines feststehendenen Mail-Betreffs per Filterregel automatisch in einen bestimmten Mail-Ordner verschoben werden sollen.</p>

<p>Bei den nächsten 4 Feldern (Artikel und Menge) wird durch das Attribut <b>lineup</b>="<span style="color: var(--ExampleFgColor);">true</span>" bei den Artikel-Feldern erreicht, dass Artikel und Menge jeweils nebeneinander in einer Zeile erscheinen. Durch Angabe des <b>width</b>-Attributs bei den Menge-Feldern wurde deren Breite auf 80px begrenzt. Da die Breite der Artikel-Felder nicht begrenzt wurde, mehmen diese den restlichen horizontalen Platz ein.</p>

<p>Durch Angabe des Attributs <b>labelpos</b>="<span style="color: var(--ExampleFgColor);">above</span>" bei den oberen beiden Feldern "Artikel" und "Menge" wurde erreicht, dass die Feldbezeichnungen oberhalb dieser Felder ausgegeben werden statt innerhalb der Felder als Platzhaltertexte. Und damit die Feldbezeichnungen bei den nächsten beiden Feldern "Artikel" und "Menge" nicht erneut ausgegeben werden, wurde dort <b>labelpos</b>="<span style="color: var(--ExampleFgColor);">none</span>" angegeben.</p>

<p>Die vier Felder wurden außerdem so miteinander verknüpft, dass bei mindestens einer Bestellposition die Menge eingegeben werden muss (Attribute <b>or</b>="<span style="color: var(--ExampleFgColor);">anzahl</span>"), und <i>wenn</i> eine Menge eingegeben wurde, dass dann auch ein Artikel angegeben werden muss (Attribute <b>and</b>="<span style="color: var(--ExampleFgColor);">position-1</span>" und <b>and</b>="<span style="color: var(--ExampleFgColor);">position-2</span>").</p>

<h5>Radio-Buttons</h5>

<p>Radio-Buttons ermöglichen die Auswahl eines von mehreren Punkten.</p>

<pre class="textbox">
	&lt;<span style="color: var(--KeywordFgColor);">field</span>&gt;<span style="color: var(--ExampleFgColor);">Möchtest du den wöchentlichen kostenlosen Newsletter abonnieren?</span>&lt;/<span style="color: var(--KeywordFgColor);">field</span>&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">newsletter</span>" <b>type</b>="<span style="color: var(--ExampleFgColor);">radio</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Ja bitte</span>" /&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">newsletter</span>" <b>type</b>="<span style="color: var(--ExampleFgColor);">radio</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Nein danke</span>" <b>preset</b>="<span style="color: var(--ExampleFgColor);">true</span>" /&gt;
</pre>

<details class="border">
	<summary><span><b>Und so sieht’s aus...</b> (Klick)</span></summary>
	<div class="fields">
		<p>Möchtest du den wöchentlichen kostenlosen Newsletter abonnieren?</p>
		<p><input id="input-newsletter-10" type="radio" name="input-newsletter" value="Ja bitte"> <span><label for="input-newsletter-10">Ja bitte</label></span></p>
		<p><input id="input-newsletter-11" type="radio" name="input-newsletter" value="Nein danke" checked> <span><label for="input-newsletter-11">Nein danke</label></span></p>
	</div>
</details>

<p>Ein <span style="color: var(--KeywordFgColor);">field</span>-Tag ohne <b>name</b>-Attribut (wie im 1. Feld des obigen Beispiels gezeigt) ist ein reines Textausgabefeld. Darunter folgen zwei Felder mit <b>type</b>="<span style="color: var(--ExampleFgColor);">radio</span>", durch die diese Felder zu Radio-Buttons werden. Der Wert des <b>name</b>-Attributs ist bei beiden Feldern identisch, was bedeutet, dass beide Radio-Buttons zusammengehören. Nur einer von mehreren zusammengehörigen Radio-Buttons kann ausgewählt werden. Das <b>preset</b>="<span style="color: var(--ExampleFgColor);">true</span>" beim unteren Radio-Button gibt an, dass dieser Radio-Button beim ersten Anzeigen des Kontaktformulars vorausgewählt ist. Die Feldbeschreibungen im Attribut <b>label</b> erscheinen bei Radio-Buttons standardmäßig rechts neben den Auswahlpunkten.</p>

<h5>Dropdown-Box</h5>

<p>Eine Dropdown-Box ermöglicht ähnlich wie Radiobuttons die Auswahl einer von mehreren Optionen, nur dass die auswählbaren Optionen hier initial "zugeklappt" sind und erst beim Anklicken "aufgeklappt" werden.</p>

<pre class="textbox">
	&lt;<span style="color: var(--KeywordFgColor);">field</span>&gt;<span style="color: var(--ExampleFgColor);">Wie dürfen wir dich kontaktieren?</span>&lt;/<span style="color: var(--KeywordFgColor);">field</span>&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">kontakt</span>" <b>type</b>="<span style="color: var(--ExampleFgColor);">dropdown</span>" <b>content</b>="<span style="color: var(--ExampleFgColor);"> bitte auswählen</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Kontakt per</span>" /&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">kontakt</span>" <b>type</b>="<span style="color: var(--ExampleFgColor);">dropdown</span>" <b>content</b>="<span style="color: var(--ExampleFgColor);">E-Mail</span>" /&gt;
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">kontakt</span>" <b>type</b>="<span style="color: var(--ExampleFgColor);">dropdown</span>" <b>content</b>="<span style="color: var(--ExampleFgColor);">Telefon</span>" /&gt;
</pre>

<details class="border">
	<summary><span><b>Und so sieht’s aus...</b> (Klick)</span></summary>
	<div class="fields">
		<p>Wie dürfen wir dich kontaktieren?</p>
		<p><span><label for="input-kontakt-12">Kontakt per</label></span> <select id="input-kontakt-12" name="input-kontakt">
			<option value=""> bitte auswählen</option>
			<option value="E-Mail">E-Mail</option>
			<option value="Telefon">Telefon</option>
		</select></p>
	</div>
</details>

<p>Auch hier ist das 1. Feld ein Textausgabefeld. Die nächsten 3 Felder wurden mit <b>type</b>="<span style="color: var(--ExampleFgColor);">dropdown</span>" zu auswählbaren Optionen einer Dropdown-Box gemacht. Durch den identischen Wert des <b>name</b>-Attributs aller 3 Felder wird festgelegt, dass diese zu einer gemeinsamen Dropdown-Box gehören sollen. Die Feldbeschreibung im Attribut <b>label</b> braucht nur beim ersten Dropdown-Feld angegeben zu werden und erscheint standardmäßig links neben der Dropdown-Box. Im <b>content</b>-Attribut werden die Bezeichnungen der auswählbaren Optionen angegeben. Hier gibt es eine Besonderheit: Beginnt die Bezeichnung mit einem nicht-alphanumerischen Zeichen (z.B. einem Leerzeichen), entspricht das einem leeren Wert (d.h. es wurde nichts ausgewählt). Dies ist ebenfalls für die Pflichtfeld-Prüfung von Bedeutung, wenn die Dropdown-Box mittels <b>mandatory</b>="<span style="color: var(--ExampleFgColor);">true</span>" zu einem Pflichtfeld gemacht wird (in diesem Fall braucht übrigens nur das 1. Feld einer Dropdown-Box mit diesem Attribut versehen zu werden). Soll eine Option vorausgewählt sein, kann man das Attribut <b>preset</b>="<span style="color: var(--ExampleFgColor);">true</span>" angeben (im obigen Beispiel nicht gezeigt).</p>

<h5>Checkbox</h5>

<p>Checkboxen ermöglichen das Setzen eines Häkchens. Typische Anwendungsfälle wären z.B. die Bestätigung der Kenntnisnahme von AGB oder Datenschutzhinweisen.</p>

<pre class="textbox">
	&lt;<span style="color: var(--KeywordFgColor);">field</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">datenschutz</span>" <b>type</b>="<span style="color: var(--ExampleFgColor);">check</span>" <b>mandatory</b>="<span style="color: var(--ExampleFgColor);">true</span>" <b>label</b>="<span style="color: var(--ExampleFgColor);">Die Datenschutzhinweise habe ich zur Kenntnis genommen.</span>" /&gt;
</pre>

<details class="border">
	<summary><span><b>Und so sieht’s aus...</b> (Klick)</span></summary>
	<div class="fields">
		<p><input id="input-datenschutz-15" type="checkbox" name="input-datenschutz" value="checked"> <span><label for="input-datenschutz-15">Die Datenschutzhinweise habe ich zur Kenntnis genommen.*</label></span></p>
	</div>
</details>

<p>Durch das Attribut <b>type</b>="<span style="color: var(--ExampleFgColor);">check</span>" wird das Feld zu einer Checkbox, und durch <b>mandatory</b>="<span style="color: var(--ExampleFgColor);">true</span>" wird diese zu einem Pflichtfeld, d.h. der Haken muss vom Benutzer gesetzt werden, um das Kontaktformular absenden zu können. Wird das Attrubut <b>preset</b>="<span style="color: var(--ExampleFgColor);">true</span>" angegeben, dann ist der Haken beim ersten Anzeigen des Kontaktformulars bereits gesetzt (hier nicht gezeigt). Die Feldbeschreibung im Attribut <b>label</b> erscheint beiCheckboxen standardmäßig rechts neben dem Kästchen mit dem Haken.</p>

<!--
<h5></h5>

<pre class="textbox">
	$fields = '&lt;<span style="color: var(--KeywordFgColor);">fields</span>&gt;
	&lt;/<span style="color: var(--KeywordFgColor);">fields</span>&gt;';
</pre>

<details class="border">
	<summary><span><b>Und so sieht’s aus...</b> (Klick)</span></summary>
</details>
-->

<h5>Übersicht aller Feld-Attribute</h5>

<p>Abschließend eine Zusammenstellung aller Feld-Attribute und ihrer möglichen Werte, unterteilt in drei Gruppen (anklicken zum Erweitern):</p>

<p class="center">Definition</p>

<details class="border">
	<summary><span><b>name</b> – Identifiziert das Feld</span></summary>
	<p>Eindeutiger Name für jedes Feld bzw. für jede Gruppe zusammengehöriger Radio-Buttons oder Dropdown-Box-Einträge.</p>
	<p>Gültig für: alle Felder</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt: Textausgabefeld – der Text zwischen &lt;field&gt; und &lt;/field&gt; wird ausgegeben.</li>
		<li>"<span style="color: var(--ExampleFgColor);">name</span>": Reserviert für den Namen des Benutzers – erscheint im E-Mail-Header (From).</li>
		<li>"<span style="color: var(--ExampleFgColor);">email</span>": Reserviert für die E-Mail-Adresse des Benutzers – erscheint im E-Mail-Header (From).</li>
		<li>"<span style="color: var(--ExampleFgColor);">subject</span>": Reserviert für den Betreff – erscheint in der Betreff-Zeile der E-Mail.</li>
		<li>"<span style="color: var(--ExampleFgColor);">message</span>": Reserviert für den Nachrichtentext – erscheint im E-Mail-Body ohne Feldbezeichnung als Überschrift, <i>wenn</i> dieses Feld das erste "Nutzfeld" im Kontaktformular ist; andernfalls wird wie bei allen anderen Feldern zusätzlich die Feldbezeichnung als Überschrift ausgegeben.</li>
		<li>sonstiger Bezeichner: Benutzerdefiniertes Feld. Muss pro Feld eindeutig sein, mit zwei Ausnahmen: Zusammengehörige Radio-Buttons und Dropdown-Box-Einträge müssen denselben Namen haben.</li>
	</ul>
</details>

<details class="border">
	<summary><span><b>type</b> – Bestimmt die Feldart</span></summary>
	<p>Mit diesem Attribut wird angegeben, um welche Art von Feld es sich handelt (z.B. Eingabefeld, Checkbox, Dropdown-Box oder Radio-Button). Bei Eingabefeldern wird hierdurch auch bestimmt, wie die Feldinhalte validiert werden, welche virtuelle Tastatur auf Geräten mit Touch-Bedienung angezeigt wird und wie die Felder durch den Browser per Autovervollständigung (AV) ausgefüllt werden.</p>
	<p>Gültig für: alle Felder mit <b>name</b>-Attribut</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt oder leer oder „<span style="color: var(--ExampleFgColor);">text</span>“: Eingabefeld für beliebigen Text.</li>
		<li>„<span style="color: var(--ExampleFgColor);">number</span>“: Eingabefeld für Dezimalzahl (Ziffern 0...9).</li>
		<li>„<span style="color: var(--ExampleFgColor);">date</span>“: Eingabefeld für Datum (Jahr, Monat, Tag).</li>
		<li>„<span style="color: var(--ExampleFgColor);">email</span>“: Eingabefeld für E-Mail-Adresse (AV).</li>
		<li>„<span style="color: var(--ExampleFgColor);">tel</span>“: Eingabefeld für Telefonnummer (AV).</li>
		<li>„<span style="color: var(--ExampleFgColor);">url</span>“: Eingabefeld für Web-Adresse (https://...).</li>
		<li>„<span style="color: var(--ExampleFgColor);">org</span>“: Eingabefeld für Organisation (AV).</li>
		<li>„<span style="color: var(--ExampleFgColor);">name</span>“: Eingabefeld für Vor- und Nachname (AV).</li>
		<li>„<span style="color: var(--ExampleFgColor);">address</span>“: Eingabefeld für Adresse (AV: Adresse, alle Zeilen).</li>
		<li>„<span style="color: var(--ExampleFgColor);">street</span>“: Eingabefeld für Straße und Hausnummer (AV: Adresse, Zeile 1).</li>
		<li>„<span style="color: var(--ExampleFgColor);">addition</span>“: Eingabefeld für Adresszusatz (AV: Adresse, Zeile 2).</li>
		<li>„<span style="color: var(--ExampleFgColor);">postcode</span>“: Eingabefeld für Postleitzahl (AV).</li>
		<li>„<span style="color: var(--ExampleFgColor);">city</span>“: Eingabefeld für Ort bzw. Stadt (AV).</li>
		<li>„<span style="color: var(--ExampleFgColor);">country</span>“: Eingabefeld für Land (AV).</li>
		<li>„<span style="color: var(--ExampleFgColor);">check</span>“: Checkbox (Häkchen)</li>
		<li>„<span style="color: var(--ExampleFgColor);">dropdown</span>“: Dropdown-Box (Auswahlfeld)</li>
		<li>„<span style="color: var(--ExampleFgColor);">radio</span>“: Radio-Button (Auswahl eines Punktes)</li>
	</ul>
</details>

<details class="border">
	<summary><span><b>lines</b> – Mehrzeiliges Eingabefeld</span></summary>
	<p>Gibt an, ob es sich um ein ein- oder um ein mehrzeiliges Eingabefeld handelt, und welche Höhe das mehrzeilige Eingabefeld initial haben soll.</p>
	<p>Gültig für: Eingabefelder</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt oder leer: Das Eingabefeld ist einzeilig, d.h. es können keine Zeilenumbrüche eingegeben werden.</li>
		<li>Ganzzahl: Das Eingabefeld ist mehrzeilig, d.h. es können Zeilenumbrüche eingegeben werden. Die Höhe des Feldes wird initial auf die angegebene Anzahl Zeilen gesetzt und erweitert sich entsprechend der Anzahl eingegebener Zeilen.</li>
	</ul>
</details>

<details class="border">
	<summary><span><b>label</b> – Feldbezeichnung bzw. -beschreibung</span></summary>
	<p>Ein kurzer Text, der beschreibt, was in das Feld eingegeben werden soll (z.B. "Name", "E-Mail-Adresse"). Erscheint standardmäßig bei Eingabefeldern als Platzhaltertext innerhalb des Feldes, bei Dropdown-Boxen links neben der Dropdown-Box und bei Radio-Buttons und Checkboxen rechts daneben. Braucht bei Dropdown-Boxen nur beim 1. Dropdown-Feld angegeben zu werden.</p>
	<p>Gültig für: alle Felder mit <b>name</b>-Attribut</p>
	<p>Attributwerte:</p>
	<ul>
		<li>Beliebiger Text</li>
	</ul>
</details>

<details class="border">
	<summary><span><b>content</b> – Vorbelegung des Feldinhalts</span></summary>
	<p>Beliebiger Text, mit dem das Feld vorbelegt werden kann. Bei Dropdown-Boxen die Bezeichnung der auswählbaren Optionen (für Leerwerte muss diese mit einem nicht-alphanumerischen Zeichen beginnen).</p>
	<p>Gültig für: Eingabefelder, Dropdown-Boxen</p>
	<p>Attributwerte:</p>
	<ul>
		<li>Beliebiger Text</li>
	</ul>
</details>

<details class="border">
	<summary><span><b>preset</b> – Vorauswahl für Radio-Button, Dropdown-Box und Checkbox</span></summary>
	<p>Dieses Attribut gibt an, ob beim ersten Öffnen des Kontaktformulars der Radio-Button oder der Dropdown-Box-Eintrag vorausgewählt oder der Haken der Checkbox gesetzt ist.</p>
	<p>Gültig für: Radio-Buttons, Dropdown-Boxen, Checkboxen</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt oder leer: Nicht vorausgewählt bzw. Haken nicht gesetzt. Für Dropdown-Boxen gilt: Ist kein Feld vorausgewählt, wird die Dropdown-Box initial mit dem ersten Eintrag vorbelegt.</li>
		<li>„<span style="color: var(--ExampleFgColor);">true</span>“: Radiobutton bzw. Dropdown-Box-Eintrag ist vorausgewählt bzw. der Checkbox-Haken ist gesetzt.</li>
	</ul>
</details>

<p class="center">Verhalten</p>

<details class="border">
	<summary><span><b>mandatory</b> – Pflichtfeld</span></summary>
	<p>Gibt an, ob das Feld ausgefüllt, ein Eintrag der Dropdown-Box ausgewählt oder der Haken der Checkbox gesetzt werden muss, um das Formular absenden zu können.</p>
	<p>Gültig für: alle Felder mit <b>name</b>-Attribut</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt oder leer: Feld ist optional und muss nicht ausgefüllt, ausgewählt oder abgehakt werden, um das Formular absenden zu können.</li>
		<li>„<span style="color: var(--ExampleFgColor);">true</span>“: Das Formular kann nur abgesendet werden, wenn das Feld ausgefüllt, eine Option ausgewählt oder der Haken gesetzt ist.</li>
	</ul>
</details>

<details class="border">
	<summary><span><b>or</b> – Alternatives Pflichtfeld ("mindestens eins")</span></summary>
	<p>Gibt an, dass das Feld zu einer Gruppe zusammengehöriger Pflichtfelder gehört, von denen mindestens eins ausgefüllt, ausgewählt oder abgehakt werden muss, um das Formular absenden zu können (ODER-Verknüpfung). Kann anstelle des Attributs <b>mandatory</b> und zusätzlich zum Attribut <b>and</b> verwendet werden.</p>
	<p>Gültig für: alle Felder mit <b>name</b>-Attribut</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt oder leer: Das Feld gehört nicht zu einer Gruppe zusammengehöriger, alternativer Pflichtfelder.</li>
		<li>Beliebiger Text, der für die zusammengehörigen, alternativen Pflichtfelder gleich sein muss.</li>
	</ul>
</details>

<details class="border">
	<summary><span><b>and</b> – Kombiniertes Pflichtfeld ("alle oder keins")</span></summary>
	<p>Gibt an, dass das Feld zu einer Gruppe zusammengehöriger Felder gehört, die entweder alle ausgefüllt, ausgewählt oder abgehakt werden müssen, oder die alle leer sein müssen (UND-Verknüpfung). Kann anstelle des Attributs <b>mandatory</b> und zusätzlich zum Attribut <b>or</b> verwendet werden.</p>
	<p>Gültig für: alle Felder mit <b>name</b>-Attribut</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt oder leer: Das Feld gehört nicht zu einer Gruppe zusammengehöriger, bedingter Pflichtfelder.</li>
		<li>Beliebiger Text, der für die zusammengehörigen, bedingten Pflichtfelder gleich sein muss.</li>
	</ul>
</details>

<details class="border">
	<summary><span><b>size</b> – Maximale Eingabelänge</span></summary>
	<p>Gibt an, wie viele Zeichen maximal in das Feld eingegeben werden können.</p>
	<p>Gültig für: Eingabefelder</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt oder leer: Keine Begrenzung; es können beliebig viele Zeichen in das Eingabefeld eingegeben werden.</li>
		<li>Ganzzahl: Es können maximal so viele Zeichen wie angegeben in das Eingabefeld eingegeben werden.</li>
	</ul>
</details>

<details class="border">
	<summary><span><b>min</b> – Untergrenze für eingegebene Zahl</span></summary>
	<p>Gibt die kleinste Zahl an, die in das Feld eingegeben werden kann.</p>
	<p>Gültig für: Eingabefelder für Dezimalzahl</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt oder leer: Kein Mindestwert; die eingegebene Zahl kann beliebig klein sein.</li>
		<li>Ganzzahl: Die eingegebene Zahl muss mindestens so groß wie der angegebene Wert sein.</li>
	</ul>
</details>

<details class="border">
	<summary><span><b>max</b> – Obergrenze für eingegebene Zahl</span></summary>
	<p>Gibt die größte Zahl an, die in das Feld eingegeben werden kann.</p>
	<p>Gültig für: Eingabefelder für Dezimalzahl</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt oder leer: Kein Höchstwert; die eingegebene Zahl kann beliebig groß sein.</li>
		<li>Ganzzahl: Die eingegebene Zahl darf maximal so groß wie der angegebene Wert sein.</li>
	</ul>
</details>

<details class="border">
	<summary><span><b>readonly</b> – Schreibschutz</span></summary>
	<p>Gibt an, ob Änderungen am Feldinhalt durch den Benutzer möglich sind oder nicht.</p>
	<p>Gültig für: Eingabefelder</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt oder leer: Kein Schreibschutz; der Feldinhalt kann beliebig geändert werden.</li>
		<li>„<span style="color: var(--ExampleFgColor);">true</span>“: Schreibschutz; der Feldinhalt ist gegen Änderungen geschützt.</li>
	</ul>
</details>

<p class="center">Design</p>

<details class="border">
	<summary><span><b>align</b> – Horizontale Ausrichtung des Feldes und der Feldbezeichnung</span></summary>
	<p>Gibt an, wie die Feldbezeichnung und das Feld innerhalb ihrer Zeile ausgerichtet werden.</p>
	<p>Gültig für: alle Felder mit <b>name</b>-Attribut</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt oder leer oder „<span style="color: var(--ExampleFgColor);">left</span>“: linksbündig</li>
		<li>„<span style="color: var(--ExampleFgColor);">right</span>“: rechtsbündig</li>
		<li>„<span style="color: var(--ExampleFgColor);">center</span>“: mittig</li>
		<li>„<span style="color: var(--ExampleFgColor);">stretch</span>“: gedehnt (links-/rechtsbündig mit Leerraum dazwischen)</li>
	</ul>
</details>

<details class="border">
	<summary><span><b>labelpos</b> – Position der Feldbezeichnung</span></summary>
	<p>Gibt an, ob und wo die Feldbezeichnung bzw. -beschreibung in Relation zum Feld angezeigt wird. Braucht bei Dropdown-Boxen nur beim 1. Dropdown-Feld angegeben zu werden.</p>
	<p>Gültig für: alle Felder mit <b>name</b>-Attribut</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt oder leer: Standardposition (siehe oben unter Attribut "<b>label</b>").</li>
		<li>„<span style="color: var(--ExampleFgColor);">left</span>“: Links neben dem Feld. Alle Feldbezeichnungen und Felder mit diesem Attributwert werden spaltenweise untereinander ausgerichtet.</li>
		<li>„<span style="color: var(--ExampleFgColor);">right</span>“: Rechts neben dem Feld. Alle Feldbezeichnungen und Felder mit diesem Attributwert werden spaltenweise untereinander ausgerichtet.</li>
		<li>„<span style="color: var(--ExampleFgColor);">before</span>“: Links neben dem Feld (oder darüber, wenn die Display-Breite nicht ausreicht). Sinnvoll nur für Felder mit <b>width</b>-Attribut.</li>
		<li>„<span style="color: var(--ExampleFgColor);">after</span>“: Rechts neben dem Feld (oder darunter, wenn die Display-Breite nicht ausreicht). Sinnvoll nur für Felder mit <b>width</b>-Attribut.</li>
		<li>„<span style="color: var(--ExampleFgColor);">above</span>“: Oberhalb des Feldes.</li>
		<li>„<span style="color: var(--ExampleFgColor);">below</span>“: Unterhalb des Feldes.</li>
		<li>beliebiger anderer Inhalt (z.B. „<span style="color: var(--ExampleFgColor);">none</span>“): Keine Ausgabe der Feldbezeichnung.</li>
	</ul>
</details>

<details class="border">
	<summary><span><b>lineup</b> – Mehrere Felder in einer Zeile</span></summary>
	<p>Bestimmt, ob das Feld zusammen mit dem nachfolgenden Feld in einer gemeinsamen Zeile erscheint.</p>
	<p>Gültig für: alle Felder mit <b>name</b>-Attribut</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt oder leer: Das Feld erscheint in einer eigenen Zeile.</li>
		<li>„<span style="color: var(--ExampleFgColor);">true</span>“: Das Feld erscheint zusammen mit dem nachfolgenden Feld in einer gemeinsamen Zeile.</li>
	</ul>
</details>

<details class="border">
	<summary><span><b>width</b> – Anzeigebreite des Feldes</span></summary>
	<p>Gibt an, mit welcher Breite das Feld angezeigt wird.</p>
	<p>Gültig für: Eingabefelder</p>
	<p>Attributwerte:</p>
	<ul>
		<li>fehlt oder leer: Das Feld nimmt die gesamte Breite des Kontaktformulars ein.</li>
		<li>Zahl + Einheit (z.B. 400px = 400 Pixel): Das Feld ist so breit wie angegeben, jedoch maximal so breit wie das Kontaktformular.</li>
	</ul>
</details>

<h4 id="contact-template">Erstellen einer E-Mail-Vorlage</h4>

<p>Standardmäßig sind in der E-Mail, die beim Absenden des Kontaktformulars an den Empfänger gesendet wird, alle Felder der Reihe nach untereinander aufgeführt – inklusive der Textausgabefelder. Dies kann bei komplexeren Formularen mit vielen Feldern schnell unübersichtlich werden, so dass es sinnvoll sein kann, sich eine optimierte Mail-Vorlage zu erstellen, in der die Feldbezeichnungen und die Feldinhalte mittels Variablen an geeigneten Stellen eingefügt werden.</p>

<p>Die Erstellung einer eigenen Mail-Vorlage erfolgt durch Angabe eines Text-Strings im Feld <b>$mailTemplate</b>. Es empfiehlt sich, hierfür die sogenannte <a href="https://www.php.net/manual/de/language.types.string.php#language.types.string.syntax.heredoc" target="_blank" rel="noopener" title="">Heredoc-Syntax</a> von PHP zu verwenden. Zur Veranschaulichung hier ein Beispiel für ein Kontaktformular mit einer Adresse aus 7 Einzelfeldern, einem Nachrichtenfeld, zwei Radio-Buttons, einer Dropdown-Box und einer Checkbox (zu finden auch im Vorlagen-Ordner "templates"):</p>

<pre class="textbox">
$mailTemplate = &lt;&lt;&lt;EOM
	&lt;b&gt;Lieferadresse:&lt;/b>

	?<span style="color: var(--ExampleFgColor);">organisation</span>?
	!<span style="color: var(--ExampleFgColor);">name</span>!
	?<span style="color: var(--ExampleFgColor);">zusatz</span>?
	!<span style="color: var(--ExampleFgColor);">strasse</span>!
	!<span style="color: var(--ExampleFgColor);">plz</span>! !<span style="color: var(--ExampleFgColor);">ort</span>!
	?<span style="color: var(--ExampleFgColor);">land</span>?

	&lt;b&gt;%<span style="color: var(--ExampleFgColor);">nachricht</span>%:&lt;/b&gt;

	!<span style="color: var(--ExampleFgColor);">nachricht</span>!

	&lt;b&gt;Newsletter:&lt;/b&gt; !<span style="color: var(--ExampleFgColor);">newsletter</span>!
	&lt;b&gt;%<span style="color: var(--ExampleFgColor);">kontakt</span>%:&lt;/b&gt; !<span style="color: var(--ExampleFgColor);">kontakt</span>!
	&lt;b&gt;%<span style="color: var(--ExampleFgColor);">datenschutz</span>%&lt;/b&gt; !<span style="color: var(--ExampleFgColor);">datenschutz</span>!
	EOM;
</pre>

<p>Die in <span style="color: var(--ExampleFgColor);">blau</span> geschriebenen Wörter sind die Variablen und entsprechen den Feldnamen aus dem <b>name</b>-Attribut der Felddefinition. Diese werden zur Laufzeit (d.h. bei der Mail-Erstellung nach Absenden des Formulars) durch "echte" Inhalte ersetzt. Variablen zwischen zwei Prozentzeichen (%) sind die Feld<i>bezeichnungen</i> (Wert des <b>label</b>-Attributs), und Variablen zwischen zwei Ausrufezeichen (!) oder zwischen zwei Fragezeichen (?) sind die Feld<i>inhalte</i>. Der Unterschied zwischen letzteren beiden ist, wie leere Feldinhalte dargestellt werden: Bei den !-Variablen werden Leereingaben durch den Text "(keine Eingabe)" kenntlich gemacht, und bei den ?-Variablen wird einfach nichts ausgegeben. Steht eine ?-Variable als Einziges in einer Zeile, dann wird sogar die gesamte Zeile (inklusive des Zeilenumbruchs) nicht ausgegeben.</p>

<p>Der Text innerhalb der Vorlage kann mittels HTML-Tags beliebig formatiert werden (z.B. &lt;b&gt;<b>fett</b>&lt;/b&gt;, &lt;i&gt;<i>kursiv</i>&lt;/i&gt; oder &lt;u&gt;<u>unterstrichen</u>&lt;/u&gt;). Obige Beispiel-Vorlage würde z.B. folgende Mail-Ausgabe erzeugen:</p>

<p class="textbox"><b>Lieferadresse:</b><br>
<br>
Donald Duck<br>
Mauspfad 1<br>
12345 Entenhausen<br>
<br>
<b>Nachricht:</b><br>
<br>
(keine Eingabe)<br>
<br>
<b>Newsletter:</b> Ja bitte<br>
<b>Kontakt per:</b> E-Mail<br>
<b>Die Datenschutzhinweise habe ich zur Kenntnis genommen.</b> Haken gesetzt</p>

<p>Wie man sieht, wurden die Zeilen mit den (nicht ausgefüllten) optionalen Adressfeldern Organisation, Adresszusatz und Land nicht ausgegeben, da die betreffenden Variablennamen zwischen zwei Fragezeichen (?) geschrieben wurden, während beim nicht ausgefüllten Nachrichtentext der Hinweis "(keine Eingabe)" erscheint, da für diesen Variablennamen Ausrufezeichen (!) verwendet wurden.</p>

<h3 id="guestbook">Das Gästebuch einrichten</h3>

<p>Im Gästebuch können die Besucher Deiner Seite öffentlich lesbare Grüße und Kommentare hinterlassen. Über neue Gästebuch-Einträge wird der Website-Inhaber per E-Mail informiert. Es kann eingestellt werden, ob neue Gästebuch-Einträge sofort erscheinen oder erst nach Freischaltung durch den Website-Inhaber (Administrator). Gästebuch-Einträge können durch den Administrator bearbeitet, kommentiert oder gelöscht werden.</p>

<p>Um ein neues Gästebuch anzulegen, erstelle über den Menü-Button <b>Neu</b> eine neue Datei an. Wähle die Vorlage "Gästebuch" aus. Im Dialog <b>Datei-Informationen bearbeiten</b> wähle als Dateityp "Seite" aus und gib einen Titel an (z.B. "Gästebuch"). Als Dateiname wird dann „gaestebuch“ vorgeschlagen, was aber nach Belieben abgeändert werden kann. Klicke auf <b>Schließen</b> oder <b>Speichern</b>. Rechts wird jetzt eine Vorschau des Gästebuchs angezeigt, und im Editor steht folgender Code:</p> 

<pre class="textbox">
<span style="color: var(--CommentFgColor);">&lt;!-- Zum Konfigurieren des Gästebuchs die System-Datei "gb.html" (lib/gb.html) bearbeiten! --&gt;</span>

&lt;p class="center bigger"&gt;hier könnte ein kurzer Einleitungstext stehen&lt;/p&gt;

&lt;?php include 'lib/gb.php'; ?&gt;
</pre>

<p>Ändere oder lösche den Einleitungstext nach Deinen Vorstellungen und speichere die Datei.</p>

<p>Nun muss noch das Gästebuch-Template angepasst werden. Öffne hierzu die System-Datei <b>lib/gb.html</b> über "Öffnen > Auflisten: System > Dateiname: gb.html > Öffnen" im Blog-Editor, scrolle bis zu der Zeile <span style="color: var(--CommentFgColor);">&lt;template-users&gt;</span> im grünen Bereich ab ca. Zeile 130 herunter und passe die dort angegebenen Werte nach Bedarf an. Wichtig sind hier vor allem das Administator-Passwort im Abschnitt <span style="color: var(--CommentFgColor);">&lt;template-users&gt;</span>, die Dateinamen der verwendeten Stylesheets im Abschnitt <span style="color: var(--CommentFgColor);">&lt;template-stylesheets&gt;</span> sowie die im Abschnitt <span style="color: var(--CommentFgColor);">&lt;template-message-strings&gt;</span> angegebenen Werte für Gästebuch-Namen, -Adresse und -Inhaber (Parameter <span style="color: var(--CommentFgColor);">sendmail-from</span>, <span style="color: var(--CommentFgColor);">sendmail-gb</span>, <span style="color: var(--CommentFgColor);">sendmail-subject</span>, <span style="color: var(--CommentFgColor);">sendmail-to</span>).</p>

<p>Weitergehende Anpassungen des Gästebuch-Layouts können durch Bearbeiten des Bereichs zwischen &lt;body&gt; und &lt;/body&gt; vorgenommen werden (HTML-Kenntnisse vorausgesetzt). Die dort enthaltenen Variablen wie z.B. @MESSAGES@ werden vom System zur Laufzeit ersetzt und sollten nicht verändert werden.</p>

<h3 id="widgets">Widgets einrichten</h3>

<p>Widgets (übersetzt in etwa "Dingsbums") sind Elemente, die in die Seitenleiste oder in den Fußbereich der Seite eingebunden werden können. Sie können beliebigen Inhalt anzeigen, sollten aber auf jeweils eine Aufgabe beschränkt sein. Klassische Seitenleisten-Widgets sind bei Blogs so Sachen wie "Neueste Beiträge", "Beitragskategorien", "Schlagwörter", "Archiv" und "Suche". Diese und einige weitere sind auch Bestandteil dieses Blog-Systems. Der Fußbereich enthält meistens nur einige Links zu Seiten, die schnell erreichbar sein sollen, z.B. Kontaktformular, Impressum oder Datenschutzerklärung. Auch für den Fußbereich gibt es bereits zwei beispielhafte Widgets, die angepasst werden können (Dateinamen: footer-*.html).</p>

<p>Alle Widget-Dateien und die Widget-Konfigurationsdatei <b>widgets.xml</b> 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"). Auf der rechten Seite erscheint dann eine Vorschau des geöffneten Widgets.</p>

<p>Die Widget-Dateien können beliebigen PHP-, HTML-, CSS- und JavaScript-Code enthalten. Daneben gibt es auch noch spezielle <a href="#widgets-xml">XML-Widgets</a><!-- wie das <a href="#widgets-image-link">Bildlink-Widget</a> und das  <a href="#widgets-random">Zufallsartikel-Widget</a>-->, die nur Definitionen nach einem vorgegebenen Schema enthalten.</p>

<h4 id="widgets-create">Ein neues Widget erstellen</h4>

<p>Um 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>

<pre class="textbox">
&lt;p&gt;&lt;a href="<span style="color: var(--ExampleFgColor);">seite</span>"&gt;&lt;img src="<span style="color: var(--ExampleFgColor);">media/bild.jpg</span>"&gt;&lt;/a&gt;&lt;/p&gt;
</pre>

<p>Den Link zu einem Artikel (z.B. <span style="color: var(--ExampleFgColor);">seite</span>) 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 (<span style="color: var(--ExampleFgColor);">media/bild.jpg</span>) kann man aus der Medienverwaltung einfügen ("Medien > (die gewünschten Mediendatei auswählen) > Einfügen").</p>

<p>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. <span style="color: var(--ExampleFgColor);">test-widget.html</span>, öffnet die Konfigurationsdatei <b>widgets.xml</b> und fügt das neue Widget dort zusammen mit einem kurzen Titel (z.B. <span style="color: var(--ExampleFgColor);">Test-Widget</span>) ein:</p>

<pre class="textbox">
&lt;widgets&gt;
	&lt;item filename="<span style="color: var(--ExampleFgColor);">test-widget.html</span>"&gt;<span style="color: var(--ExampleFgColor);">Test-Widget</span>&lt;/item&gt;
&lt;/widgets&gt;
</pre>

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

<h4 id="widget-include">Einbinden der Widgets in die Seite</h4>

<p>Wie bereits im Beispiel oben gezeigt, werden die Widgets über die Konfigurationsdatei <b>widgets.xml</b> an passender Stelle in die Seite eingebunden:</p>

<pre class="textbox">
&lt;widgets&gt;
	&lt;item filename="<span style="color: var(--ExampleFgColor);">dateiname.php</span>"&gt;<span style="color: var(--ExampleFgColor);">Titel</span>&lt;/item&gt;
&lt;/widgets&gt;
</pre>

<p><span style="color: var(--ExampleFgColor);">dateiname.php</span> ist der Dateiname des Widgets, also z.B. "tags.php". <span style="color: var(--ExampleFgColor);">Titel</span> ist der Widget-Titel, so wie er in der Seitenleiste erscheinen soll. Um ein Widget aus der Seitenleiste zu entfernen, kann man die betreffende item-Zeile entweder löschen oder mit &lt;!-- und --&gt; auskommentieren.</p>

<p>Standardmäßig erscheinen Widgets in der Seitenleiste. Um ein Widget in den <b>Fußbereich</b> der Seite einzubinden, gibt man in dessen Item-Zeile einfach das Attribut <span style="color: var(--ExampleFgColor);">position="footer"</span> an (siehe hierzu auch den Abschnitt <a href="#footer" title="">Den Fußbereich einrichten</a> weiter oben):</p>

<pre class="textbox">
&lt;widgets&gt;
	&lt;item filename="dateiname.php" <span style="color: var(--ExampleFgColor);">position="footer"</span>&gt;Titel&lt;/item&gt;
&lt;/widgets&gt;
</pre>

<h4 id="widgets-shuffle">Reihenfolge der Widgets</h4>

<p>Fußbereichs-Widgets erscheinen immer in der Reihenfolge, in der sie in der <b>widgets.xml</b> angegeben sind. Dies ist auch bei Seitenleisten-Widgets standardmäßig so. Um jedoch für etwas Abwechslung in der Seitenleiste zu sorgen, können die Seitenleisten-Widgets auch bei jedem Seitenaufruf zufällg "durchmischt" werden. Hierzu fügt man in die betreffenden Item-Zeilen einfach das Attribut <span style="color: var(--ExampleFgColor);">shuffle="true"</span> ein:</p>

<pre class="textbox">
&lt;widgets&gt;
	&lt;item filename="dateiname.php" <span style="color: var(--ExampleFgColor);">shuffle="true"</span>&gt;Titel&lt;/item&gt;
&lt;/widgets&gt;
</pre>

<p>Widgets mit <span style="color: var(--ExampleFgColor);">shuffle="true"</span> tauschen bei jedem Seitenaufruf untereinander ihren Platz. Die Position der Widgets ohne diese Angabe oder mit <span style="color: var(--ExampleFgColor);">shuffle="false"</span> bleibt unverändert.</p>

<h4 id="widgets-xml">XML-Widgets</h4>

<p>Neben den "normalen" Widgets, die beliebigen PHP-, HTML-, CSS- und JavaScript-Code enthalten können, gibt es auch noch einige "spezielle" Widgets, die aus XML-Code bestehen, der erst zur Laufzeit vom Blog-System interpretiert und in HTML-Code umgesetzt wird. Über XML-Attribute und -Tags kann der Inhalt und das Verhalten dieser Widgets bestimmt werden. Die Widget-Datei muss mit der Endung <b>.xml</b> abgespeichert werden (z.B. "beispiel.xml") und auch mit diesem Namen in die <b>widgets.xml</b> eingebunden werden.</p>

<h5 id="widgets-image-link">Bildlink-Widget</h5>

<p>Ein Bildlink-Widget zeigt ein Bild und zwei Texte (Überschrift und Bildbeschriftung) an, die mit einem Link versehen sind. Klickt der Besucher auf das Widget, wird er auf die verlinkte Seite geleitet. Einfaches Beispiel:</p>

<pre class="textbox">
&lt;widget type="link" link="<span style="color: var(--ExampleFgColor);">seite</span>" image="<span style="color: var(--ExampleFgColor);">media/bild.jpg</span>" heading="<span style="color: var(--ExampleFgColor);">Überschrift</span>" subtitle="<span style="color: var(--ExampleFgColor);">Bildbeschriftung</span>" /&gt;
</pre>

<p>Eine etwas übersichtlichere Schreibweise:</p>

<pre class="textbox">
&lt;widget
	type="link"
	link="<span style="color: var(--ExampleFgColor);">seite</span>"
	image="<span style="color: var(--ExampleFgColor);">media/bild.jpg</span>"
	heading="<span style="color: var(--ExampleFgColor);">Überschrift</span>"
	subtitle="<span style="color: var(--ExampleFgColor);">Bildbeschriftung</span>"
/&gt;
</pre>

<p>Es können auch unterschiedliche Bilder für den Hell- und den Dunkel-Modus angegeben werden. Hierzu verwendet man statt <span style="color: var(--KeywordFgColor);">image</span> einfach <span style="color: var(--KeywordFgColor);">image_light</span> und <span style="color: var(--KeywordFgColor);">image_dark</span>:</p>

<pre class="textbox">
&lt;widget
	type="link"
	link="seite"
	<span style="color: var(--KeywordFgColor);">image_light</span>="<span style="color: var(--ExampleFgColor);">media/bild-hell.jpg</span>"
	<span style="color: var(--KeywordFgColor);">image_dark</span>="<span style="color: var(--ExampleFgColor);">media/bild-dunkel.jpg</span>"
	<span style="color: var(--KeywordFgColor);">alt</span>="<span style="color: var(--ExampleFgColor);">Bildbeschreibung</span>"
	heading="Überschrift"
	subtitle="Bildbeschriftung"
	<span style="color: var(--KeywordFgColor);">style</span>="<span style="color: var(--ExampleFgColor);">card</span>"
/&gt;
</pre>

<p>Im obigen Beispiel wurden außerdem noch zwei weitere optionale Attribute angegeben: Mittels <span style="color: var(--KeywordFgColor);">alt</span> kann man einen alternativen Text für das Bild hinterlegen, der angezeigt wird, wenn der Browser des Benutzers so eingestellt ist, dass er keine Bilder anzeigt. Mit <span style="color: var(--KeywordFgColor);">style</span> kann der Anzeigestil des Widgets bestimmt werden: Wenn es fehlt oder <span style="color: var(--ExampleFgColor);">default</span> ist, erscheint das Widget im Standard-Stil; ist es <span style="color: var(--ExampleFgColor);">card</span>, dann wird das Bild ganz oben und in voller Breite angezeigt.</p>

<p>Bis auf <span style="color: var(--KeywordFgColor);">type</span> können alle Attribut-Angaben auch in Form von Tags angegeben werden. Diese "überschreiben" dann die Attribut-Angaben. Hier mal ein Beipiel, bei dem die beiden Attribute <span style="color: var(--KeywordFgColor);">heading</span> und <span style="color: var(--KeywordFgColor);">subtitle</span> als Tags innerhalb eines <span style="color: var(--KeywordFgColor);">frame</span>-Blocks notiert wurden:</p>

<pre class="textbox">
&lt;widget type="link" link="<span style="color: var(--ExampleFgColor);">seite</span>" image="<span style="color: var(--ExampleFgColor);">media/bild.jpg</span>"&gt;
	&lt;<span style="color: var(--KeywordFgColor);">frame</span>&gt;
		&lt;<span style="color: var(--KeywordFgColor);">heading</span>&gt;<span style="color: var(--ExampleFgColor);">Überschrift</span>&lt;/<span style="color: var(--KeywordFgColor);">heading</span>&gt;
		&lt;<span style="color: var(--KeywordFgColor);">subtitle</span>&gt;<span style="color: var(--ExampleFgColor);">Bildbeschriftung</span>&lt;/<span style="color: var(--KeywordFgColor);">subtitle</span>&gt;
	&lt;/<span style="color: var(--KeywordFgColor);">frame</span>&gt;
&lt;/widget&gt;
</pre>

<p>Es können beliebig viele "Frames" mit je eigenen Elementen (Bild, Link und Texte) angegeben werden, von denen dann bei jedem Seitenaufruf einer per Zufall ausgewählt wird:</p>

<pre class="textbox">
&lt;widget type="link" link="<span style="color: var(--ExampleFgColor);">seite</span>" image="<span style="color: var(--ExampleFgColor);">media/bild.jpg</span>"&gt;
	&lt;frame&gt;
		&lt;heading&gt;<span style="color: var(--ExampleFgColor);">Überschrift 1</span>&lt;/heading&gt;
		&lt;subtitle&gt;<span style="color: var(--ExampleFgColor);">Bildbeschriftung 1</span>&lt;/subtitle&gt;
	&lt;/frame&gt;
	&lt;frame&gt;
		&lt;heading&gt;<span style="color: var(--ExampleFgColor);">Überschrift 2</span>&lt;/heading&gt;
		&lt;subtitle&gt;<span style="color: var(--ExampleFgColor);">Bildbeschriftung 2</span>&lt;/subtitle&gt;
	&lt;/frame&gt;
	&lt;frame&gt;
		&lt;heading&gt;<span style="color: var(--ExampleFgColor);">Überschrift 3</span>&lt;/heading&gt;
		&lt;subtitle&gt;<span style="color: var(--ExampleFgColor);">Bildbeschriftung 3</span>&lt;/subtitle&gt;
	&lt;/frame&gt;
&lt;/widget&gt;
</pre>

<p>Je nachdem, welche Angaben die einzelnen Frames enthalten (Link, Bild, Texte), kann sich der Inhalt des Widgets bei jedem Seitenaufruf teilweise oder sogar komplett ändern.</p>

<p>Die Texte (Überschrift und Bildbeschriftung) können auch mittels HTML-Tags formatiert werden, allerdings müssen statt der spitzen Klammern eckige Klammern verwendet werden (z.B. [b]<b>fett</b>[/b], [i]<i>kursiv</i>[/i]), da spitze Klammern in XML-Dateien ausschließlich den XML-Tags vorbehalten sind. Wenn größere Mengen von HTML-, CSS- oder JavaScript-Code z.B. innerhalb des <span style="color: var(--KeywordFgColor);">subtitle</span>-Tags untergebracht werden sollen, dann empfiehlt sich die Verwendung eines <a class="popup" href="https://de.wikipedia.org/wiki/CDATA" target="_blank" rel="noopener" title="[b]CDATA[/b] (engl. Character Data) ist ein Schlüsselwort in XML und SGML. Mit CDATA werden Zeichendaten gekennzeichnet, die vom Parser nicht analysiert werden.[p](Quelle: Wikipedia)">CDATA</a>-Abschnitts:</p>

<pre class="textbox">
&lt;widget type="link" link="seite" image="media/bild.jpg"&gt;
	&lt;frame&gt;
		&lt;heading&gt;Überschrift 1&lt;/heading&gt;
		&lt;subtitle&gt;<span style="color: var(--KeywordFgColor);">&lt;![CDATA[</span>
			<span style="color: var(--ExampleFgColor);">normaler HTML-, CSS- oder JavaScript-Code</span>
		<span style="color: var(--KeywordFgColor);">]]&gt;</span>&lt;/subtitle&gt;
	&lt;/frame&gt;
&lt;/widget&gt;
</pre>

<p>(Dies gilt übrigens für alle XML-Dateien, daher wird nur an dieser Stelle einmalig darauf hingewiesen.)</p>

<h5 id="widgets-random">Zufallsartikel-Widget</h5>

<p>Dieses Widget zeigt den Titel, den Beschreibungstext und das Beitragsbild eines zufällig ausgewählten Blog-Artikels von der Beitrags-Übersichtsseite an:</p>

<pre class="textbox">
&lt;widget type="random" <span style="color: var(--KeywordFgColor);">style</span>="<span style="color: var(--ExampleFgColor);">card</span>" /&gt;
</pre>

<p>Wie man sieht, gibt es hier nicht viel zu konfigurieren. Lediglich der Anzeigestil kann über das Attribut <span style="color: var(--KeywordFgColor);">style</span> bestimmt werden: Wenn es fehlt oder <span style="color: var(--ExampleFgColor);">default</span> ist, erscheint das Widget im Standard-Stil; ist es <span style="color: var(--ExampleFgColor);">card</span>, dann wird das Beitragsbild ganz oben und in voller Breite an gezeigt.</p>

<h3 id="templates">Eine Vorlage erstellen</h3>

<p>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!</p>

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

<h3 id="textboxes">Einen Textbaustein erstellen</h3>

<p>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.</p>

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

<p>Um diesen Textbaustein dann in den Artikel einzufügen, öffne den Dateimanager (Button "Öffnen"), klicke oben neben "Auflisten:" auf "Textbausteine", wähle den einzufügenden Textbaustein aus der Dateiliste aus und klicke dann neben "PHP-include" auf den Button "Einfügen". Es sollte dann folgender PHP-Code im Editor zu sehen sein, wobei <span style="color: var(--ExampleFgColor);">dateiname.html</span> dem Dateinamen des Textbausteins entspricht:</p>

<pre class="textbox">
&lt;?php include 'textblocks/<span style="color: var(--ExampleFgColor);">dateiname.html</span>';?&gt;
</pre>

<p>Und im Vorschaufenster rechts sollte auch der Inhalt des Textbausteins zu sehen sein.</p>

<h3 id="snippets">Ein Snippet erstellen</h3>

<p>Um ein neues <a href="#toolbar-snippets">Snippet</a> für den Editor zu erzeugen, einfach über den Menü-Button <b>Neu</b> 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 <b>Öffnen</b> die Datei <b>snippets.xml</b> aus dem Bereich <b>Snippets</b> öffnen und nach folgendem Beispiel das neue Snippet an gewünschter Stelle einbinden:</p>

<pre class="textbox">
&lt;snippets&gt;
	&lt;<span style="color: var(--KeywordFgColor);">section</span> <b>caption</b>="<span style="color: var(--ExampleFgColor);">— Abschnitt —</span>"&gt;
		&lt;<span style="color: var(--KeywordFgColor);">item</span> <b>filename</b>="<span style="color: var(--ExampleFgColor);">snippet-dateiname.html</span>" <b>desc</b>="<span style="color: var(--ExampleFgColor);">Hinweistext</span>"&gt;<span style="color: var(--ExampleFgColor);">Snippet-Titel</span>&lt;/<span style="color: var(--KeywordFgColor);">item</span>&gt;
	&lt;/<span style="color: var(--KeywordFgColor);">section</span>&gt;
&lt;/snippets&gt;
</pre>

<p>Das Snippet-Menü besteht aus beliebig vielen Abschnitten (<span style="color: var(--KeywordFgColor);">section</span>-Blöcke). Jeder Abschnitt hat eine Überschrift (<b>caption</b>) und enthält seinerseits wiederum beliebig viele Snippet-Elemente (<span style="color: var(--KeywordFgColor);">item</span>-Zeilen). Ein Snippet-Element (<span style="color: var(--KeywordFgColor);">item</span>-Zeile) enthält den Dateinamen des Snippets (<b>filename</b>), einen optionalen Hinweistext (<b>desc</b>), der beim Darüberhalten des Mauszeigers als Tooltip eingeblendet wird, und den Titel, der im Menü angezeigt wird.</p>

<p>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 <b>snippets.xml</b> ist das neue Snippet im Snippet-Menü auswählbar.</p>

<p>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 der senkrechte Strich |.</p>

<p>Es gibt 3 unterschiedliche Snippet-Typen:</p>

<h4 id="snippets-inline">1. Inline-Snippets</h4>

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

<ul>
	<li>Die Variablen <span style="color: var(--ExampleFgColor);">@PART1@</span> bis <span style="color: var(--ExampleFgColor);">@PART5@</span> werden durch den 1., 2., 3., 4. oder 5. markierten Teil bzw. Zeile ersetzt.</li>
</ul>

<p>Beispiel-Snippet:</p>

<pre class="textbox">
&lt;a href="<span style="color: var(--ExampleFgColor);">@PART2@</span>"&gt;<span style="color: var(--ExampleFgColor);">@PART1@</span>&lt;/a&gt;
</pre>

<p>Markierter Text:</p>

<p><span style="background-color: var(--SelectBgColor); padding: 0.2em; margin: -0.2em;">Herzlich willkommen!|willkommen</span></p>

<p>Der erste Teil des markierten Textes (<span style="color: var(--ExampleFgColor);">Herzlich willkommen!</span>) wird in die Variable <span style="color: var(--ExampleFgColor);">@PART1@</span> eingesetzt, der zweite Teil (<span style="color: var(--ExampleFgColor);">willkommen</span>) in die Variable <span style="color: var(--ExampleFgColor);">@PART2@</span>. Das Ergebnis nach Einfügen des Snippets wäre dann:</p>

<pre class="textbox">
&lt;a href="<span style="color: var(--ExampleFgColor);">willkommen</span>"&gt;<span style="color: var(--ExampleFgColor);">Herzlich willkommen!</span>&lt;/a&gt;
</pre>

<p>Darstellung auf der Webseite:</p>

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

<h4 id="snippets-multiline">2. Multiline-Snippets</h4>

<p>Bei diesen werden die Variablen durch die markierten Zeilen ersetzt:</p>

<ul>
	<li><span style="color: var(--ExampleFgColor);">@LINE1@</span> bis <span style="color: var(--ExampleFgColor);">@LINE3@</span> wird durch die 1., 2. oder 3. markierte Zeile ersetzt.</li>

	<li><span style="color: var(--ExampleFgColor);">@MULTILINE@</span> 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.</li>

	<li><span style="color: var(--ExampleFgColor);">@LASTLINE@</span> 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.</li>
</ul>

<p>Beispiel-Snippet:</p>

<pre class="textbox">
&lt;blockquote&gt;
	&lt;p&gt;<span style="color: var(--ExampleFgColor);">@MULTILINE@</span>&lt;/p&gt;
	&lt;cite&gt;<span style="color: var(--ExampleFgColor);">@LASTLINE@</span>&lt;/cite&gt;
&lt;/blockquote&gt;
</pre>

<p>Markierter Text:</p>

<p><span style="background-color: var(--SelectBgColor); padding: 0.2em; margin: -0.2em;">Dies ist ein schlaues Zitat von irgendjemand ganz Berühmten.
<br>Etwas ganz Tolles, das er irgendwann mal gesagt haben soll.
<br>Quelle: Vergessen</span></p>

<p>Ergebnis nach Einfügen des Snippets:</p>

<pre class="textbox">
&lt;blockquote&gt;
	&lt;p&gt;<span style="color: var(--ExampleFgColor);">Dies ist ein schlaues Zitat von irgendjemand ganz Berühmten.</span>&lt;/p&gt;
	&lt;p&gt;<span style="color: var(--ExampleFgColor);">Etwas ganz Tolles, das er irgendwann mal gesagt haben soll.</span>&lt;/p&gt;
	&lt;cite&gt;<span style="color: var(--ExampleFgColor);">Quelle: Vergessen</span>&lt;/cite&gt;
&lt;/blockquote&gt;
</pre>

<p>Darstellung auf der Webseite:</p>

<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>

<h4 id="snippets-table">3. Tabellen-Snippets</h4>

<p>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:</p>

<ul>
	<li><span style="color: var(--ExampleFgColor);">@TH@</span> wird durch die in der <u>ersten</u> 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.</li>
	<li><span style="color: var(--ExampleFgColor);">@TD@</span> wird durch die in den <u>weiteren</u> 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 &lt;tr&gt; und &lt;/tr&gt; entsprechend oft vervielfältigt. Die Anzahl der Teile (Tabellenspalten) sollte in allen Zeilen mit @TH@ und @TD@ gleich sein!</li>
	<li><span style="color: var(--ExampleFgColor);">@LASTLINE@</span> wird durch die letzte markierte Zeile ersetzt (Tabellen-Untertitel). Falls nicht benötigt, bitte eine Leerzeile zusätzlich markieren.</li>
</ul>

<p>Beispiel-Snippet:</p>

<pre class="textbox">
&lt;figure&gt;
	&lt;table&gt;
		&lt;tr&gt;
			&lt;th&gt;<span style="color: var(--ExampleFgColor);">@TH@</span>&lt;/th&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;<span style="color: var(--ExampleFgColor);">@TD@</span>&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/table&gt;
	&lt;figcaption&gt;<span style="color: var(--ExampleFgColor);">@LASTLINE@</span>&lt;/figcaption&gt;
&lt;/figure&gt;
</pre>

<p>Markierter Text:</p>

<p><span style="background-color: var(--SelectBgColor); padding: 0.2em; margin: -0.2em;">Spalte A | Spalte B | Spalte C
<br>Zelle A1 | Zelle B1 | Zelle C1
<br>Zelle A2 | Zelle B2 | Zelle C2
<br>Zelle A3 | Zelle B3 | Zelle C3
<br>Tabelle</span></p>

<p>Ergebnis nach Einfügen des Snippets:</p>

<pre class="textbox">
&lt;figure&gt;
	&lt;table&gt;
		&lt;tr&gt;
			&lt;th&gt;<span style="color: var(--ExampleFgColor);">Spalte A</span>&lt;/th&gt;
			&lt;th&gt;<span style="color: var(--ExampleFgColor);">Spalte B</span>&lt;/th&gt;
			&lt;th&gt;<span style="color: var(--ExampleFgColor);">Spalte C</span>&lt;/th&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;<span style="color: var(--ExampleFgColor);">Zelle A1</span>&lt;/td&gt;
			&lt;td&gt;<span style="color: var(--ExampleFgColor);">Zelle B1</span>&lt;/td&gt;
			&lt;td&gt;<span style="color: var(--ExampleFgColor);">Zelle C1</span>&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;<span style="color: var(--ExampleFgColor);">Zelle A2</span>&lt;/td&gt;
			&lt;td&gt;<span style="color: var(--ExampleFgColor);">Zelle B2</span>&lt;/td&gt;
			&lt;td&gt;<span style="color: var(--ExampleFgColor);">Zelle C2</span>&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;<span style="color: var(--ExampleFgColor);">Zelle A3</span>&lt;/td&gt;
			&lt;td&gt;<span style="color: var(--ExampleFgColor);">Zelle B3</span>&lt;/td&gt;
			&lt;td&gt;<span style="color: var(--ExampleFgColor);">Zelle C3</span>&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/table&gt;
	&lt;figcaption&gt;<span style="color: var(--ExampleFgColor);">Tabelle</span>&lt;/figcaption&gt;
&lt;/figure&gt;
</pre>

<p>Darstellung auf der Webseite:</p>

<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>

<h3 id="keyboard-shortcuts">Eigene Tastaturkürzel anlegen</h3>

<p>Im Editor gibt es bereits einige Tastaturkürzel (siehe Abschnitt <a href="#toolbar-format">Textformatierung</a>). Zusätzlich können auch eigene Tastaturkürzel angelegt oder vorhandene geändert oder entfernt werden. Dies geschieht durch Bearbeiten der Datei <b>keyboard.xml</b> im Bereich <b>System</b>. Das grundsätzliche Format dieser Datei sieht so aus:</p>

<pre class="textbox">
&lt;keyboard&gt;
	&lt;<span style="color: var(--KeywordFgColor);">shortcut</span> <b>key</b>="<span style="color: var(--ExampleFgColor);">x</span>" <b>ctrl</b>="<span style="color: var(--ExampleFgColor);">true</span>" <b>shift</b>="<span style="color: var(--ExampleFgColor);">false</span>" <b>alt</b>="<span style="color: var(--ExampleFgColor);">false</span>" <b>meta</b>="<span style="color: var(--ExampleFgColor);">false</span>" <b>title</b>="<span style="color: var(--ExampleFgColor);">Hinweistext</span>"&gt;
		&lt;<span style="color: var(--KeywordFgColor);">command</span> <b>name</b>="<span style="color: var(--ExampleFgColor);">Kommando</span>" <b>value</b>="<span style="color: var(--ExampleFgColor);">Parameter</span>" /&gt;
	&lt;/<span style="color: var(--KeywordFgColor);">shortcut</span>&gt;
&lt;/keyboard&gt;
</pre>

<p>Für jedes Tastaturkürzel gibt es dort einen &lt;<span style="color: var(--KeywordFgColor);">shortcut</span>&gt;...&lt;/<span style="color: var(--KeywordFgColor);">shortcut</span>&gt;-Block mit Angaben zu den gedrückten Tasten:</p>

<ul>
	<li><b>key:</b> Der Tastencode der gedrückten Taste (z.B. ein Buchstabe oder eine Zahl). Um einen Tastencode einzufügen, einfach den Button <b>Tastencode</b> oben in der Werkzeugleiste anklicken und innerhalb von 5 Sekunden eine Taste drücken.</li>

	<li><b>ctrl:</b> <span style="color: var(--ExampleFgColor);">true</span>, wenn gleichzeitig die "Strg"-Taste gedrückt werden muss.</li>

	<li><b>shift:</b> <span style="color: var(--ExampleFgColor);">true</span>, wenn gleichzeitig die "Umschalt"-Taste gedrückt werden muss.</li>

	<li><b>alt:</b> <span style="color: var(--ExampleFgColor);">true</span>, wenn gleichzeitig die "Alt"-Taste gedrückt werden muss.</li>

	<li><b>meta:</b> <span style="color: var(--ExampleFgColor);">true</span>, wenn gleichzeitig die "Meta"-Taste gedrückt werden muss. Unter Windows ist das die "Windows"-Taste.</li>

	<li><b>title:</b> Ein optionaler Hinweistext, der im Snippet-Menü als Tooltip angezeigt wird, wenn die Maus dort über den Snippet-Namen gehalten wird (ohne zu klicken). Fehlt diese Angabe, dann wird als Tooltip die Tastenkombination angezeigt. Ein Hinweistext kann nützlich sein, wenn die automatisch ermittelten Tastenbezeichnungen nicht sprechend genug sind.</li>
</ul>

<p>Wenn eine der Tasten "Strg", "Umschalt", "Alt" oder "Meta" nicht gedrückt werden muss, kann der Attributwert <span style="color: var(--ExampleFgColor);">false</span> oder anders oder leer sein, oder das Attribut kann auch ganz fehlen, so wie in dem Beispiel weiter unten.</p>

<p>Innerhalb des <span style="color: var(--KeywordFgColor);">shortcut</span>-Blocks gibt es einen oder mehrere <span style="color: var(--KeywordFgColor);">command</span>-Zeilen mit Angaben zu dem Kommando, das ausgeführt werden soll, wenn das Tastaturkürzel betätigt wurde: <b>name</b> ist der Name des Kommandos, <b>value</b> 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:</p>

<figure>
	<table>
		<tr>
			<th>name</th>
			<th>value</th>
			<th>Anmerkung</th>
		</tr>
		<tr>
			<td>Duplicate</td>
			<td></td>
			<td>Dupliziert den im Editor markierten Text oder - wenn kein Text markiert ist - die gesamte Zeile, in der sich der Cursor befindet.</td>
		</tr>
		<tr>
			<td>Insert&shy;Snippet</td>
			<td>Dateiname</td>
			<td>Fügt ein <a href="#toolbar-snippets">Snippet</a> in den Editor ein. Als Parameter muss der Dateiname eines existierenden Snippets angegeben werden (siehe Abschnitt <a href="#snippets">Ein Snippet erstellen</a>). Das Tastaturkürzel wird im Snippet-Menü als Tooltip angezeigt, wenn die Maus dort über den Snippet-Namen gehalten wird (ohne zu klicken). Ist im <span style="color: var(--KeywordFgColor);">shortcut</span>-Block ein <b>title</b> angegeben, dann wird dieser stattdessen angezeigt.</td>
		</tr>
		<tr>
			<td>Insert&shy;String</td>
			<td>Text</td>
			<td>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 <b>&lt;</b> und <b>&gt;</b> müssen als <b>&amp;lt;</b> und <b>&amp;gt;</b> geschrieben werden.</td>
		</tr>
		<tr>
			<td>Insert&shy;Tag</td>
			<td>Text</td>
			<td>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.</td>
		</tr>
		<tr>
			<td>Save</td>
			<td></td>
			<td>Speichert die gerade bearbeitete Datei, sofern ungespeicherte Änderungen vorliegen.</td>
		</tr>
		<tr>
			<td>Scroll&shy;Line</td>
			<td>Zahl</td>
			<td>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.</td>
		</tr>
	</table>
	<figcaption></figcaption>
</figure>

<h4>Beispiel:</h4>

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

<pre class="textbox">
&lt;keyboard&gt;
	&lt;shortcut key="<span style="color: var(--ExampleFgColor);">c</span>" alt="<span style="color: var(--ExampleFgColor);">true</span>"&gt;
		&lt;command name="<span style="color: var(--ExampleFgColor);">InsertTag</span>" value="<span style="color: var(--ExampleFgColor);">code</span>" /&gt;
	&lt;/shortcut&gt;
&lt;/keyboard&gt;
</pre>

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

<p class="translate center hidden" x-data-translate-from=""></p>

<?php include 'lib/default-footer.php'; ?>
