1 00:00:01,057 --> 00:00:02,830 ‫Kursleiter: In dieser 2 00:00:02,830 --> 00:00:06,513 ‫Vorlesung lernen Sie die Grundlagen der Arbeit mit Pug-Vorlagen. 3 00:00:07,950 --> 00:00:12,950 ‫Öffnen wir also unsere Basisvorlage hier und legen wir los. 4 00:00:13,030 --> 00:00:17,720 ‫Im Wesentlichen ist Pug also eine einfache Leerzeichen-sensitive Syntax zum Schreiben 5 00:00:17,720 --> 00:00:22,550 ‫von HTML, also ist das wirklich der Kern dessen, was es ist. 6 00:00:22,550 --> 00:00:24,900 ‫Das bedeutet, dass wir zum Schreiben 7 00:00:24,900 --> 00:00:29,290 ‫von HTML-Elementen nur ihren Namen und ihre Einrückung in unserem 8 00:00:29,290 --> 00:00:30,630 ‫Code verwenden. 9 00:00:30,630 --> 00:00:32,320 ‫Beginnen wir also 10 00:00:32,320 --> 00:00:35,093 ‫damit, hier eine sehr einfache HTML-Struktur einzurichten, also 11 00:00:36,420 --> 00:00:38,170 ‫geben Sie uns etwas Platz. 12 00:00:38,170 --> 00:00:41,680 ‫Daher beginnt html normalerweise immer mit dem doctype 13 00:00:44,350 --> 00:00:45,990 ‫und einem html. 14 00:00:45,990 --> 00:00:49,300 ‫Um mit Pug richtig arbeiten zu können, sollten Sie 15 00:00:49,300 --> 00:00:51,943 ‫also natürlich über HTML-Kenntnisse verfügen; andernfalls 16 00:00:53,100 --> 00:00:56,280 ‫macht dies für Sie möglicherweise nicht so viel Sinn. 17 00:00:56,280 --> 00:00:58,090 ‫Aber wenn Sie HTML nicht kennen, machen 18 00:00:58,090 --> 00:01:01,750 ‫Sie sich keine Sorgen, Sie können einfach immer noch verfolgen, was ich hier tue, 19 00:01:01,750 --> 00:01:03,300 ‫und vielleicht einfach einen Artikel 20 00:01:03,300 --> 00:01:05,250 ‫über die ersten Schritte mit HTML lesen, 21 00:01:05,250 --> 00:01:07,053 ‫weil es wirklich, wirklich einfach ist. 22 00:01:08,250 --> 00:01:11,010 ‫Wie auch immer, wir beginnen 23 00:01:11,010 --> 00:01:14,500 ‫immer mit doctype und dann mit dem ersten Element, 24 00:01:14,500 --> 00:01:18,720 ‫also ist das übergreifende Element in all unseren HTML-Dokumenten immer das 25 00:01:18,720 --> 00:01:21,960 ‫HTML, dann befindet sich darin normalerweise ein Head-Element. 26 00:01:21,960 --> 00:01:23,650 ‫Um also in Pug 27 00:01:23,650 --> 00:01:26,360 ‫zu sagen, dass sich ein Element im anderen 28 00:01:26,360 --> 00:01:28,700 ‫befindet, verwenden wir nur ein Tag. 29 00:01:28,700 --> 00:01:32,550 ‫Wir verwenden also Einrückungen, wie ich eingangs erwähnt habe, und 30 00:01:32,550 --> 00:01:33,720 ‫das war's. 31 00:01:33,720 --> 00:01:37,090 ‫Das ist also unser Kopfelement, und in diesem Kopf 32 00:01:37,090 --> 00:01:39,770 ‫erstellen wir den Titel der Webseite. 33 00:01:39,770 --> 00:01:41,573 ‫Und so, noch ein Tag. 34 00:01:42,790 --> 00:01:43,773 ‫Also Titel, 35 00:01:45,490 --> 00:01:47,210 ‫und sagen wir Natours. 36 00:01:47,210 --> 00:01:50,610 ‫Okay, also wieder nur Einrückung, dann der 37 00:01:50,610 --> 00:01:52,997 ‫Name des HTML-Elements und dann 38 00:01:52,997 --> 00:01:54,890 ‫der Inhalt selbst. 39 00:01:54,890 --> 00:01:57,450 ‫Keine öffnenden Tags, keine schließenden Tags 40 00:01:57,450 --> 00:02:01,130 ‫und nichts von dem Durcheinander, das wir normalerweise in HTML haben. 41 00:02:01,130 --> 00:02:04,040 ‫Ich mag diese Syntax hier zum Schreiben von 42 00:02:04,040 --> 00:02:05,660 ‫HTML-Dokumenten wirklich sehr, daher finde 43 00:02:05,660 --> 00:02:08,750 ‫ich sie wirklich erstaunlich, wirklich einfach zu verwenden und 44 00:02:08,750 --> 00:02:10,183 ‫auch zu lesen. 45 00:02:11,320 --> 00:02:14,290 ‫Das ist jedenfalls der Inhalt, den wir im Kopf haben wollen, und 46 00:02:14,290 --> 00:02:16,660 ‫jetzt wollen wir auch noch einen Körper schaffen. 47 00:02:16,660 --> 00:02:19,660 ‫Nun ist dieser Körper natürlich nicht im Kopf, 48 00:02:19,660 --> 00:02:22,340 ‫sondern auf derselben Ebene wie der 49 00:02:22,340 --> 00:02:25,870 ‫Kopf, also im Grunde auch ein direktes Kind von HTML. 50 00:02:25,870 --> 00:02:29,190 ‫Wir müssen also nur eine Einrückungsebene zurückgehen und 51 00:02:30,130 --> 00:02:31,830 ‫dort das Element erstellen. 52 00:02:32,900 --> 00:02:35,323 ‫Dann wollen wir dort unser h1 53 00:02:36,490 --> 00:02:39,070 ‫und jetzt müssen wir etwas mehr Einrückung verwenden. 54 00:02:39,070 --> 00:02:43,290 ‫Also natürlich nicht hier, nicht hier, sondern hier, 55 00:02:43,290 --> 00:02:44,913 ‫also im Körper. 56 00:02:47,404 --> 00:02:49,270 ‫Fügen wir auch einen 57 00:02:49,270 --> 00:02:52,410 ‫Absatz hinzu, und dafür verwenden wir das p-Element, das 58 00:02:52,410 --> 00:02:55,203 ‫etwa so sagt, dies ist nur ein Text. 59 00:02:56,228 --> 00:03:00,600 ‫Probieren wir das jetzt in unserem Browser aus, also 60 00:03:00,600 --> 00:03:03,223 ‫neu laden und los gehts. 61 00:03:04,900 --> 00:03:08,200 ‫In Ordnung, und hier sehen Sie tatsächlich 62 00:03:08,200 --> 00:03:12,400 ‫die gesamte Struktur, die wir gerade mit dem doctype, dem html-Element 63 00:03:12,400 --> 00:03:15,740 ‫und dann natürlich Head und Body erstellt haben. 64 00:03:15,740 --> 00:03:19,620 ‫Und Sie sehen auch, dass dieser Titel hier tatsächlich erscheint. 65 00:03:19,620 --> 00:03:24,140 ‫Toll, als nächstes fügen wir tatsächlich auch eine CSS-Datei und 66 00:03:24,140 --> 00:03:27,360 ‫auch das Favicon ein, das hier 67 00:03:27,360 --> 00:03:31,280 ‫angezeigt werden soll, anstatt dieses generischen Seitendings dort. 68 00:03:31,280 --> 00:03:33,230 ‫Wenn Sie also etwas HTML 69 00:03:33,230 --> 00:03:37,320 ‫kennen, wissen Sie, dass solche Dinge hier in den Kopf gehören. 70 00:03:37,320 --> 00:03:40,650 ‫Wie würden Sie also eigentlich ein CSS-Stylesheet mit 71 00:03:40,650 --> 00:03:42,233 ‫normalem HTML einfügen? 72 00:03:43,350 --> 00:03:45,310 ‫Sie würden so etwas tun. 73 00:03:45,310 --> 00:03:48,100 ‫Sie würden also ein Link-Element erstellen, dann 74 00:03:48,100 --> 00:03:50,763 ‫definieren, dass es ein Stylesheet ist, und 75 00:03:54,220 --> 00:03:55,853 ‫dann auch die 76 00:03:57,590 --> 00:03:59,453 ‫Referenz, also einfach so. 77 00:04:00,393 --> 00:04:03,483 ‫Also CSS-Stil. css, und 78 00:04:05,230 --> 00:04:10,230 ‫das, was wir hier haben, das und das sind Attribute. 79 00:04:11,900 --> 00:04:15,260 ‫Und so schreiben wir mit Pug Attribute wie dieses. 80 00:04:15,260 --> 00:04:17,610 ‫Anstatt dieses Element zu 81 00:04:17,610 --> 00:04:21,950 ‫haben, schreiben wir einfach link, und dann schreiben wir 82 00:04:21,950 --> 00:04:25,140 ‫diese Attribute tatsächlich in Klammern, also so. 83 00:04:25,140 --> 00:04:28,030 ‫Also ohne Leerzeichen und offene Klammern, 84 00:04:28,030 --> 00:04:29,890 ‫und dort schreiben 85 00:04:31,290 --> 00:04:33,343 ‫wir diese Attribute einfach so. 86 00:04:35,410 --> 00:04:38,270 ‫Und wir sollten sie immer mit einfachen Anführungszeichen und nicht 87 00:04:38,270 --> 00:04:39,553 ‫mit doppelten Anführungszeichen 88 00:04:41,600 --> 00:04:44,210 ‫schreiben, und deshalb brauchen wir dieses hier nicht mehr. 89 00:04:44,210 --> 00:04:47,140 ‫Jetzt wollte ich Ihnen auch noch 90 00:04:47,140 --> 00:04:51,970 ‫etwas sagen, dass wir in Pug tatsächlich auch normales HTML verwenden können. 91 00:04:51,970 --> 00:04:54,880 ‫Wenn Sie also wollten, könnten Sie diese Codezeile 92 00:04:54,880 --> 00:04:57,920 ‫hier belassen und Pug würde sie dann gut verstehen. 93 00:04:57,920 --> 00:04:59,760 ‫Aber natürlich wollte ich Ihnen 94 00:04:59,760 --> 00:05:02,223 ‫hier zeigen, wie wir mit Pug Attribute definieren können. 95 00:05:03,860 --> 00:05:07,080 ‫Machen wir jetzt dasselbe für das Favicon, und so 96 00:05:07,080 --> 00:05:09,960 ‫brauchen wir wieder ein Link-Element, und dort 97 00:05:09,960 --> 00:05:12,160 ‫werden wir einige Attribute definieren. 98 00:05:14,510 --> 00:05:17,323 ‫Also haben wir definiert, dass dies ein Verknüpfungssymbol 99 00:05:20,180 --> 00:05:23,723 ‫ist, wir geben auch seinen Typ an, also Bild, und 100 00:05:24,830 --> 00:05:26,713 ‫in diesem Fall ist 101 00:05:27,966 --> 00:05:30,530 ‫es ein PNG, und dann wieder der 102 00:05:30,530 --> 00:05:35,530 ‫Verweis darauf, und es ist ein Bild-Favicon. png. 103 00:05:37,300 --> 00:05:40,103 ‫Lassen Sie uns das jetzt testen, 104 00:05:40,980 --> 00:05:44,610 ‫und Sie sehen, dass dies tatsächlich etwas anders aussieht. 105 00:05:44,610 --> 00:05:46,460 ‫Wir haben also unser Favicon, 106 00:05:46,460 --> 00:05:48,943 ‫und auch unser Text ist jetzt schön gestapelt. 107 00:05:50,342 --> 00:05:54,120 ‫Und tatsächlich sehen Sie jetzt hier auf der linken Seite 108 00:05:54,120 --> 00:05:55,153 ‫einige CSS-Eigenschaften. 109 00:05:56,490 --> 00:05:59,470 ‫Und das liegt natürlich daran, dass ich 110 00:05:59,470 --> 00:06:01,443 ‫tatsächlich eine Menge CSS 111 00:06:02,980 --> 00:06:07,870 ‫für diese Anwendung geschrieben habe, also ist alles öffentlich, CSS und Stil. 112 00:06:07,870 --> 00:06:09,733 ‫Sie sehen also, dass 113 00:06:10,690 --> 00:06:14,600 ‫ich tausend Zeilen oder mehr CSS habe, die ich nur 114 00:06:14,600 --> 00:06:16,950 ‫geschrieben habe, damit diese Anwendung so 115 00:06:16,950 --> 00:06:19,053 ‫schön aussieht, wie sie es tut. 116 00:06:21,784 --> 00:06:25,420 ‫Mit anderen Worten, warum funktioniert dieser Stil. css-Datei wird 117 00:06:25,420 --> 00:06:28,820 ‫tatsächlich automatisch aus dem CSS-Ordner geladen, 118 00:06:28,820 --> 00:06:32,110 ‫und das Favicon wird auch automatisch 119 00:06:32,110 --> 00:06:34,170 ‫aus dem Bildordner geladen. 120 00:06:34,170 --> 00:06:38,040 ‫Denken Sie zunächst daran, dass jedes dieser Assets 121 00:06:38,040 --> 00:06:41,433 ‫tatsächlich seine eigene http-Anfrage auslöst, also lassen 122 00:06:42,330 --> 00:06:46,690 ‫Sie uns dies hier in den Quellen oder tatsächlich 123 00:06:46,690 --> 00:06:48,920 ‫im Netzwerk-Panel bestätigen. 124 00:06:48,920 --> 00:06:51,270 ‫Hier sehen Sie also diese drei 125 00:06:51,270 --> 00:06:54,970 ‫Anfragen, eine für die Seite selbst, die andere für unseren Stil 126 00:06:54,970 --> 00:06:56,593 ‫und für unser Favicon. 127 00:06:59,280 --> 00:07:02,410 ‫Und noch einmal, warum 128 00:07:02,410 --> 00:07:06,020 ‫funktioniert es so, weil wir offensichtlich keinen 129 00:07:06,020 --> 00:07:09,460 ‫Route-Handler für diese Dateien hier haben. 130 00:07:09,460 --> 00:07:12,250 ‫Aber es ist immer noch eine Route, wenn Sie 131 00:07:12,250 --> 00:07:15,140 ‫darüber nachdenken, denn es ist eine Get-Anfrage an diese 132 00:07:15,140 --> 00:07:17,210 ‫URL und auch an diese URL. 133 00:07:17,210 --> 00:07:20,930 ‫Lassen Sie mich mich daran erinnern, warum dies 134 00:07:20,930 --> 00:07:24,590 ‫tatsächlich funktioniert, und zwar wegen dieser 135 00:07:24,590 --> 00:07:29,290 ‫Middleware, die wir hier oben definiert haben, also hier. 136 00:07:29,290 --> 00:07:33,100 ‫Denken Sie also daran, indem Sie Express verwenden. static definieren 137 00:07:33,100 --> 00:07:36,190 ‫wir grundsätzlich, dass alle statischen Assets 138 00:07:36,190 --> 00:07:38,170 ‫immer automatisch aus einem 139 00:07:38,170 --> 00:07:43,170 ‫Ordner namens public bereitgestellt werden, also mit diesem Ordner hier. 140 00:07:43,690 --> 00:07:47,470 ‫Aus diesem Grund kommt der CSS-Schrägstrich tatsächlich 141 00:07:47,470 --> 00:07:50,050 ‫aus dem öffentlichen Ordner. 142 00:07:50,050 --> 00:07:54,473 ‫Dieser CSS-Ordner ist also der Ordner innerhalb von public, und das gilt 143 00:07:55,612 --> 00:07:57,810 ‫natürlich auch für die Bilder. 144 00:07:57,810 --> 00:08:01,550 ‫Wenn wir also in unserem HTML-Code ein Bild-Schrägstrich-Favicon haben, 145 00:08:01,550 --> 00:08:04,010 ‫wird der Bildordner geöffnet, der 146 00:08:04,010 --> 00:08:06,720 ‫sich in unserem öffentlichen Ordner befindet. 147 00:08:06,720 --> 00:08:10,673 ‫Auch weil wir es in unserer Express-Bewerbung so definiert haben. 148 00:08:12,360 --> 00:08:15,400 ‫Sie haben also bereits gelernt, wie Sie Elemente in 149 00:08:15,400 --> 00:08:17,570 ‫Pug mithilfe von Einrückungen erstellen, 150 00:08:17,570 --> 00:08:20,470 ‫und Sie haben auch gelernt, wie Sie Attribute verwenden. 151 00:08:20,470 --> 00:08:21,810 ‫Aber eine andere wirklich 152 00:08:21,810 --> 00:08:24,380 ‫coole Sache ist, hier tatsächlich Variablen zu verwenden. 153 00:08:24,380 --> 00:08:27,350 ‫Lassen Sie mich Ihnen nun zeigen, wie wir tatsächlich 154 00:08:27,350 --> 00:08:31,040 ‫Daten an eine Vorlage übergeben und diese Daten dann direkt hier in 155 00:08:31,040 --> 00:08:32,153 ‫Pug verwenden können. 156 00:08:35,300 --> 00:08:38,143 ‫Denken Sie also daran, dass wir hier 157 00:08:39,090 --> 00:08:42,580 ‫diese Route haben, die wir zum Rendern unserer Basisvorlage verwenden. 158 00:08:42,580 --> 00:08:43,860 ‫Und wenn es 159 00:08:43,860 --> 00:08:45,900 ‫später ist, haben wir natürlich eine separate 160 00:08:45,900 --> 00:08:48,173 ‫Datei, in der dann alle diese Routen leben. 161 00:08:49,050 --> 00:08:52,810 ‫Aber im Moment möchte ich nur, dass es wirklich funktioniert. 162 00:08:52,810 --> 00:08:57,030 ‫Wie auch immer, um jetzt hier Daten in diese Vorlage 163 00:08:57,030 --> 00:09:00,560 ‫zu übergeben, müssen wir hier nur ein 164 00:09:00,560 --> 00:09:04,140 ‫Objekt definieren und dann einfach einige Daten dort eingeben. 165 00:09:04,140 --> 00:09:07,263 ‫Und diese Daten sind dann in der Mops-Vorlage verfügbar. 166 00:09:08,390 --> 00:09:10,910 ‫Lassen Sie uns hier einfach ein 167 00:09:10,910 --> 00:09:15,853 ‫Objekt mit einer Tour-Eigenschaft erstellen und es auf The Forest Tiger setzen, und 168 00:09:18,795 --> 00:09:19,712 ‫dann ... 169 00:09:20,950 --> 00:09:23,660 ‫Lassen Sie uns auch eine Benutzereigenschaft 170 00:09:23,660 --> 00:09:25,993 ‫erstellen und auf Jonas setzen. 171 00:09:28,180 --> 00:09:30,710 ‫Und diese Variablen, die wir hier übergeben 172 00:09:30,710 --> 00:09:33,543 ‫haben, werden in der Pug-Datei dann locals genannt. 173 00:09:34,840 --> 00:09:39,380 ‫Lassen Sie uns nun diese Daten verwenden. 174 00:09:39,380 --> 00:09:41,630 ‫Und was ich jetzt tun 175 00:09:41,630 --> 00:09:45,140 ‫möchte, ist, diese Tour-Variable auf unser h1 zu setzen. 176 00:09:45,140 --> 00:09:48,600 ‫Im Grunde möchte ich also ein h1-Element erstellen, 177 00:09:48,600 --> 00:09:51,510 ‫dessen Inhalt dieser Tourname ist. 178 00:09:51,510 --> 00:09:53,260 ‫Und der einfachste Weg, 179 00:09:53,260 --> 00:09:56,510 ‫dies zu tun, besteht darin, einfach die gleiche Syntax 180 00:09:56,510 --> 00:10:01,340 ‫wie folgt zu verwenden, also h1 gleich, dann ein Leerzeichen und dann Tour. 181 00:10:01,340 --> 00:10:04,353 ‫Und das ist es, das ist wirklich alles, was wir tun müssen. 182 00:10:05,830 --> 00:10:07,660 ‫Lassen Sie uns diese hier 183 00:10:07,660 --> 00:10:09,803 ‫herausnehmen, und eine andere Sache, die ich 184 00:10:09,803 --> 00:10:12,830 ‫Ihnen zeigen wollte, ist, dass wir in Pug Kommentare erstellen 185 00:10:12,830 --> 00:10:15,450 ‫können, und wir können zwei Arten von Kommentaren erstellen. 186 00:10:15,450 --> 00:10:19,100 ‫Das einfachste ist also einfach wie in JavaScript, 187 00:10:19,100 --> 00:10:20,703 ‫also einfach so. 188 00:10:21,890 --> 00:10:23,600 ‫Dadurch wird dann ein 189 00:10:23,600 --> 00:10:26,120 ‫Kommentar erstellt, der im HTML-Code sichtbar ist. 190 00:10:26,120 --> 00:10:27,770 ‫Schauen wir uns das 191 00:10:29,290 --> 00:10:30,520 ‫jetzt an 192 00:10:30,520 --> 00:10:34,330 ‫und denken wir daran, dass der h1 jetzt nicht mehr 193 00:10:34,330 --> 00:10:37,480 ‫The Park Camper sein wird, sondern The Forest Hiker, 194 00:10:37,480 --> 00:10:39,520 ‫denn das ist die Tourvariable, 195 00:10:39,520 --> 00:10:42,090 ‫oder anders ausgedrückt die Tour local, die 196 00:10:42,090 --> 00:10:44,640 ‫es ist nun in diese Vorlage übergegangen. 197 00:10:44,640 --> 00:10:46,390 ‫Und hier habe ich das 198 00:10:46,390 --> 00:10:49,373 ‫dann mit der gleichen Syntax in das h1 eingefügt. 199 00:10:51,070 --> 00:10:53,160 ‫Schauen wir uns das an, schauen wir 200 00:10:53,160 --> 00:10:54,293 ‫uns das an. 201 00:10:55,360 --> 00:10:57,743 ‫Und tatsächlich ist es jetzt The Forest Hiker. 202 00:11:00,020 --> 00:11:02,920 ‫Und auch hier ist der Kommentar, über 203 00:11:02,920 --> 00:11:05,250 ‫den wir gerade gesprochen haben. 204 00:11:05,250 --> 00:11:07,940 ‫Wie gesagt, dieser doppelte Schrägstrich, den wir 205 00:11:07,940 --> 00:11:10,810 ‫dort gemacht haben, erzeugt im Grunde genommen einen HTML-Kommentar. 206 00:11:10,810 --> 00:11:14,820 ‫Mit dieser Syntax schreiben wir also Kommentare in HTML, aber wenn 207 00:11:14,820 --> 00:11:19,380 ‫Sie wirklich möchten, dass dies ein Kommentar für die Pug-Datei ist, aber nicht 208 00:11:19,380 --> 00:11:21,950 ‫wirklich in HTML ausgegeben wird, müssen 209 00:11:21,950 --> 00:11:24,093 ‫Sie einen solchen Bindestrich hinzufügen. 210 00:11:26,350 --> 00:11:29,513 ‫Wenn wir das jetzt also neu laden, sollte dieser Kommentar weg sein. 211 00:11:31,880 --> 00:11:34,550 ‫Diese Art von Code hier, den wir hier geschrieben 212 00:11:34,550 --> 00:11:36,163 ‫haben, wird gepufferter Code genannt. 213 00:11:37,080 --> 00:11:40,550 ‫Und eigentlich könnten wir hier auch etwas 214 00:11:40,550 --> 00:11:44,880 ‫JavaScript schreiben, also sagen wir h2 gleich dem Benutzer, 215 00:11:44,880 --> 00:11:48,700 ‫und dann können wir auch toUppercase darauf aufrufen. 216 00:11:53,080 --> 00:11:54,710 ‫Also einfaches JavaScript hier, denn 217 00:11:54,710 --> 00:11:57,600 ‫auch hier in diesem gepufferten Code, der so 218 00:11:57,600 --> 00:11:59,150 ‫genannt wird, können 219 00:11:59,150 --> 00:12:02,403 ‫wir einfaches JavaScript ausführen, wie wir es hier getan haben. 220 00:12:05,840 --> 00:12:10,263 ‫Also los geht's, Jonas als Großbuchstabe. 221 00:12:12,160 --> 00:12:16,030 ‫Also gepufferter Code, und wenn wir gepufferten Code 222 00:12:16,030 --> 00:12:19,660 ‫haben, dann brauchen wir auch ungepufferten Code. 223 00:12:19,660 --> 00:12:22,890 ‫Im Grunde ist ungepufferter Code Code, 224 00:12:22,890 --> 00:12:25,620 ‫der der Ausgabe nichts hinzufügt. 225 00:12:25,620 --> 00:12:28,510 ‫Und wir schreiben das, indem wir einen Bindestrich schreiben 226 00:12:28,510 --> 00:12:30,863 ‫und dann hier einfach etwas JavaScript 227 00:12:31,990 --> 00:12:34,610 ‫machen, zum Beispiel nur eine Variable definieren. 228 00:12:34,610 --> 00:12:38,330 ‫Nehmen wir an, const x ist gleich neun, und dann 229 00:12:38,330 --> 00:12:40,720 ‫machen wir wieder gepufferten Code. 230 00:12:40,720 --> 00:12:45,200 ‫Also wieder Code, der der Ausgabe etwas hinzufügen wird. 231 00:12:45,200 --> 00:12:47,870 ‫Und so können wir hier wieder JavaScript verwenden, 232 00:12:47,870 --> 00:12:50,290 ‫also machen wir es einfach zweimal x. 233 00:12:50,290 --> 00:12:54,613 ‫Hier erhalten wir dann Zugriff auf diese x-Variable. 234 00:12:56,710 --> 00:13:00,833 ‫Das sollten also 18 sein und das ist es tatsächlich. 235 00:13:01,990 --> 00:13:04,603 ‫Das sind also all die kleinen Teile unterschiedlichen 236 00:13:04,603 --> 00:13:06,950 ‫Codes, die wir in Pug verwenden können. 237 00:13:06,950 --> 00:13:11,130 ‫Jetzt gibt es tatsächlich noch eine dritte Möglichkeit, Code zu schreiben, und 238 00:13:11,130 --> 00:13:12,970 ‫lass mich das hier zeigen. 239 00:13:12,970 --> 00:13:15,240 ‫Das nennt man Interpolation, und 240 00:13:15,240 --> 00:13:16,690 ‫tatsächlich sieht das 241 00:13:16,690 --> 00:13:19,370 ‫ein bisschen aus wie die ES6-Template-Strings. 242 00:13:19,370 --> 00:13:21,430 ‫Anstatt nur Natours hier zu haben, 243 00:13:21,430 --> 00:13:23,233 ‫fügen wir auch den Namen 244 00:13:24,100 --> 00:13:26,883 ‫der Tour hinzu, damit wir das so machen können. 245 00:13:29,380 --> 00:13:33,620 ‫Mit dem Template-String in ES6 funktioniert es also so, aber hier 246 00:13:33,620 --> 00:13:36,553 ‫in Pug ist es mit diesem Hash, 247 00:13:37,660 --> 00:13:39,350 ‫also einfach so. 248 00:13:39,350 --> 00:13:41,230 ‫Und hier müssen wir es 249 00:13:41,230 --> 00:13:45,090 ‫im Grunde so machen, weil dies Code ist, also variabel, aber das 250 00:13:45,090 --> 00:13:47,700 ‫ist kein Code, das ist einfach Text. 251 00:13:47,700 --> 00:13:51,500 ‫Und deshalb können wir dies nicht tun, weil alles, was hier 252 00:13:51,500 --> 00:13:53,630 ‫ist, dann als JavaScript behandelt wird, 253 00:13:53,630 --> 00:13:57,150 ‫und da dies kein JavaScript ist, würde es nicht funktionieren. 254 00:13:57,150 --> 00:13:59,810 ‫Dies hier ist also nur 255 00:13:59,810 --> 00:14:02,730 ‫eine Zeichenfolge, und wenn wir dieser Zeichenfolge etwas 256 00:14:02,730 --> 00:14:05,430 ‫hinzufügen möchten, müssen wir diese Interpolationssyntax verwenden. 257 00:14:05,430 --> 00:14:07,053 ‫Okay, sinnvoll? 258 00:14:08,620 --> 00:14:11,320 ‫Fügen wir einfach wie diesen Balken hier hinzu, 259 00:14:11,320 --> 00:14:13,940 ‫der auch einfach Teil des Strings ist. 260 00:14:13,940 --> 00:14:15,717 ‫Und so erwarten wir jetzt, 261 00:14:17,010 --> 00:14:18,573 ‫dass Natours The Forest 262 00:14:19,440 --> 00:14:21,810 ‫Hiker slashen, also haben sie genau das bekommen. 263 00:14:21,810 --> 00:14:24,700 ‫Großartig, also sind dies die Grundlagen 264 00:14:24,700 --> 00:14:26,760 ‫der Arbeit mit Pug. 265 00:14:26,760 --> 00:14:28,970 ‫Aber natürlich gibt es noch viel mehr zu 266 00:14:28,970 --> 00:14:30,330 ‫lernen und das machen 267 00:14:30,330 --> 00:14:31,980 ‫wir in den nächsten Vorlesungen weiter.