TYPO3 (Teil 36): Inhalte und Menüs ausgeben

Bislang könnt ihr im Backend noch so viele Inhalte anlegen, im Frontend sind diese nicht zu sehen. Denn tatsächlich muss man TYPO3 per TypoScript explizit mitteilen, wo die Inhalte ausgegeben werden sollen. Genau um diesen Aspekt geht es in diesem Tutorial. Im zweiten Teil seht ihr, wie sich die Seitenstruktur als Menü im Frontend abbilden lässt.

Wir empfehlen:
TYPO3 CMS-Training

Am besten lässt sich die Ausgabe von Inhalten natürlich testen, wenn es tatsächlich auszugebende Inhalte gibt. In diesem Tutorial wird davon ausgegangen, dass auf der Startseite ein Inhalt angelegt wurde. (Sollte das bei euch noch nicht der Fall sein, fügt einfach in die Startseite einen neuen Inhalt vom Typ Text ein und gebt eine Überschrift und einen Dummy-Text an). Öffnet Web>Template und ruft die Seite Home auf.

 

Klickt anschließend auf Vollständigen Template-Datensatz bearbeiten und wechselt ins Register Enthält. Im Feld Verfügbare Objekte wird auf CSS Styled Content (css_styled_content) geklickt. Daraufhin übernimmt TYPO3 diesen Eintrag automatisch in das Feld Ausgewählte Objekte.

 

Bei diesem CSS Styled Content handelt es sich um ein sogenanntes statisches Template. Das sind vordefinierte TypoScript-Codes, in denen wichtige Grunddefinitionen bereits enthalten sind. Statische Templates nehmen euch also eine ganze Menge Programmieraufwand ab. So sind in CSS Styled Content bereits die notwendigen Informationen enthalten, mit denen sich Inhalte der Webseite auslesen und anzeigen lassen. Um statische Templates nutzen zu können, müssen sie – wie das beschrieben wurde – eingebunden bzw. inkludiert werden.

Damit sind die Vorarbeiten bereits abgeschlossen und die eigentlichen Inhalte können ausgegeben werden. Verwendet wird dafür das TypoScript-Objekt CONTENT. Um auf die in CSS Styled Content bereitgestellte vordefinierte Instanz dieses Objekts zuzugreifen, verwendet man den Bezeichner styles.content.get. Mittels Kopieroperator kann genau das dann dem gewünschten Platzhalter zugewiesen werden.

page = PAGE
page {
 config.doctype = html5
 meta.author = psd-tutorials.de
 meta.description = PSD-Tutorials.de bietet 
Tutorials und Video-Trainings zur Bildbearbeitung 
mit Photoshop, Fotografie, Mediengestaltung und Webentwicklung.
  includeCSS {
   screen = fileadmin/css/style.css
   screen.title = display
   screen.media = screen 
  }
    10 = TEMPLATE
   10 {
    template = FILE
    template.file = fileadmin/elektro.html
    workOnSubpart = DOKUMENT 
    marks {
     FUSSBEREICH = TEXT
     FUSSBEREICH.data= date:H.i      
     INHALT < styles.content.get
    }
  }
}

 

Ein Blick auf die Seite im Frontend liefert das gewünschte Ergebnis.

Auf diese Weise könnt ihr also beliebige Inhalte an den passenden Stellen im Frontend ausgeben.

 

Menüs ausgeben

Nun wurde im Backend eine logische Seitenstruktur aufgebaut.

Und diese gilt es natürlich, auch den Besuchern im Frontend zur Verfügung zu stellen. Und wie macht man das am besten? Genau, indem man die Seitenstruktur als Menü abbildet. Darum geht es im nächsten Teil dieses Tutorials.

 

Diese Menüvarianten gibt es

Aus dem Seitenbaum werden automatisch die Seitennamen und deren Hierarchie übernommen und daraus ein Menü generiert. Wer jedoch glaubt, in TYPO3 ließen sich nur einfachste Menüs erstellen, der irrt. Tatsächlich stellt TypoScript ganz unterschiedliche Menüvarianten zur Verfügung.

Über TMENU lassen sich textbasierte Menüs erstellen. Dabei handelt es sich um die einfachste Menüart, die aus einer Kombination von Text und CSS besteht.

Bei GMENU wird aus jedem Eintrag des Seitenbaums eine Grafik generiert, die dann jeweils einen Menüpunkt bildet. Gerade die Möglichkeiten, die TYPO3 hinsichtlich grafischer Menüs bietet, sind einzigartig. Auf einfachste Weise können Grafikmenüs erzeugt werden, ohne dass man die einzelnen Grafiken vorher in einem Grafikprogramm erstellen muss.

Mit JSMENU lassen sich JavaScript-basierte Menüs erzeugen. Hier kann der Anwender aus einem Auswahlfeld die gewünschte Seite aufrufen.

Über TMENU_LAYERS lassen sich Layer-basierte Menüs generieren. Die Besonderheit dieser Menüs ist, dass die Menüpunkte aufklappen: Zeigt man auf eine Menüebene, wird die Unterebene automatisch angezeigt. Wer ein solches Menü bereits selbst programmiert hat, weiß, wie fehleranfällig es ist, vor allem hinsichtlich seiner Funktionsfähigkeit in unterschiedlichen Browsern. Diese Arbeit nimmt einem jetzt TYPO3 ab.

Und dann gibt es noch GMENU_LAYERS. Diese Menüart funktioniert ähnlich wie TMENU_LAYERS, arbeitet allerdings mit grafischen Menüs.

 

Das obere Menü ausgeben

Wie man Menüs erstellen kann, lässt sich natürlich wieder am besten anhand eines Beispiels zeigen. In diesem werden die der Seite Menü oben untergeordneten Seiten in einem horizontalen Textmenü ausgegeben.

Angezeigt werden soll das Menü anstelle des Platzhalters ###MENU_OBEN###. Verwendet wird das HMENU-Objekt, mit dem sich hierarchische Menüs aufbauen lassen.

MENU_OBEN = HMENU

 

Zusätzlich muss der Startpunkt des Menüs angegeben werden. Verwendet wird dafür die Eigenschaft special. Hier kann man zunächst über directory festlegen, dass alle Unterseiten einer bestimmten Seite ausgelesen werden. Um welche übergeordnete Seite es sich dabei handelt, bestimmt man über value. Diesem value muss man als Wert die ID des Seitendatensatzes übergeben. An dieser Stelle stellt sich natürlich eine Frage: Wie lässt sich diese ID ermitteln? Zeigt dazu mit dem Mauszeiger auf die Seite im Seitenbaum. In einem Tooltipp-Fenster ist daraufhin die ID zu sehen.

Die Syntax könnte nun folgendermaßen aussehen:

MENU_OBEN = HMENU
 MENU_OBEN {
  special = directory
  special.value = 8  
}

 

Jetzt fehlen noch drei Dinge für die Anzeige der Menüeinträge. Das sind die Menüart, der Zustand und der Abstand, der zwischen den einzelnen Menüeinträgen eingehalten werden soll. Als Menüart wird TMENU gewählt. Dadurch wird ein Textmenü erstellt.

TypoScript erlaubt die Definition unterschiedlicher Zustände von Menüeinträgen. Ihr kennt als typischen Menüzustand beispielsweise Mouseover. Fährt man mit dem Mauszeiger über einen Eintrag, verändert sich dieser oder es wird ein Untermenü angezeigt. In TypoScript kann man dieses Mouseover über den Zustand RO beschreiben. Für den aktuellen Menüeintrag gibt es den Zustand ACT.

Im vorliegenden Fall wird der Zustand NO verwendet. Damit beschreibt man den Normalzustand eines Menüeintrags. Diesen Zustand aktiviert man mit NO = 1. (Im Fall von NO ist eine solche Aktivierung zwar nicht zwingend nötig, wird aber gemeinhin so gehandhabt).

Was nun noch fehlt, sind die Abstände zwischen den Menüeinträgen. Dazu umhüllt man die jeweiligen Einträge mit entsprechender HTML-Syntax. Im vorliegenden Fall werden dafür zwei Leerzeichen verwendet.

1 = TMENU
 1 {
  NO = 1
  NO.linkWrap = &nbsp;&nbsp;|
   }
Damit ist die Anwendung vollständig. 
Insgesamt sieht der relevante Teil nun so aus:
10 = TEMPLATE
   10 {
    template = FILE
    template.file = fileadmin/elektro.html
    workOnSubpart = DOKUMENT 
    marks {
     FUSSBEREICH = TEXT
     FUSSBEREICH.data= date:H.i 
     INHALT < styles.content.get
   MENU_OBEN = HMENU
      MENU_OBEN {
       special = directory
       special.value = 8  
       1 = TMENU
        1 {
         NO = 1
          NO.linkWrap = &nbsp;&nbsp;|
        } 
      }
      }

 

Wird die Seite im Frontend aufgerufen, ergibt sich das gewünschte Bild.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

TYPO3 CMS-Training

TYPO3 CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • 8 Stunden Video-Trainings zum beliebten TYPO3 CMS 6
  • 36 Praxis-Lektionen in Text/Bild als PDF (über 400 Seiten)
  • Themeerstellung mit TypoScript
  • Blog, Forum, Multidomainfähigkeit, Mehrsprachigkeit, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training