‫Kursleiter: In dieser
‫Vorlesung lernen Sie die Grundlagen der Arbeit mit Pug-Vorlagen.
‫Öffnen wir also unsere Basisvorlage hier und legen wir los.
‫Im Wesentlichen ist Pug also eine einfache Leerzeichen-sensitive Syntax zum Schreiben
‫von HTML, also ist das wirklich der Kern dessen, was es ist.
‫Das bedeutet, dass wir zum Schreiben
‫von HTML-Elementen nur ihren Namen und ihre Einrückung in unserem
‫Code verwenden.
‫Beginnen wir also
‫damit, hier eine sehr einfache HTML-Struktur einzurichten, also
‫geben Sie uns etwas Platz.
‫Daher beginnt html normalerweise immer mit dem doctype
‫und einem html.
‫Um mit Pug richtig arbeiten zu können, sollten Sie
‫also natürlich über HTML-Kenntnisse verfügen; andernfalls
‫macht dies für Sie möglicherweise nicht so viel Sinn.
‫Aber wenn Sie HTML nicht kennen, machen
‫Sie sich keine Sorgen, Sie können einfach immer noch verfolgen, was ich hier tue,
‫und vielleicht einfach einen Artikel
‫über die ersten Schritte mit HTML lesen,
‫weil es wirklich, wirklich einfach ist.
‫Wie auch immer, wir beginnen
‫immer mit doctype und dann mit dem ersten Element,
‫also ist das übergreifende Element in all unseren HTML-Dokumenten immer das
‫HTML, dann befindet sich darin normalerweise ein Head-Element.
‫Um also in Pug
‫zu sagen, dass sich ein Element im anderen
‫befindet, verwenden wir nur ein Tag.
‫Wir verwenden also Einrückungen, wie ich eingangs erwähnt habe, und
‫das war's.
‫Das ist also unser Kopfelement, und in diesem Kopf
‫erstellen wir den Titel der Webseite.
‫Und so, noch ein Tag.
‫Also Titel,
‫und sagen wir Natours.
‫Okay, also wieder nur Einrückung, dann der
‫Name des HTML-Elements und dann
‫der Inhalt selbst.
‫Keine öffnenden Tags, keine schließenden Tags
‫und nichts von dem Durcheinander, das wir normalerweise in HTML haben.
‫Ich mag diese Syntax hier zum Schreiben von
‫HTML-Dokumenten wirklich sehr, daher finde
‫ich sie wirklich erstaunlich, wirklich einfach zu verwenden und
‫auch zu lesen.
‫Das ist jedenfalls der Inhalt, den wir im Kopf haben wollen, und
‫jetzt wollen wir auch noch einen Körper schaffen.
‫Nun ist dieser Körper natürlich nicht im Kopf,
‫sondern auf derselben Ebene wie der
‫Kopf, also im Grunde auch ein direktes Kind von HTML.
‫Wir müssen also nur eine Einrückungsebene zurückgehen und
‫dort das Element erstellen.
‫Dann wollen wir dort unser h1
‫und jetzt müssen wir etwas mehr Einrückung verwenden.
‫Also natürlich nicht hier, nicht hier, sondern hier,
‫also im Körper.
‫Fügen wir auch einen
‫Absatz hinzu, und dafür verwenden wir das p-Element, das
‫etwa so sagt, dies ist nur ein Text.
‫Probieren wir das jetzt in unserem Browser aus, also
‫neu laden und los gehts.
‫In Ordnung, und hier sehen Sie tatsächlich
‫die gesamte Struktur, die wir gerade mit dem doctype, dem html-Element
‫und dann natürlich Head und Body erstellt haben.
‫Und Sie sehen auch, dass dieser Titel hier tatsächlich erscheint.
‫Toll, als nächstes fügen wir tatsächlich auch eine CSS-Datei und
‫auch das Favicon ein, das hier
‫angezeigt werden soll, anstatt dieses generischen Seitendings dort.
‫Wenn Sie also etwas HTML
‫kennen, wissen Sie, dass solche Dinge hier in den Kopf gehören.
‫Wie würden Sie also eigentlich ein CSS-Stylesheet mit
‫normalem HTML einfügen?
‫Sie würden so etwas tun.
‫Sie würden also ein Link-Element erstellen, dann
‫definieren, dass es ein Stylesheet ist, und
‫dann auch die
‫Referenz, also einfach so.
‫Also CSS-Stil. css, und
‫das, was wir hier haben, das und das sind Attribute.
‫Und so schreiben wir mit Pug Attribute wie dieses.
‫Anstatt dieses Element zu
‫haben, schreiben wir einfach link, und dann schreiben wir
‫diese Attribute tatsächlich in Klammern, also so.
‫Also ohne Leerzeichen und offene Klammern,
‫und dort schreiben
‫wir diese Attribute einfach so.
‫Und wir sollten sie immer mit einfachen Anführungszeichen und nicht
‫mit doppelten Anführungszeichen
‫schreiben, und deshalb brauchen wir dieses hier nicht mehr.
‫Jetzt wollte ich Ihnen auch noch
‫etwas sagen, dass wir in Pug tatsächlich auch normales HTML verwenden können.
‫Wenn Sie also wollten, könnten Sie diese Codezeile
‫hier belassen und Pug würde sie dann gut verstehen.
‫Aber natürlich wollte ich Ihnen
‫hier zeigen, wie wir mit Pug Attribute definieren können.
‫Machen wir jetzt dasselbe für das Favicon, und so
‫brauchen wir wieder ein Link-Element, und dort
‫werden wir einige Attribute definieren.
‫Also haben wir definiert, dass dies ein Verknüpfungssymbol
‫ist, wir geben auch seinen Typ an, also Bild, und
‫in diesem Fall ist
‫es ein PNG, und dann wieder der
‫Verweis darauf, und es ist ein Bild-Favicon. png.
‫Lassen Sie uns das jetzt testen,
‫und Sie sehen, dass dies tatsächlich etwas anders aussieht.
‫Wir haben also unser Favicon,
‫und auch unser Text ist jetzt schön gestapelt.
‫Und tatsächlich sehen Sie jetzt hier auf der linken Seite
‫einige CSS-Eigenschaften.
‫Und das liegt natürlich daran, dass ich
‫tatsächlich eine Menge CSS
‫für diese Anwendung geschrieben habe, also ist alles öffentlich, CSS und Stil.
‫Sie sehen also, dass
‫ich tausend Zeilen oder mehr CSS habe, die ich nur
‫geschrieben habe, damit diese Anwendung so
‫schön aussieht, wie sie es tut.
‫Mit anderen Worten, warum funktioniert dieser Stil. css-Datei wird
‫tatsächlich automatisch aus dem CSS-Ordner geladen,
‫und das Favicon wird auch automatisch
‫aus dem Bildordner geladen.
‫Denken Sie zunächst daran, dass jedes dieser Assets
‫tatsächlich seine eigene http-Anfrage auslöst, also lassen
‫Sie uns dies hier in den Quellen oder tatsächlich
‫im Netzwerk-Panel bestätigen.
‫Hier sehen Sie also diese drei
‫Anfragen, eine für die Seite selbst, die andere für unseren Stil
‫und für unser Favicon.
‫Und noch einmal, warum
‫funktioniert es so, weil wir offensichtlich keinen
‫Route-Handler für diese Dateien hier haben.
‫Aber es ist immer noch eine Route, wenn Sie
‫darüber nachdenken, denn es ist eine Get-Anfrage an diese
‫URL und auch an diese URL.
‫Lassen Sie mich mich daran erinnern, warum dies
‫tatsächlich funktioniert, und zwar wegen dieser
‫Middleware, die wir hier oben definiert haben, also hier.
‫Denken Sie also daran, indem Sie Express verwenden. static definieren
‫wir grundsätzlich, dass alle statischen Assets
‫immer automatisch aus einem
‫Ordner namens public bereitgestellt werden, also mit diesem Ordner hier.
‫Aus diesem Grund kommt der CSS-Schrägstrich tatsächlich
‫aus dem öffentlichen Ordner.
‫Dieser CSS-Ordner ist also der Ordner innerhalb von public, und das gilt
‫natürlich auch für die Bilder.
‫Wenn wir also in unserem HTML-Code ein Bild-Schrägstrich-Favicon haben,
‫wird der Bildordner geöffnet, der
‫sich in unserem öffentlichen Ordner befindet.
‫Auch weil wir es in unserer Express-Bewerbung so definiert haben.
‫Sie haben also bereits gelernt, wie Sie Elemente in
‫Pug mithilfe von Einrückungen erstellen,
‫und Sie haben auch gelernt, wie Sie Attribute verwenden.
‫Aber eine andere wirklich
‫coole Sache ist, hier tatsächlich Variablen zu verwenden.
‫Lassen Sie mich Ihnen nun zeigen, wie wir tatsächlich
‫Daten an eine Vorlage übergeben und diese Daten dann direkt hier in
‫Pug verwenden können.
‫Denken Sie also daran, dass wir hier
‫diese Route haben, die wir zum Rendern unserer Basisvorlage verwenden.
‫Und wenn es
‫später ist, haben wir natürlich eine separate
‫Datei, in der dann alle diese Routen leben.
‫Aber im Moment möchte ich nur, dass es wirklich funktioniert.
‫Wie auch immer, um jetzt hier Daten in diese Vorlage
‫zu übergeben, müssen wir hier nur ein
‫Objekt definieren und dann einfach einige Daten dort eingeben.
‫Und diese Daten sind dann in der Mops-Vorlage verfügbar.
‫Lassen Sie uns hier einfach ein
‫Objekt mit einer Tour-Eigenschaft erstellen und es auf The Forest Tiger setzen, und
‫dann ...
‫Lassen Sie uns auch eine Benutzereigenschaft
‫erstellen und auf Jonas setzen.
‫Und diese Variablen, die wir hier übergeben
‫haben, werden in der Pug-Datei dann locals genannt.
‫Lassen Sie uns nun diese Daten verwenden.
‫Und was ich jetzt tun
‫möchte, ist, diese Tour-Variable auf unser h1 zu setzen.
‫Im Grunde möchte ich also ein h1-Element erstellen,
‫dessen Inhalt dieser Tourname ist.
‫Und der einfachste Weg,
‫dies zu tun, besteht darin, einfach die gleiche Syntax
‫wie folgt zu verwenden, also h1 gleich, dann ein Leerzeichen und dann Tour.
‫Und das ist es, das ist wirklich alles, was wir tun müssen.
‫Lassen Sie uns diese hier
‫herausnehmen, und eine andere Sache, die ich
‫Ihnen zeigen wollte, ist, dass wir in Pug Kommentare erstellen
‫können, und wir können zwei Arten von Kommentaren erstellen.
‫Das einfachste ist also einfach wie in JavaScript,
‫also einfach so.
‫Dadurch wird dann ein
‫Kommentar erstellt, der im HTML-Code sichtbar ist.
‫Schauen wir uns das
‫jetzt an
‫und denken wir daran, dass der h1 jetzt nicht mehr
‫The Park Camper sein wird, sondern The Forest Hiker,
‫denn das ist die Tourvariable,
‫oder anders ausgedrückt die Tour local, die
‫es ist nun in diese Vorlage übergegangen.
‫Und hier habe ich das
‫dann mit der gleichen Syntax in das h1 eingefügt.
‫Schauen wir uns das an, schauen wir
‫uns das an.
‫Und tatsächlich ist es jetzt The Forest Hiker.
‫Und auch hier ist der Kommentar, über
‫den wir gerade gesprochen haben.
‫Wie gesagt, dieser doppelte Schrägstrich, den wir
‫dort gemacht haben, erzeugt im Grunde genommen einen HTML-Kommentar.
‫Mit dieser Syntax schreiben wir also Kommentare in HTML, aber wenn
‫Sie wirklich möchten, dass dies ein Kommentar für die Pug-Datei ist, aber nicht
‫wirklich in HTML ausgegeben wird, müssen
‫Sie einen solchen Bindestrich hinzufügen.
‫Wenn wir das jetzt also neu laden, sollte dieser Kommentar weg sein.
‫Diese Art von Code hier, den wir hier geschrieben
‫haben, wird gepufferter Code genannt.
‫Und eigentlich könnten wir hier auch etwas
‫JavaScript schreiben, also sagen wir h2 gleich dem Benutzer,
‫und dann können wir auch toUppercase darauf aufrufen.
‫Also einfaches JavaScript hier, denn
‫auch hier in diesem gepufferten Code, der so
‫genannt wird, können
‫wir einfaches JavaScript ausführen, wie wir es hier getan haben.
‫Also los geht's, Jonas als Großbuchstabe.
‫Also gepufferter Code, und wenn wir gepufferten Code
‫haben, dann brauchen wir auch ungepufferten Code.
‫Im Grunde ist ungepufferter Code Code,
‫der der Ausgabe nichts hinzufügt.
‫Und wir schreiben das, indem wir einen Bindestrich schreiben
‫und dann hier einfach etwas JavaScript
‫machen, zum Beispiel nur eine Variable definieren.
‫Nehmen wir an, const x ist gleich neun, und dann
‫machen wir wieder gepufferten Code.
‫Also wieder Code, der der Ausgabe etwas hinzufügen wird.
‫Und so können wir hier wieder JavaScript verwenden,
‫also machen wir es einfach zweimal x.
‫Hier erhalten wir dann Zugriff auf diese x-Variable.
‫Das sollten also 18 sein und das ist es tatsächlich.
‫Das sind also all die kleinen Teile unterschiedlichen
‫Codes, die wir in Pug verwenden können.
‫Jetzt gibt es tatsächlich noch eine dritte Möglichkeit, Code zu schreiben, und
‫lass mich das hier zeigen.
‫Das nennt man Interpolation, und
‫tatsächlich sieht das
‫ein bisschen aus wie die ES6-Template-Strings.
‫Anstatt nur Natours hier zu haben,
‫fügen wir auch den Namen
‫der Tour hinzu, damit wir das so machen können.
‫Mit dem Template-String in ES6 funktioniert es also so, aber hier
‫in Pug ist es mit diesem Hash,
‫also einfach so.
‫Und hier müssen wir es
‫im Grunde so machen, weil dies Code ist, also variabel, aber das
‫ist kein Code, das ist einfach Text.
‫Und deshalb können wir dies nicht tun, weil alles, was hier
‫ist, dann als JavaScript behandelt wird,
‫und da dies kein JavaScript ist, würde es nicht funktionieren.
‫Dies hier ist also nur
‫eine Zeichenfolge, und wenn wir dieser Zeichenfolge etwas
‫hinzufügen möchten, müssen wir diese Interpolationssyntax verwenden.
‫Okay, sinnvoll?
‫Fügen wir einfach wie diesen Balken hier hinzu,
‫der auch einfach Teil des Strings ist.
‫Und so erwarten wir jetzt,
‫dass Natours The Forest
‫Hiker slashen, also haben sie genau das bekommen.
‫Großartig, also sind dies die Grundlagen
‫der Arbeit mit Pug.
‫Aber natürlich gibt es noch viel mehr zu
‫lernen und das machen
‫wir in den nächsten Vorlesungen weiter.