Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

TYPO3 Neos Grundkurs

Der Prototyp des Page-Objekts

Testen Sie unsere 2018 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Sämtliche TypoScript-Objekte benötigen einen Prototypen. Das gilt ebenfalls für sämtliche Objekttypen, welche mit dem TYPO3 Neos Core geliefert werden. In diesem Video sehen Sie sich den Aufbau des Prototypen für das Page-Objekt näher an.

Transkript

Wir wollen uns in diesem Video den Prototypen des Page-Objekts ansehen und den Head-Bereich erweitern. Aber zunächst zur Aufgabenstellung. Sehen wir uns die "Standard.html" an. Hier finden wir zwei Meta-Tags, zum einen den Meta-Tag für den Charset, und zum anderen den Meta-Tag für den viewport, welcher die Website-Darstellung automatisch auf die volle Bildschirmgröße bei mobilen Geräten skaliert. Wenn wir das mit dem Quelltext der Website vergleichen, finden wir zwar den Meta-Tag für den Charset, allerdings haben wir noch keinen Meta-Tag für den Viewport. Um zu verstehen, warum der eine Meta-Tag ausgegeben wird und der andere nicht, werfen wir einen Blick in den Prototypen der Page. Diesen finden Sie im TYPO3 Neos Paket, welches wir uns erst einmal herunterladen. Wie alle Pakete befindet sich das TYPO3 Neos Paket unter "Packages", in diesem Fall unter "Application" und hier das Paket in "TYPO3 Neos". Per Konventionen müssen alle TypoScript-Dateien unter "Resources" abgelegt werden. Unter "Private", "TypoScript", "Prototypes", finden wir die "Page.ts2", in welcher die Prototypen-Definitionen für unsere Page abgelegt ist. Innerhalb dieser Datei sehen wir zunächst die Prototypen-Definitionen für "Page". diese erbt von einem weiteren Prototypen "Http-Message" und wir sehen hier einige Standardangaben, die mit der Definition in unserem TypoScript-File sofort zur Verfügung stehen. Also zum einen den Doctype, das Html-tag und etwas weiter unten auch dem Head-Bereich. Innerhalb des Head-Bereichs finden wir Angaben, wie das Title-tag, und oberhalb auch die Angabe unseres Meta-Tags für den Charset. Hier kommt also dieses Meta-Tag her. Der Head selbst ist vom Typ "Array", wir können ihn also beliebig um unter Eigenschaften erweitern Genau das wollen wir nun auch tun. Ich wechsle zunächst zurück in die "Root.ts2" und wir legen hier ein neues Kindobjekt an. Dazu kopiere ich mir den Javascript-Part, benenne ihn in "metadata", wir belassen den Typ "template", wir wollen auch hier aus unserer Vorlagendatei eine Section laden. Vergeben auch hier den Section-Name "metadata", speichern die Datei und laden sie dadurch hoch. Als nächstes wechseln wir in die "Standard.html" und legen den "f:section" ViewHelper mit dem name-Attribut und dem Wert "metadata" um unseren Meta-Tag für den Viewport. Wenn wir nun die Datei speichern, das Front-End neu laden und uns den Quelltext anzeigen lassen, finden wir nun den Meta-Tag für Viewport innerhalb unseres Heads. Mit der Definition unseres Page-Objekts vom Typ "Page" behalten wir also schon Standard-Eigenschaften, die im Prototypen angelegt worden sind und wir können die Eigenschaften gemäß ihrer Typen beliebig erweitern.

TYPO3 Neos Grundkurs

Entdecken Sie die Konzepte und grundlegenden Technologien des modernen Content Management Systems und sehen Sie, wie Sie eigene Projekte starten.

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!