‫-: Gut.
‫In diesem Video zeige ich Ihnen, wie
‫Sie eine der
‫wichtigsten und auch komplexesten Funktionen von Pug nutzen.
‫Und das sind verlängert.
‫Mit Extends können
‫wir für jede einzelne Seite,
‫die wir rendern möchten, dasselbe Basislayout verwenden.
‫Im Moment haben wir unsere Basisvorlage mit einer schönen
‫Kopfzeile und einer schönen Fußzeile abgeschlossen.
‫Lassen Sie uns nun mit dem Ausfüllen des Inhalts beginnen.
‫Nun wollen wir
‫natürlich unterschiedliche Inhalte für verschiedene Seiten laden.
‫Und zu Beginn möchten wir eine Übersichtsseite mit allen
‫Touren haben und dann eine
‫Seite mit allen Tourdetails für eine bestimmte Tour.
‫Lassen Sie uns nun einige Routen für
‫diese beiden Seiten implementieren.
‫Und das mache ich gleich hier unter dem
‫ersten, das wir bereits erstellt haben.
‫Also, /overview Und
‫dann noch etwas sehr Ähnliches wie vorher.
‫Und wieder, etwas später, tatsächlich im nächsten Video, werden
‫wir diese Routen dann
‫in eine eigene separate Datei legen.
‫Also rendern, und jetzt wollen wir auf
‫dieser Übersichtsseite tatsächlich
‫eine Vorlage namens Übersicht rendern.
‫Das gibt es noch
‫nicht, also lasst uns jetzt schnell vorgehen und eines erstellen.
‫Also Übersicht. mops Und
‫tatsächlich lassen Sie uns auch einige Daten eingeben.
‫Und wir übergeben den Titel der
‫Seite, in diesem Fall alle
‫Touren.
‫Jetzt nehmen wir einfach diesen
‫Code und kopieren ihn für die Tour.
‫Wir wollen also auch wieder eine Route für eine bestimmte Tour.
‫Und hier wollen
‫wir eine Vorlage haben, die auch Tour genannt wird.
‫Und dann der Titel davon, vorerst, machen
‫wir es noch
‫einmal, The Forest Hiker Tour.
‫Das ist also vorerst nur ein Platzhalter,
‫und etwas später werden
‫wir das dann natürlich tatsächlich dynamisieren.
‫Denn zu diesem Zeitpunkt
‫lernen wir immer noch, wie Pug wirklich funktioniert.
‫Lassen Sie uns nun auch diese Tourvorlage erstellen.
‫Und das ist es.
‫Okay, jetzt, da diese beiden neuen Vorlagen hier fertig sind,
‫werden wir dies tun.
‫In jede dieser Vorlagen, und in diesem
‫Fall hier die Übersicht, möchten
‫wir nur den Inhalt für diese spezielle Seite einfügen.
‫Wir wollen hier also keine Fußzeile und keine
‫Kopfzeile und nichts von dem, was wir in der Basis haben.
‫Also wieder wirklich nur
‫der Inhalt für die Übersichtsseite.
‫Genau das werden wir also in diese Datei
‫einfügen, und dann werden wir diesen Inhalt im Grunde
‫in die Basisvorlage einfügen, die wir
‫als Elternvorlage bezeichnen können.
‫Dieser Vorgang wird dann als Erweitern bezeichnet.
‫Wenn also die Übersichtsvorlage gerendert wird, nehmen
‫wir die Basisvorlage und
‫füllen sie mit dem Inhalt dieser Datei
‫und erweitern sie.
‫So setzen wir das um.
‫Zuerst müssen wir in der Basis einen Block platzieren.
‫Das werde ich hier tatsächlich tun.
‫Also lass uns das alles
‫löschen und hier einen Block setzen.
‫Und diesen Block nenne ich Inhalt.
‫Dann können wir innerhalb dieses Blocks tatsächlich
‫auch Inhalte haben.
‫Also setzen wir hier einfach ein h1.
‫Dieser Inhalt wird dann aber später überschrieben.
‫Aber egal, lassen Sie es
‫uns hier im Grunde nur als Platzhalter verwenden.
‫Dies ist also eine Platzhalterüberschrift.
‫Okay, wir haben unseren Block hier und können
‫jetzt auf unsere Übersichtsseite gehen
‫und sagen, dass wir unser Basistemplate erweitern möchten.
‫Also Basis erweitern.
‫Oder eigentlich heißt das verlängert.
‫Diese Datei erweitert also die Basisdatei.
‫Und natürlich, wenn dieser hier zum
‫Beispiel Index heißen würde. Mops, dann
‫würden wir hier sagen, erweitert den Index.
‫Was genau ist nun der
‫Inhalt, der in der Basisvorlage erweitert wird?
‫Nun, das ist alles, was wir in den Inhaltsblock packen.
‫Auch hier erstellen wir also einen Block namens content.
‫Und dann können wir wie immer unseren Inhalt einfügen.
‫Sagen wir einfach: Dies ist die Tourübersicht.
‫Hier definieren wir im Grunde den Inhaltsblock, der sich
‫in der Basis befindet, neu.
‫Wir haben hier also
‫wieder diesen Block, der Inhalt genannt wird, und
‫jetzt, indem wir den gleichen Inhaltsblock hier auf dieser
‫Seite platzieren, die dann die
‫Basis erweitert, definieren wir diesen Block im Grunde neu.
‫Jede Datei kann nur eine andere Datei erweitern.
‫Wir können hier also nur
‫die Basis erweitern, aber wir können in jeder der Dateien unterschiedliche Blöcke haben.
‫Wir könnten also auch hier einen Block für den Kopf haben.
‫Und dann könnten wir das
‫auch in der Übersichtsvorlage erweitern.
‫Und eigentlich werden wir das etwas später tun.
‫Aber vorerst halten wir es natürlich einfach.
‫Okay, macht das Sinn?
‫Lassen Sie uns nun fortfahren und hier tatsächlich dasselbe tun.
‫Dies erweitert also das Basislayout.
‫Und was genau verlängert es?
‫Nun, es wird den Inhaltsblock erweitern.
‫Und so werden wir diese
‫hier auf die h1 setzen. Dies ist die Tour-Detailseite.
‫Bevor wir dies testen, lassen Sie uns kurz zusammenfassen, was
‫wir gerade getan haben.
‫Daher möchten wir diese Basisvorlage hier
‫als Ausgangspunkt verwenden.
‫Also als Gerüst, das all das HTML-Zeug enthält,
‫wie diesen
‫Kopf und auch die Kopf- und Fußzeile, aber
‫nicht den spezifischen Inhalt für jede Seite.
‫Dann haben wir auf jeder
‫dieser Seiten hier nur den Inhalt für diese Seite selbst.
‫Und das können wir
‫tun, weil wir diesen Inhalt im Grunde
‫hier in die übergeordnete Basisvorlage einfügen können, indem wir Extend verwenden.
‫Betrachten Sie dies im Grunde als das Gegenteil von einschließlich.
‫Hier enthält diese Vorlage zwei übergeordnete Vorlagen.
‫Diese Vorlage enthält hier zwei untergeordnete Vorlagen, die
‫Kopf- und die Fußzeile.
‫Die Basis ist also wieder das
‫übergeordnete Element, und die Kopf- und Fußzeile sind die untergeordneten Elemente.
‫Hier schlossen die Eltern also die Kinder ein.
‫Aber bei Extends ist es umgekehrt, wo die
‫Kinder, wie wir sagen können, so können wir
‫sagen, dass die
‫Übersicht auch ein Kind der Basis
‫ist, aber hier ist das Kind, das die Basis einschließt.
‫Also im Grunde alles, was um diesen Blockinhalt herum ist.
‫Sie können sich vorstellen, dass all
‫dieser Code hier, der nicht der Blockinhalt
‫ist, dann direkt in diese Datei kopiert wird.
‫Das ist eine schöne Art, sich vorzustellen, wie das funktioniert.
‫Dadurch können wir dann hier in unserer Route die
‫Übersicht und die Tourenvorlagen verwenden, anstatt die Basis zu verwenden.
‫Aber natürlich immer noch mit all dem HTML,
‫das wir hier haben.
‫Okay, ich hoffe, das macht jetzt Sinn.
‫Lassen Sie uns das tatsächlich ausprobieren.
‫Ich kopiere einfach die URL.
‫Lassen Sie uns nun eine Übersicht schreiben.
‫Und so erhalten wir tatsächlich das h1, das besagt,
‫dass dies die Tourübersicht ist.
‫Und tatsächlich verwenden wir auch die Titelvariable, die wir
‫an diese Vorlagen übergeben haben.
‫Denken Sie daran, dass wir hier den
‫Titel Alle Touren in der Übersicht haben und dann auf
‫der Tour The Forest Hiker.
‫Lassen Sie uns das also auf den Titel setzen.
‫Tatsächlich können wir dies direkt hier
‫in der Basisvorlage tun.
‫Wenn wir also hier
‫in der Übersicht das Basistemplate erweitern, hat
‫das Basistemplate immer noch Zugriff auf die Locals, also auf die
‫Variablen, die wir an das Template übergeben haben.
‫Hier können wir das machen, was wir vorher gemacht
‫haben, also Interpolation mit der Variablen, also mit dem Local.
‫Also, alles was wir tun müssen, ist den Titel hier einzugeben.
‫Und wenn wir jetzt neu
‫laden, dann sehen Sie hier oben Alle Touren.
‫Jetzt versuchen wir es mit der Tour.
‫Dies ist die Detailseite der Tour, und hier oben
‫sehen Sie The Forest Hiker Tour.
‫Wenn wir nun diesen laden, sollten wir
‫diesen Platzhalter erhalten, den wir in
‫den Block eingefügt haben.
‫Erinnere dich daran?
‫Und tatsächlich ist dies die Platzhalterüberschrift.
‫Toll.
‫Dies ist ein mächtiger und sehr wichtiger Mechanismus, den
‫wir verstehen und für alle Vorlagen verwenden können,
‫die wir im Rest des
‫Abschnitts erstellen werden.
‫Im nächsten Video werden wir dann
‫endlich ein wenig dieses Durcheinander, das wir hier haben, aufräumen
‫und all diesen Code
‫hier in verschiedene Dateien umwandeln.