Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

TYPO3 CMS 6.2 Grundkurs

Mehrere Ebenen anlegen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Eine Website besteht meist nicht nur aus einer Seitenebene. Dieser Film erklärt Ihnen Schritt für Schritt, wie Sie eine tiefere Verschachtelung im Frontend darstellen können.

Transkript

Unsere aktuelle TYPO3-Installation beinhaltet lediglich eine Menüebene. In der Praxis reicht dies aber meist nicht aus, Um Inhalte feiner gliedern zu können, benötigen wir weitere Unterebenen. In diesem Videotraining sehen wir uns an, wie wir eine zweite und eine dritte Ebene ausgeben können. Diesmal beginnen wir andersherum und ich zeige Ihnen zuerst das Ergebnis und wir gehen dann Schritt für Schritt durch das Backend und konfigurieren mit TypoScript die Ausgabe entsprechend. Im Frontend wollen wir nun unterhalb der Seite Projekte eine Unterebene einblenden. Diese soll erscheinen, wenn wir den Oberpunkt mit der Maus überfahren. So wie wir hier den Aufbau sehen, werden wir ihn nun auch gestalten. Wir werden die Ebenen mit den Projekten anlegen und darunter eine Ebene für die Details der Projekte. Das CSS hierfür liegt bereits in der main.css, darum müssen Sie sich nicht kümmern. Wechseln wir zurück ins Backend. Zunächst legen wir die Menüebene unterhalb von Projekte an. Dazu verwenden wir das Modul Funktionen. Und legen hier Projekte A bis D an. Ich kopiere und füge den Bezeichner ein und ändere lediglich hinten die Aufzählung. Mit einem Klick auf Seiten anlegen generieren wir die Ebene unterhalb von Projekte. Nun brauchen wir noch die Seiten Detail 1 und Detail 2. Hierzu klicke ich auf Projekt B und tippe auch hier die Bezeichner ein. Damit haben wir schon die Seitenhierarchie geschaffen. Als Nächstes müssen wir unser TypoScript entsprechend erweitern, damit wir auch diese Ebenen angezeigt bekommen. Dazu wechsle ich ins Template-Modul, rufe mir das Template auf der Root-Site auf und bearbeite den Setup-Bereich. Begutachten wir zunächst das bestehende TypoScript. Wir haben ein Content Object Array definiert, darin enthalten zwei Stellen, einmal die Stelle 10 mit einem HMENU. Darin haben wir die Ausgabe des Menüpunkts Home definiert und die Stelle 20, an der wir ebenfalls ein HMENU haben. Hier geben wir die Unterebene der Seite Home aus. In der Zeile 17 kopieren wir noch alle Einstellungen aus dem ersten HMENU an das zweite HMENU, genauer gesagt die erste Menüebene. Wir wollen nun eine zweite Menüebene dort einfügen. Ich öffne mit dazu einen Codeblock und wir legen zunächst die zweite Menüebene an. Dies funktioniert nach demselben Schema wie in der ersten Menüebene. Mit 2 = TMENU lege ich ein Textmenü an. Und wir öffnen hier auch einen Codeblock. Als Nächstes wollen wir unsere Menüebene mit einem ul umschließen. Hierin vergeben wir noch die Klasse level1. Und wir definieren nun die Menüzustände. Als Erstes den Normalzustand. Hier wollen wir alle Menüeinträge mit einem li umschließen. Greifen wieder auf wrapItemAndSub zurück. Und notieren hier das li. Als Nächstes kopieren wir alle Einstellungen von NO an ACT. Also den wrap wollen wir ebenfalls im Aktiv-Zustand haben. Danach noch den Aktiv-Zustand aktivieren. Und wir kontrollieren nun mal die Ausgabe im Frontend. Dazu laden wir die Seite neu und sehen leider aktuell noch nicht viel. Allerdings wenn wir auf Projekte klicken, wird uns die Menüebene hier oben ausgegeben. Das entspricht jetzt nicht unbedingt dem Verhalten, das wir haben wollen. Wir wollen ja, dass diese Menüebene angezeigt wird, sobald ich mit dem Maus auf dem Menüpunkt verweile. Dazu gibt es eine einfache, kleine Einstellung. Wir können in der ersten Menüebene mit expAll, also expand all ausgesprochen, die Untermenüpunkte dauerhaft ausklappen. Dazu setzen wir das Ganze auf 1. Speichern. Und laden jetzt die Seite nochmal neu. Und wenn ich jetzt nun auf die Seite Home klicke, bekomme ich dauerhaft die Menüpunkte ausgegeben, ohne dass ich erst auf Projekte klicken muss. Einen kleinen Tippfehler beseitige ich nun noch. Ich hatte hier fälschlicherweise level1 angegeben. Dies muss level2 lauten. Wenn ich jetzt speichere, erhalten wir auch die gewünschte Ansicht beim Überfahren des Menüpunkts. Jetzt haben wir bei Projekt D einen etwas unschönen abschließenden Unterstrich. Wir wollen den Unterstrich nur als Trenner haben. Dies realisieren wir mit einer CSS-Klasse, die bereits die entsprechenden Definitionen über die main.css trägt. Ich wechsle zurück ins Backend. Und wir notieren beim Normal-Zustand NO.ATagParams. Damit können wir Attribute in das ATag einfügen. Und wir wollen den Klassenbezeichner last vergeben. So wie wir die Angabe hier sehen, würde dieses Attribut in jedes ATag eingefügt werden. Wir greifen nun auf den optionSplit zurück und notieren Folgendes: Pipe, Stern, Pipe, Leerzeichen, Pipe, Stern, Pipe, Leerzeichen. Was bedeutet das? Wir wollen an der ersten Stelle kein Klassenattribut. Wir wollen auch in den mittleren Elementen kein Klassenattribut. Wir wollen lediglich beim letzten Element ein Klassenattribut. Wenn ich nun speichere und die Seite im Frontend neu lade, sehen wir, der Unterstrich ist verschwunden. Und lediglich beim letzten Eintrag wurde die Klasse hinzugefügt. Fügen wir nun die dritte Menüebene ein. Hier gehen wir nach ähnlichem Schema vor. Ich kopiere dazu einfach die zweite Ebene. Füge diese wieder ein. Und ändere 2 auf 3 ab. Damit erhalten wir die Ebene unterhalb von beispielsweise Projekt B. Hier dünnen wir die config etwas aus. Wir nehmen das last-Attribut heraus und benennen level2 in level3 um. Damit haben wir alle nötigen HTML-Tags definiert, die wir für unsere Ausgabe benötigen. Wenn ich nun speichere und die Seite wieder neu lade, erhalte ich auch hier wieder dieselbe Ansicht. Wir haben das expAll vergessen. In der zweiten Ebene definieren wir ebenfalls expAll und setzen dies auf 1. Damit werden alle Menüpunkte der nachfolgenden Ebene dauerhaft angezeigt. Wenn wir nun die Seite im Frontend neu laden, sehen wir auch die Untermenüpunkte. Soweit zu tieferen Verschachtelungen in Menüführungen. Fassen wir also zusammen. Sobald wir tiefere Ebenen definiert haben, müssen wir auch in unserer Menüführung tiefere Ebenen definieren. Bisher hatten wir nur die Ebene 1. Wir haben nun eine zweite Ebene in unserer Menüführung eingefügt und eine dritte. In der zweiten Ebene haben wir auf ein neues Attribut zurückgegriffen, auf eine neue Einstellung, auf die ATagParams. Damit können wir Klassen in unser ATag einschleusen. Und wir haben mit expAll, expand all, die Untermenüpunkte dauerhaft aufgeklappt.

TYPO3 CMS 6.2 Grundkurs

Erfahren Sie alles Wichtige für den Einstieg in das Content-Management-System TYPO3 CMS sowie zu Themen wie Mehrsprachigkeit und Multidomainfähigkeit bis hin zur News-Verwaltung.

Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!