Kirby CMS Benutzerhandbuch

Einführung in das CMS Kirby für Redakteure

Original von Jannik Beyerstedt, v1.0.0, github.com/jbeyerstedt/kirby-clientmanual-DE
Überarbeitung und Ergänzung durch Heiner, zuletzt für Kirby 3.x am 25.04.2020 und 21.05.2020.

Gilt ab Kirby Version 3.x.


Einleitung:

Kirby” ist ein dateibasiertes CMS, es können also - auch wenn das nicht wirklich komfortabel ist - alle Inhalte mit einem (externen, lokalen) Texteditor (z.B. Notepad++ bzw. Notepad++ portable) und einem (externen, lokalen) FTP-Programm (z.B. FileZilla client bzw. FileZilla portable) bearbeitet werden.

Für eine bequemere Bearbeitung gibt es jedoch eine Web-Bedienoberfläche, mit der (fast) alle Funktionen gesteuert werden können. Diese Bedienoberfläche heißt “Panel” und wird in anderes Systemen auch als “Backend” oder “Administrator-Login” bezeichnet. In diesem Benutzerhandbuch wird der Umgang mit diesem Panel beschrieben, Details zu den Tiefen des Systems finden sich im Administratorhandbuch (hier nicht online).

Ein weiterer Begriff ist das “Frontend”, welches den für den normalen Besucher sichtbaren Teil beschreibt, also die Webseite an sich.

Für die in diesem Handbuch beschriebenen URLs gilt, dass diese immer den Teil nach der Domain wiedergeben. Wenn also eine URL /panel heißt, muss “sav-barchfeld.de/panel” (also “/panel” im Browser an die Webadresse der Startseite anhängen!) in den Browser eingegeben werden.


Das Panel:

Das Panel ist immer unter der URL /panel zu finden. Hier muss man sich zunächst, wenn man aktuell nicht angemeldet ist, mit einem vorhandenen Account anmelden, um die Seite bearbeiten zu können.
Zuerst ist die sog. “Übersicht” zu sehen. Auf der linken Seite stehen immer die Seiten und Ordner der Webseite. Diese Module werden in den nächsten Kapiteln erklärt.


Dateien links auf dieser Seite sind die sog. “Globalen Dateien” der Website, die auf jeder Seite mit dem Pfad “/content/<dateiname.ext>” referenziert werden können,
z.B.:

(image: /content/neu.gif)

ergibt:


Seiteneinstellungen / Seitenvariablen

Die globalen Einstellungen der Webseite geben alle Informationen wieder, die auf der gesamten Webseite gebraucht werden.
Diese Seite im Panel ist nur für Webmaster nach dem Klick auf den “Burger“-Knopf (d.h.: “”) ganz oben links im dortigen Menü unter “Website” und dann “Admin-Einstellungen > Website-Einstellungen” zu finden.

Die Felder rechts sollten sich in der Regel selbst erklären, ich führe sie hier aber noch einmal auf:

  • Slogan: Zeile im Kopf jeder Seite unter dem Logo (kann leer sein!)
  • Autor (“Author”): für Suchmaschinen
  • Beschreibung (“Description”): der kurze Text bei den Suchergebnissen von Google und co.
  • Stichwörter (“Keywords”): auch für Suchmaschinen, wird zum Einordnen der Seite genutzt
  • Fußzeile: sichtbare Links zu Impressum, Datenschutzerklärung etc. in der Fußzeile jeder Seite dieser Website.



Um sie zu ändern, bitte einfach bei Heiner nachfragen.


Die Seitenstruktur

In “Kirby” gibt es erst einmal zwei Arten von Seiten: “Öffentlich” und “Ungelistet”. Öffentliche Seiten werden dafür genutzt, dass diese in Menüs automatisch auftauchen.
Dass eine Seite Ungelistet ist, heißt nicht, dass diese nicht aufgerufen werden kann, sondern, dass diese per Hand verlinkt werden muss bzw. in bestimmten Situationen automatisch aufgerufen wird. Das sind z.B. Seiten wie die Fehler-Seite (wenn eine falsche URL aufgerufen wurde) - der 404 Fehler.

Öffentliche Seiten können normalerweise (nicht bei Blogs etc.) sortiert werden, um die Reihenfolge in den Menüs zu steuern. Das geht per “drag and drop”, wenn man auf den “Bearbeiten“-Link über der Liste der Unterseiten klickt.

Zusätzlich gibt es seit Kirby 3.0 noch den “Entwurfs“-Modus von Seiten. Sobald eine Seite neu erstellt wird, ist diese im “Entwurfs“-Modus. Solche Seiten sind nur für angemeldete User auf der Website sichtbar!

Neue Seite erstellen

Eine neue Seite kann mit dem “Hinzufügen”-Link erstellt werden. Dafür muss ein Titel festgelegt werden, aus dem dann ein “URL-Anhang” generiert wird. Das ist der Teil, der dann am Ende in der Adress-Zeile des Browsers steht. Dieses Feld “URL-Anhang” wird automatisch so bearbeitet, dass die WWW-Regeln für URLs beachtet werden.

Als letztes muss eine Vorlage ausgewählt werden. Diese Vorlage regelt, welche Funktion die Seite erfüllen soll und damit auch, wie diese aussieht. Häufig ist diese vorausgewählt, so dass hier nichts geändert werden muss bzw. kann (das Feld ist dann gegraut).

Eine neue Seite ist beim Erstellen immer erst einmal im “Entwurfs“-Modus. Nach dem Klicken auf den Status “Entwurf” kann dieser Status in einem Dialog geändert werden (und bei Bedarf in diesem Dialog die Position der Seite festgelegt werden).
Alternativ kann man dieses im Kontext-Menü unter “Status ändern” anpassen. Hier kann auch direkt die Sortierung der Seiten geändert werden.

Eine Seite bearbeiten

Erst einmal ein paar Worte zum prinzipiellen Vorgehen. Im nächsten Kapitel geht es dann darum, wie Texte formatiert werden können.
Ein weiteres Vorwort noch: Es kann sein, dass nicht auf allen Seiten alle Funktionen, die in den nächsten Abschnitten beschrieben werden, verfügbar sind. Das hat dann in der Regel auch einen tieferen Sinn, bei Zweifeln aber sonst einfach bei Heiner nachfragen.

Wenn man nun auf eine Seite klickt, sieht man eine zweigeteilte Ansicht. In der linken Leiste kann man in der Regel wieder weitere Seiten hinzufügen, wie schon von der Übersicht bekannt. Außerdem können der Seite Dateien (Bilder etc.) hinzugefügt werden. Diese werden dann - je nachdem wie die jeweilige Webseite gestaltet ist - automatisch angezeigt oder können im Text an beliebiger Stelle verlinkt und dadurch angezeigt werden.

Auf der rechten Seite kann der Inhalt der Seite bearbeitet werden. Je nachdem, welche Vorlage gewählt wurde und wie die Seite gestaltet ist, gibt es mehr oder weniger verschiedene Felder und Funktionen.
Alle Seite haben jedoch einen Titel, der meist oben auf der Seite als Überschrift der Seite oder des Artikels angezeigt wird. Außerdem ist dies meistens auch der Name der Seite, der im Menü verwendet wird. Zum Ändern bitte auf den Namen der Seite im Panel klicken!
Danach gibt es den Haupttext, sowie evtl. weitere Textbereiche und Optionen. Diese sind dann aber mit selbsterklärenden Überschriften bzw. Ausfüllhinweisen versehen.
Alternativ kann eine Seite auch nur als “Ordner”, also eine Sammlung von weiteren Seite zur Strukturierung der Inhalte dienen.

Wichtig:
Beim nachträglichen Ändern des Seiten-Titels bitte auch die URL anpassen!!!
Dieses ist in der Regel auch bei der erneuten Nutzung eines früheren Artikels (z.B.. Blog) erforderlich!

Nachdem man gespeichert hat, kann die Seite über den entsprechenden Link (“Öffnen”) unter dem Seitentitel geöffnet werden.

Teilweise werden Unterseiten auch dafür verwendet, weitere Blöcke auf einer Seite zu strukturieren. Diese sind dann nicht einzeln sichtbar. Das wird dann aber einzeln erklärt.


Texte:

Kirby” verhält sich bei der Bearbeitung von Texten etwas anders als andere Textbearbeitungsprogramme, die Sie vielleicht kennen. Man kann nämlich nicht direkt die Schriftgröße und andere Texteinstellungen ändern. Dafür wird jedoch eine auf Webseite angepasste “Sprache” verwendet, die “Markdown” heißt. Das ist jetzt aber nicht so kompliziert, wie es vielleicht auf den ersten Blick wirkt, Sie müssen nicht programmieren können.
Bei der Gestaltung von Webseiten ist es üblich, das Aussehen der Text zentral festzulegen. Daher kann die Schriftgröße von Überschriften und Text nicht einzeln festgelegt werden. Der Fließtext kann ganz normal aufgeschrieben werden, Überschriften müssen speziell gekennzeichnet werden. Um Texte gut strukturieren zu können, gibt es sechs verschiedene Überschriften, in der Regel solten aber nur die Überschriften 3 bis 5 verwendet werden, wobei die Überschrift 3 größte Überschrift für normale Texte ist. (Die Überschriften 1 und 2 sind für andere Zwecke reseviert.)

Details sind in der jetzt links im Panel sichtbaren Navigationsspalte zu finden.

Markdown

Die Elemente, die am häufigsten benötigt werden, sind:

  • Überschriften:#” vor die Überschrift setzen. Anzahl entspricht dem Rang der Überschrift (Überschrift 3 => ###)
  • Fettdruck: Den Text, der fett geschrieben werden soll, in doppelte Sternchen “**” setzen
  • Kursivdruck: Den Text, der fett geschrieben werden soll, in einfache Sternchen “*” setzen
  • Listen: einfach “-” an den Anfang der Zeile setzen. Jedoch vorher eine Zeile leer lassen
    Für nummerierte Listen muss man am Anfang der Zeile “1.” schreiben, die Reihenfolge der Nummern ist egal.
    Soll eine normale Zeile mit “1.” beginnen, einfach die Zeile mit “1\.” beginnen!
  • Zeilenumbruch: einen einfache Zeilenumbruch erhält man durch eine neue Zeile
  • Absatz: für einen Absatz hingegen muss man eine Zeile frei lassen

Kirbytags

Die Basis-Formatierungen von Markdown wurden in “Kirby” noch um sogenannte Tags ersetzt:

Kirbytags haben immer eine einheitliche Form:

(name: Wert attribut: Wert_Attribut)

Eine normale runde Klammer leitet den Kirbytag ein. Danach folgt der Name des Tags und mit einem Doppelpunkt werden die Werte übergeben. Einige Kirbytags haben noch weitere Optionen, die durch weitere Paare aus Attribut-Name und Wert eingestellt werden. Diese sind wieder durch einen Doppelpunkt getrennt.
Bei manchen Tags muss dahinter eine neue Zeile begonnen werden!

Nun ein paar Beispiele:

Für einen Link reicht das Ziel, dann wird als Text die URL angezeigt. Alternativ kann man einen eigenen Text hinzufügen. Außerdem kann man mit “popup: yes” festlegen, dass der Link in einem neuen Tab geöffnet werden soll:

(link: http://google.com text: Eine Suchmaschine popup: yes)

Interne Links kann man auch erstellen lassen. In diesem Beispiel ohne speziellen Text:

(link: impressum)

Für einen E-Mail-Link:

<email@domain.de>

oder

(email: email@domain.de)

Auch kann in der runden Klammer ein eigener Text für den Fließtext definiert werden wie “kontaktieren Sie mich”:

(email: email@domain.de text: kontaktieren Sie mich)

Um ein Bild in den Text einzufügen, das vorher in dieser Seite hochgeladen wurde (das Bild muss links unter “Dateien” auftauchen):

(image: bildname.jpg)

Um einen Dateidownload in den Text einzufügen (auch hier kann man wieder einen Text festlegen):

(file: download.pdf)

Details

Es gibt noch viele weitere Möglichkeiten, dies sind aber die gängigsten. Bei dieser Website habe ich noch weitere Kirbytags geschrieben oder installiert. Diese sind dann auch in den Unterseiten der Spickzettel-Serie links in der jetzt im Panel sichtbaren Navigation zu finden.