Wer noch nie mit einem CMS gearbeitet hat, der kann sich vielleicht noch gar nicht vorstellen, wie die Inhalte, die man flexibel erstellt, in einer Webseite erscheinen können. Dazu lohnen sich ein paar Gedanken, wie ein eigenes CMS aussehen sollte. Die Anforderungen könnten in etwa so aussehen:

• Es sollen beliebig viele Seiten mit Inhalten erstellt werden.
• Seiten sollten ineinander verschachtelbar sein.
• Seiten sollten verschoben werden können.
• Ein Menü sollte automatisch erzeugt werden mit verschiedenen CSS-Eigenschaften für aktive / nicht aktive Links.
• Die Seiteninhalte sollen an bestimmten Stellen in einer Vorlage (Template) erscheinen.
• etc.

Diese Anforderungen und mehr hält natürlich Typo3. Zwei Dinge sond dabei besonders vorteilhaft gelöst: die Erstellung der Templates und die Unabhängigkeit von Seiten und Seiteninhalten.

Das Typo3 Backend auf Deutsch

• Wir gehen davon aus, dass Typo3 lauffähig installiert wurde. Das ist z.B. möglich mit der automatischen Software-Installation von all-inkl.com . Zahlreiche Anleitungen hierzu finden sich auch im Internet.
• Wir loggen uns ins Backend ein über www.example.com/typo3 (wobei Sie example.com durch die root-URL ihres Typo3-Verzeichnisses ersetzen sollten) Hier sind die voreingestellten Login-Daten: admin und password.
• Um die deutsche Sprache für unseren Account zu aktivieren, klicken wir links auf User Tools > User Settings, und wählen dort unter Language "German" aus. Dann speichern Sie durch Save Configuration. Es passiert erst mal nichts, weil Typo3 die deutschen Übersetzungen noch gar nicht installiert hat.
• Das tut man unter dem Extension Manager (Admin Tool > Ext Manager), dort wählen wir Translation handling, dann unter Languages to fetch den Eintrag "deutsch [german]", klicken auf Save Selection und anschließend auf Update from Repository. Nun sucht Typo3 nach verfügbaren Übersetzungsdateien für Ihre eingestellte Typo3 Installation. (Diesen Vorgang sollten Sie nach der Installation von Extensions wiederholen, um die entsprechenden Übersetzungen runterzuladen, falls diese vorhanden sind)

Die ersten Seiteninhalte Ausgabe

• Im Backend sehen wir nun links das Seitenmenü auf deutsch. Wichtig ist für den Anfang die Sektion Web, und dabei die Abschnitte Seite, Liste und Template.
• Klicken wir erst auf Seite. Hier werden die Seiteninhalte der Seite bearbeitet. Es erscheint rechts neben dem Seitenmenü der Seitenbaum. Dieser bildet die Struktur Ihrer Website ab. Derzeit besteht ihre Website also aus einer einzigen Seite. Klicken Sie diese an:
• Nun erscheint rechts neben dem Seitenbaum der Seiteninhalt, dieser besteht standardmäßig auf vier Bereichen (Spalten): Links, Normal, Rechts und Rand.
• Klicken wir nun in der Spalte Normal auf das kleine, grüne Plus-Zeichen, um der Seite ein neues Inhaltselement hinzuzufügen. Wir wählen dazu Typischer Seiteninhalt > Normaler Text. Es erscheint der Inhaltseditor des Seitenelementes:
• Unter dem Reiter Allgemein geben Sie eine Überschrift für den Inhalt an. Unter dem Reiter Text erscheint ein Textfeld (textarea), in das wir den Inhalt tippen und formatieren können.
• Nachdem wir etwas Test-Inhalt eingegebenhaben, klicken wir oben auf das Icon mit der Diskette mit Lupe, um in einem neuen Tab eine Voransicht der Seite im Frontend zu erhalten.
• Es erscheint erst einmal nichts, da Typo3 nicht weiß wie es mit den Inhalten umgehen soll. Wir müssen noch ein Template mit einem Typoscript Setup erstellen.

Ein erstes Typoscript Setup für die Frontend-Ausgabe

Typo3 ist wie gesagt sehr flexibel und demnach will es Ihnen auch nicht reinreden, wie Sie die Inhalte und Seitennavigation im Frontend ausgegeben haben wollen. Also sagen wir dem System, wie dies zu geschehen hat in einem so genannten Template, oder ganauer, dem Typoscript Setup (TS).

Typoscript ist keine Programmiersprache, sondern füllt nur ein sehr komplexes PHP-Array mit Konfigurationsanweisungen, auf das Typo3 zugreift, um zu erfahren, was es zu tun hat. Ein kleines Beispiel soll dies verdeutlichen:

• Klicken wir links auf auf Web > Template. Hier wählen wir im Seitenbaum unsere Hauptseite (Root) aus und erstellen ein neues Template durch den Button Create template for a new site (dieser Teil von Typo3 ist leider nicht komplett auf deutsch übersetzt, aber soviel Englisch-Kenntnisse sollten vorhanden sein).
• Es erscheint ein neues Template (wir befinden uns übrigens in der Ansicht Info/Modify, die sich ganz rechts oben auswählen lässt). Für unser Typoscript-Setup klicken wir auf das Bleistift-Icon links neben Setup. Es öffnet sich der Typoscript-Editor.
• Hier löschen wir den Inhalt und tippen ein:
• page = PAGE
  page.1 = TEXT
  page.1.value = Hallo Welt
  page.1.wrap = <h1> | </h1>
  page.2 = TEXT
  page.2.value = Dies ist ein Satz aus dem Typoscript Setup.
  page.2.wrap = <p> | </p>
• Wir speichern durch Klicken auf Update oben, und schauen uns das Ergebnis im Frontend an durch Klichen auf die Lupe.
• Es erscheint im Quelltext:
• <h1>Hallo Welt</h1>
  <p>Dies ist ein Satz aus dem Typoscript Setup.</p>
• Was haben wir im TS konfiguriert, damit es zu dieser Ausgabe kam?
• page = PAGE
  Hiermit definieren wir unser Seitenobjekt, das wir page genannt haben.
• page.1 = TEXT
  So fügen wir unserer Seite ein erstes Unterobjekt vom Typ TEXT zu.
• page.1.value = Hallo Welt
  Wir setzen den Wert des Textobjektes auf Hallo Welt.
• page.1.wrap = <h1> | </h1>
  Wir wrappen (umklammern) die Ausgabe mit einem H1-Tag. Dabei ist wrap eine weitere Eigenschaft des TEXT-Objektes.
• page.2 = TEXT
  Wir fügen an Position 2 des Seitenobjektes ein weiteres TEXT-Objekt hinzu.
• etc.

Dieses Beispiel zeigt die ersten Möglichkeiten von Typo3, was das Seiten-Objekt ist, und wie man im TS Inhalte fest definiert. Wir wollen jedoch die Inhalte ausgeben, die wir eben in der Seiteninhalts-Ansicht erstellt haben. Dazu müssen wir unser Text-Objekt mit dem Wert "Hallo Welt" dynamisch ersetzen. Hierzu benötigen wir die Erweiterung css_styled_content.

Ausgabe der Seiteninhalte mit Hilfe der Extension CSS Styled Content

CSS Styled Content ermöglicht es, die Inhaltselemente der aktuellen Seite in unser TS-Setup zu integrieren, und formatiert dabei automatisch vor durch bestimmte CSS-Klassen.

• Wir müssen diese Extension erst in unser Template integrieren. Das tun wir unter Web > Template > Info /Modify. Hier klicken wir auf Click here to edit whole template record. Dort gibt es die erweiterten Einstellungen für das Template der Seite:
• Unter dem Reiter Enthält klicken wir unter Statisch einschließen rechts in der Liste auf CSS Styled Content, und speichern.
• Nun wird von der Extension einfach eine Menge an zusätzlichem TS-Code konfiguriert, den wir zwar nicht in unserem TS-Setup sehen, auf den wir jedoch zugreifen können.
• Wir gehen in das TS-Setup unserer Seite und ändern den eben erstellten Code folgendermaßen:
• page = SEITE
  # linke Spalte
  page.10 < styles.content.getLeft
  page.10.wrap = <div id="links"> | </div>
  # mittlere Spalte
  page.20 < styles.content.get
  page.20.wrap = <div id="normal"> | </div>
  # rechte Spalte
  page.30 < styles.content.getRigth
  page.30.wrap = <div id="rechts"> | </div>
• Nun klicken wir auf Update und oben auf die Lupe, und schauen uns die Frontend-Ausgabe an. Anstelle uneres statischen Textes aus dem TS erscheint nun der mit CSS-Klassen ausgezeichnete Text, den wir eben in der Seiteninhalts-Ansicht erstellt haben.
• Fügen wir Text hinzu, so erscheint dieser automatisch auch im Frontend.
• Über eine CSS-Datei können wir nun noch die Inhalte gezieht stylen:
• #links {padding: 10px; width:150px; border-right: solid 1px #AAAAAA; float:left; }
  #normal { padding: 10px; width:300px; border-right: solid 1px #AAAAAA; float:left; }
  #rechts { padding: 10px; width:250px; float:left; }
• Diese Datei nennen wir style.css und laden sie hoch ins Verzeichnis fileadmin/ (Datei > Dateiliste) auf den Server, und integrieren sie im TS durch die Anweisung:
• page.includeCSS.10 = fileadmin/style.css

Fortsetzung folgt

Diese erste Anleitung bringt uns schon mal dazu, erste Inhalte dynamisch auszugeben. Als nächtes legen wir weitere Seiten an, und erstellen eine Seitennavigation.

Dieser Eintag wurde gepostet am 27.10.2008 unter Typo3, Tutorials.
RSS 2.0 Feed | trackback verwenden