Im letzten Teil hatten wir ein Template erstellt. Doch Design ist nicht alles. Uns fehlen noch die Texte. Dieser Teil zeigt, wie man Artikel anlegt.

Noch als kleine Information am Rande: Die Inhalte besitzen eine gewisse Hierarchie. Innerhalb einer Seite kann es mehrere Artikel geben. Die Artikel wiederum sind in Elemente wie Überschriften, Listen, Absätze usw. unterteilt.

Artikel anlegen

Im Backend finden wir unter Inhalte den Punkt Artikel. In der Übersicht finden wir unsere Seitenstruktur wieder. Um nun einen neuen Artikel anzulegen klicken wir auf “Neuer Artikel”. Anschließend können wir durch Klick auf das Clipboard-Icon die Seite auswählen, in der der Artikel erstellt werden soll. Ich fange vorne an und wähle die Startseite. Die Reihenfolge ist jedoch beliebig .

Wir geben dem Artikel einen Titel, mit dem wir diesen in der Übersicht leichter wiederfinden. Außerdem soll der Artikel in der Hauptspalte angezeigt werden. Das sollte jedoch bereits ausgewählt sein. Sofern man mehrere Artikel auf einer Seite unterbringen möchte, kann man den Artikeln einen Teaser-Text geben. Unter der Rubrik “Veröffentlichung” setzen wir die Option “Artikel veröffentlichen”, damit der Artikel auch im Frontend zu sehen ist. Wir klicken auf Speichern und bearbeiten und kommen somit in die Übersicht der Artikelelemente.

Elemente

Wie den Artikel legen wir von hier aus einen Text an. Als Elementtyp wählen wir zunächst eine Überschrift, geben den Text für diese ein und wählen die Ordnung der Überschrift. Mit einem Klick auf “speichern und neu” wird dieses Element gespeichert und wir können das nächste anlegen. Diesmal einen Text. Texten kann man direkt eine Überschrift geben, jedoch empfehle ich jedes Textelement separat anzulegen – auf diese Weise ist man etwas flexibler.

Liste

Elemente

Formular

Der WYSIWYG-Editor bietet uns weitere Möglichkeiten den Text zu formatieren. Wir klicken nachdem wir den Text eingegeben haben auf “speichern und schließen” und kommen somit wieder zu der Übersicht mit den Artikelelementen. Von hier können wir bestehende Artikelelemente bearbeiten, löschen oder verschieben.

Wir haben nun den ersten Artikel angelegt. Für die restlichen Seiten legen wir auf gleicher Art und Weise die Artikel an. An sich wären wir damit schon am Ende, jedoch möchte ich noch auf die einzelnen Elemente eingehen, um diesen Teil etwas abzurunden.

Element-Typen

Überschrift

Überschriften erklären sich von selbst. Sie dienen dazu, eine Überschrift in den Artikel einzufügen. Dieses Element haben wir vor kurzem Kennen gelernt.

Text

Auch dieses Element wurde oben Beschrieben. Hiermit werden formatierte Texte in den Artikel eingefügt. Die Eingabe erfolgt dabei über einen Rich-Text-Editor, der ein paar Funktionen bietet, die man aus Textverarbeitungsprogrammen kennt und bestimmte Formatierungen auf Knopfdruck setzen.

HTML

Das Inhaltselement HTML dient in erster Linie dazu, Inhalte darzustellen, die sich nicht mit den anderen vorhandenen Elementen realisieren lassen. Man muss jedoch beachten, dass bestimmte HTML-Tags nicht erlaubt sind. Diese werden automatisch entfernt.

Welche Tags erlaubt sind, findet man in der “‘system/config/config.php”‘, bzw. lassen sich dort konfigurieren.

Code

Code-Snippets können mit diesem Inhaltselement dargestellt werden. Eine Ausführung des Codes findet nicht statt.

Bild

Auch dieses Element ist selbsterklärend.

Hyperlink

Hyperlink-Elemente fügen Text- oder Grafik-Links ein. Links lassen sich aber auch in Textelementen im Fließtext darstellen.

Für E-Mail-Adressen gibt man das ”mailto://-Protokoll an. TYPOlight wird automatisch die E-Mail-Adresse verschlüsseln, damit diese nicht ohne weiteres von SPAM-Bots ausgelesen werden können.

Liste

Hiermit lassen sich Aufzählungen in einen Artikel einfügen. Mittels JavaScript lässt sich die Liste erweitern.

Tabelle

Auch unter diesem Element wird sich jeder etwas vorstellen können. Hier hilft ebenfalls ein JavaScript die Tabelle um Zeilen und Spalten zu erweitern.

Download

Mit diesem Element kann man einen Link zu einer Datei einfügen. Beim Klick auf den Link wird der “Speichern unter”-Dialog geöffnet. Der integrierte Downloadmanager prüft zuvor, ob der Benutzer zum Download der Datei berechtigt ist.

Bildergalerie

Hiermit können eine Reihe von Bildern als Galerie dargestellt werden. Die Großansichten der Bilder werden mit dem mittlerweile bekannten Lightbox-Effekt dargestellt.

Top Link

Dieses Element fügt einen Link zum Seitenanfang ein und eignet sich bei recht langen Seiten.

Akkordeon

Dieses Inhaltselement fügt ein Feld eines mootools Akkordeons ein. Das Akkordeon-Element funktioniert wie das Text-Element, außer dass beim Akkordeon-Element eine Überschrift eingegeben werden muss, damit das Element geöffnet und geschlossen werden kann. Die Überschrift kann HTML-Code enthalten und somit auch ein Bild anstatt eines Textes sein.

Inhalt

Dieses Element dient dazu, ein bereits vorhandenes Inhaltselement noch einmal anzuzeigen. Auf diese Weise muss man Änderungen an einem mehrmals vorkommenden Inhaltselement nur einmal vornehmen. Die Frontend-Ausgabe ist identisch mit der Frontend-Ausgabe des original Inhaltselements. Eigenschaften wie Ausrichtung, Abstände und Stylesheet-ID können bei Bedarf überschrieben werden.

Formular

Dieses Element dient dazu, ein Formular in den Artikel einzufügen. Zu Formularen gibt es mehr im nächsten Tutorial.

Modul

Mit diesem Element lassen sich Module einbinden.

Schlußwort

Nun sollte es ein leichtes sein unseren Webauftritt mit Inhalten zu füllen. Im nächsten Teil werden wir uns den Formularen widmen und ein Kontaktformular erstellen.

Tags: cms open source tutorial TYPOlight/Contao