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.

Contao 3 Grundkurs

Templates: Update-sichere HTML-Vorlagen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Hauptaufgabe eines CMS ist, HTML zu generieren. Zum einen für die Seite selbst, zum anderen für die in den einzelnen Seitenbereichen enthaltenen Elemente. Contao nutzt in beiden Fällen Templates, die "update-sicher" angepasst werden können.
08:35

Transkript

Der Hauptjob von Content Management Systemen ist das Generieren von HTML. Die meisten Systeme benutzen dafür Vorlagen also Templates, in denen HTML-Gerüste stehen, z. B. für die komplette Seite, wo erst mal der Rahmen definiert wird, wie die Seite aufgebaut sein soll. Und dann nochmal Templates für einzelne Module, Elemente die auf der Seite irgendwo liegen Und in diese HTML-Gerüste werden dann jeweils die aktuellen Daten aus der Datenbank eingespielt. Also z. B. das HTML-Gerüst für eine Navigation als unsortierte Liste, und dann aus der Datenbank in das Template eingespielt die entsprechenden Navigationspunkte, die für diese Seite definiert sind. Auch Contao verfolgt dieses Prinzip, und ich möchte Ihnen hier auf Dateiebene zunächst zeigen, wie Contao das macht. Das hier ist eine Contao-Installation, und wir wechseln jetzt mal in den Ordner system, modules, dann core, und weiter unten finden Sie den Ordner templates. Hier sind alle Templates versammelt, die Contao benutzt. Es gibt Templates für Google Analytics, bzw. Piwik, es gibt auch für das Backend Templates. Es gibt für Inhaltselemente eine ganze Reihe von Templates, für Formulare und für das Frontend. Darin befindet sich das Standard-Seitentemplate von Contao, d. h. das ist der äußere Rahmen für die Seite. Jeweils in HTML 5 Form oder in XHTML je nachdem, was Sie im Seitenlayout eingestellt haben. Wir schauen uns die Standard-Seitenvorlage mal im Quellcode an. Es wird der äußere Rahmen der Seite generiert, dann je nach Einstellung die ich getroffen habe, im Backend entsprechende Informationen im head ausgeliefert und es werden dann im body die entsprechenden Seitenbereiche, hier z. B der header, falls sie existieren generiert. Und innerhalb dieses Seitenbereiches dann alles was in diesem Bereich erscheinen soll. Vom Grundaufbau her haben wir einen allesumschließenden wrapper, dann folgen drei Zeilen, Zeile 1 ist der header Zeile 2 ist der container, und innerhalb des Containers gibt es nochmal die Spalten main, left und right, je nachdem ob die im Seitenlayout definiert wurden. Die dritte Zeile letztlich ist der footer, und dann gegebenenfalls nicht JavaScript, je nachdem ob das aktiviert wurde. Wenn Sie also vielleicht von anderen Systemen kommen, und nach genau einer solchen Seitenvorlage gesucht haben, dann ist die Antwort, genau das ist sie. Die gute Nachricht ist aber, an dieser Seitenvorlage müssen Sie in den meisten Fällen gar nichts ändern. Das Contao Standardseiten-Template ist nämlich so flexibel, dass es für die meisten Fälle völlig ausreichend ist, und nur bei ganz speziellen Anforderungen überhaupt angepasst werden muss. Natürlich kann man das Template anpassen, und dafür gehe ich nochmal zurück auf Dateiebene. Wie man hier nämlich unschwer erkennt, befinden wir uns im Contao-core. Prinzipiell könnten Sie hier in der fe_page Änderung vornehmen, das würde dann auch die entsprechenden Effekte herbeiführen, allerdings hält das Ganze nur bis zum nächsten Update. Mit dem werden alle core-Dateien überschrieben, und Ihre Änderungen sind dann weg. Damit Sie nun trotzdem die Möglichkeit haben, Templates anzupassen, verwendet Contao einen simplen, aber sehr wirkungsvollen Trick. Ich mache das hier mal wieder zu und gehe auf die oberste Ebene. Sie sehen hier den Ordner templates. In diesen Ordner templates können Sie Kopien, der original Contao-Templates reinlegen. Contao macht dann Folgendes, es guckt zunächst nach, jedes Mal wenn ein Template genutzt wird, gibt es hier in diesem Ordner ein entsprechendes Template? Wenn ja wird das genommen, ansonsten wird das Original genommen. Glücklicherweise müssen wir nicht auf Dateiebene nach dem passenden Template suchen, das dann überarbeiten und anschließend in den Ordner templates hochladen. Wir können das auch bequem über das Backend machen. Und dafür gibt es die Funktion Templates. Der Arbeitsbereich ist überschrieben mit "Dateisystem" und genau das ist auch der Fall. Wir blicken hier also in den Ordner templates, den wir gerade auf Dateiebene gesehen haben. Ich möchte jetzt ein Template anpassen. Klick auf Neues Template, jetzt habe ich hier eine Liste der Original-Templates. Nehmen wir an es soll eine Navigation sein sagen wir die Standardnavigation nav_default. Zielverzeichnis "templates", Template erstellen. Damit haben wir eine Kopie der Datei nav_default.html5 in unserem Ordner templates erstellt. Diese Kopie kann ich nun anpassen. Dazu nutze ich einen Befehl, der hier im Wiki genau erklärt ist. this-showTemplateVars zeigt mir, die Variablen an, die an dieses Template übergeben werden. Das speichere ich jetzt und ich schaue mir das Ergebnis im Frontend an. Wir laden die Seite neu, und Sie sehen, Variablen und deren Werte werden in einem strukturierten Array übergeben. was zur Anpassung des Templates natürlich auch sehr hilfreich ist. Nun gilt diese Anpassung natürlich für alle Navigationen, das möchte ich vielleicht nicht, und da gibt es auch einen Weg. Ich gehe nochmal auf Templates und benenne diese Navigation um. Sagen wir mal, ich nenne sie "spezial". Speichern und schließen. Jetzt wird natürlich diese Anpassung verschwinden, die kann ich aber wieder herbeiführen, indem ich speziell in dem Modul, wo ich diese Anpassung wünsche, ... also hier Navigation Main ... da kann ich unter Template-Einstellungen jetzt nav_default_spezial auswählen. Das Ganze funktioniert nur, Wenn der Dateiname vorne "nav_" nicht verändert wird. Unsere angepassten Templates liegen ja alle in einem Ordner templates und damit hier nicht Templates angeboten werden, die in dem Kontext gar keine Rolle spielen ist das Präfix "nav" hier in diesem Fall zwingend. Okay, Speichern und schließen und unsere Hauptnavigation benutzt jetzt ihr eigenes Template. Zwei Hinweise zu den Templates selbst. Hinweis Nummer 1 ... ich gehe hier nochmal in den Editier-Modus ... das Anzeigen von Template-Variablen, sollte man natürlich, wenn man das nicht mehr braucht, entfernen Und der Hinweis 2, Änderungen die Sie machen, sollten Sie auch immer soweit kommentieren, dass man nachvollziehen kann, was Sie am Template geändert haben. Das kann man am besten mit einem Kommentar machen, z. B. in dieser Form, und möglicherweise noch mit einer Erklärung, weshalb man da eine Änderung reinschreibt, was diese Änderung bewirken soll. Der Grund ist klar. Unsere Änderungen werden bei einem Update zwar nicht mehr überschrieben, aber dieses Template ist möglicherweise irgendwann veraltet. Also der Königsweg ist durch diese Kommentare klarzumachen wo habe ich überhaupt was im Template verändert, und wozu? Und dass man diese Änderungen dann in die aktuellen Templates auf die gleiche Weise natürlich dann überträgt. Die Anweisung showTemplateVars ist natürlich nur eine temporäre Geschichte, und deswegen sollte man die wenn man sie nicht mehr benötigt, auch wieder entfernen. Soviel zum Thema "Template-Mechanismus" in Contao Die Kernbotschaft lautet also, keine Originaltemplates überschreiben, sondern mit Templates arbeiten, die Kopien sind, und sich im Ordner templates befinden.

Contao 3 Grundkurs

Lernen Sie die Grundidee des Content Management Systems Contao 3 kennen und machen Sie sich mit den Möglichkeiten der Inhaltsdarstellung bis hin zum komplexen Webauftritt vertraut.

6 Std. 34 min (102 Videos)
Top!
TeddyBean
Sehr gutes Training!

In wenigen Stunden zur eigenen CMS Website ist mit diesem Training locker möglich. Sehr gut zusammenhängend erklärt. So sollten Trainings immer sein. Nach dem Training ein fertiges - vor allem funktionierendes - Beispiel zu haben wünscht man sich doch...
 

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!