Symfony Grundkurs

HTML-Elemente in Kind-Templates einbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit wenigen Twig-Tags lassen sich HTML-Elemente in Kind-Templates einbinden. Sehen Sie in diesem Film, wie Sie dazu vorgehen müssen.
04:29

Transkript

In der "base.html.twig" ist nun hinterlegt, wie die Seite prinzipiell aussehen soll und über welche Elemente jede einzelne Unterseite verfügen sollte. Das ist hier in meinem Fall die Navigation. Die kann man jetzt noch ein bisschen anpassen, die ist noch nicht so ganz dem entsprechend, was ich brauche. Ich brauche z. B. keine Klasse "active" "Start" passt mir als Bezeichnung, während ich sonst nur noch eine Seite mit Details brauche. Den Kontakt-Eintrag können wir ganz wegtun und wie genau es sich jetzt mit den Verlinkungen verhält, das sehen wir uns später noch an. Jetzt im Moment geht es mir nur um das optische Erscheinungsbild. Ich speichere es und werde hier die Ansicht erneuern. Ja, das passt ganz wunderbar; beim Drüberfahren funktioniert auch noch alles. Jetzt brauche ich noch etwas, womit ich hier den Bauch dieses Mantels quasi füllen kann und da habe ich schon so eine gewisse Vorstellung, was ich haben möchte. Ich habe mir hier mal eine pure HTML-Seite gebaut, mit "Bootstrap" natürlich und die möchte ich jetzt ganz gerne in mein Twig-System einbauen. Das wäre also ein Template, so das erste grundlegende Kind-Template zu meiner "base.html.twig". Wir sehen uns mit Strg+U mal den Quelltext an und da bemerken Sie, dass der Anfang schon ziemlich gleich ist und es gibt hier schon diese drei umfassenden Container, die Sie aus der "base.html" kennen, das heißt, wenn ich etwas rüberkopieren möchte, dann beginnt das hier mit der Überschrift und umfasst dann die ganze Tabelle. Mit Strg+C hole ich mir das Ganze in die Zwischenablage und wechsle zurück in meine IDE. Die "base.html.twig" hat ihren Dienst getan und ich habe hier drüben ja schon mein eigenes Verzeichnis "plan" gemacht, wo ich meine Templates hineinlegen möchte und da gibt es auch schon die "index.html.twig". Und das, was bisher in dieser "index.html.twig" hinterlegt ist, ist das "base.html.twig" und hier ist auch der Ort, wo ich jetzt mit etwas Abstand mit Strg+V die Tabelle einfügen werde. Nur mit dem Einfügen der Tabelle allein ist es nicht getan. Wenn wir uns nochmal die "base.html.twig" ansehen, dann werden wir merken, dass wir hier im "body"-Bereich noch mal ein eigenes Twig-Element haben und mit Hilfe dieses Twig-Elements, also dieser Twig-Tags, um genau zu sein, können wir jetzt dafür sorgen, dass die Inhalte des Templates gut eingebunden werden. Mit Strg+C kopiere ich mal das Start-Tag und das Start-Tag wird gleich hier oben zum Einsatz kommen und dann nehme ich auch noch das schließende Tag mit Strg+C in die Zwischenablage, gehe ans Ende meiner Tabelle und füge es dort mit Strg+V wieder ein. Dieses in meiner "index.html.twig" sollte fürs Erste ausreichen, wenn ich es gespeichert habe mit Strg+S, dass ich jetzt schon etwas mehr angezeigt bekomme als nur die Navigation. Sehen wir uns das Ganze auf meiner Willkommen-Seite an. Ich erneuere die Ansicht und tatsächlich prinzipiell ist die Tabelle jetzt schon mal da. Das einzige, was wir dann noch anpassen müssen, ist, dass wir etwas mehr Luft nach oben bekommen, weil ja die Navigation oben fixiert ist. Es ist also sehr einfach, HTML-Vorlagen dann tatsächlich in das Twig-System zu übernehmen, wenn man eben so ein, zwei grundlegende Tags auch von Twig beherrscht.

Symfony Grundkurs

Steigen Sie in die moderne und flexible PHP-Entwicklung mit dem praktischen Framework ein.

2 Std. 35 min (34 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:18.01.2017

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!