1 00:00:00,990 --> 00:00:01,900 ‫-: Gut. 2 00:00:01,900 --> 00:00:04,500 ‫In diesem Video zeige ich Ihnen, wie 3 00:00:04,500 --> 00:00:06,180 ‫Sie eine der 4 00:00:06,180 --> 00:00:09,440 ‫wichtigsten und auch komplexesten Funktionen von Pug nutzen. 5 00:00:09,440 --> 00:00:11,940 ‫Und das sind verlängert. 6 00:00:11,940 --> 00:00:14,280 ‫Mit Extends können 7 00:00:14,280 --> 00:00:17,000 ‫wir für jede einzelne Seite, 8 00:00:17,000 --> 00:00:20,770 ‫die wir rendern möchten, dasselbe Basislayout verwenden. 9 00:00:20,770 --> 00:00:24,280 ‫Im Moment haben wir unsere Basisvorlage mit einer schönen 10 00:00:24,280 --> 00:00:27,210 ‫Kopfzeile und einer schönen Fußzeile abgeschlossen. 11 00:00:27,210 --> 00:00:30,760 ‫Lassen Sie uns nun mit dem Ausfüllen des Inhalts beginnen. 12 00:00:30,760 --> 00:00:32,670 ‫Nun wollen wir 13 00:00:32,670 --> 00:00:35,560 ‫natürlich unterschiedliche Inhalte für verschiedene Seiten laden. 14 00:00:35,560 --> 00:00:38,550 ‫Und zu Beginn möchten wir eine Übersichtsseite mit allen 15 00:00:38,550 --> 00:00:40,860 ‫Touren haben und dann eine 16 00:00:40,860 --> 00:00:43,763 ‫Seite mit allen Tourdetails für eine bestimmte Tour. 17 00:00:44,860 --> 00:00:47,080 ‫Lassen Sie uns nun einige Routen für 18 00:00:47,080 --> 00:00:48,713 ‫diese beiden Seiten implementieren. 19 00:00:51,410 --> 00:00:53,640 ‫Und das mache ich gleich hier unter dem 20 00:00:53,640 --> 00:00:55,840 ‫ersten, das wir bereits erstellt haben. 21 00:00:59,056 --> 00:01:00,510 ‫Also, /overview Und 22 00:01:09,440 --> 00:01:12,750 ‫dann noch etwas sehr Ähnliches wie vorher. 23 00:01:12,750 --> 00:01:15,430 ‫Und wieder, etwas später, tatsächlich im nächsten Video, werden 24 00:01:15,430 --> 00:01:16,910 ‫wir diese Routen dann 25 00:01:16,910 --> 00:01:18,863 ‫in eine eigene separate Datei legen. 26 00:01:21,530 --> 00:01:24,560 ‫Also rendern, und jetzt wollen wir auf 27 00:01:24,560 --> 00:01:26,030 ‫dieser Übersichtsseite tatsächlich 28 00:01:26,030 --> 00:01:28,223 ‫eine Vorlage namens Übersicht rendern. 29 00:01:32,440 --> 00:01:34,000 ‫Das gibt es noch 30 00:01:34,000 --> 00:01:36,903 ‫nicht, also lasst uns jetzt schnell vorgehen und eines erstellen. 31 00:01:40,400 --> 00:01:43,010 ‫Also Übersicht. mops Und 32 00:01:48,570 --> 00:01:51,640 ‫tatsächlich lassen Sie uns auch einige Daten eingeben. 33 00:01:51,640 --> 00:01:54,080 ‫Und wir übergeben den Titel der 34 00:01:54,080 --> 00:01:56,113 ‫Seite, in diesem Fall alle 35 00:01:58,220 --> 00:01:59,063 ‫Touren. 36 00:02:00,780 --> 00:02:03,130 ‫Jetzt nehmen wir einfach diesen 37 00:02:03,130 --> 00:02:05,503 ‫Code und kopieren ihn für die Tour. 38 00:02:06,680 --> 00:02:11,270 ‫Wir wollen also auch wieder eine Route für eine bestimmte Tour. 39 00:02:11,270 --> 00:02:12,770 ‫Und hier wollen 40 00:02:12,770 --> 00:02:16,160 ‫wir eine Vorlage haben, die auch Tour genannt wird. 41 00:02:16,160 --> 00:02:18,260 ‫Und dann der Titel davon, vorerst, machen 42 00:02:18,260 --> 00:02:19,300 ‫wir es noch 43 00:02:19,300 --> 00:02:20,950 ‫einmal, The Forest Hiker Tour. 44 00:02:25,830 --> 00:02:27,990 ‫Das ist also vorerst nur ein Platzhalter, 45 00:02:27,990 --> 00:02:29,470 ‫und etwas später werden 46 00:02:29,470 --> 00:02:31,360 ‫wir das dann natürlich tatsächlich dynamisieren. 47 00:02:31,360 --> 00:02:33,120 ‫Denn zu diesem Zeitpunkt 48 00:02:33,120 --> 00:02:35,723 ‫lernen wir immer noch, wie Pug wirklich funktioniert. 49 00:02:38,830 --> 00:02:42,323 ‫Lassen Sie uns nun auch diese Tourvorlage erstellen. 50 00:02:44,070 --> 00:02:45,810 ‫Und das ist es. 51 00:02:45,810 --> 00:02:49,363 ‫Okay, jetzt, da diese beiden neuen Vorlagen hier fertig sind, 52 00:02:50,810 --> 00:02:52,680 ‫werden wir dies tun. 53 00:02:52,680 --> 00:02:54,960 ‫In jede dieser Vorlagen, und in diesem 54 00:02:54,960 --> 00:02:56,820 ‫Fall hier die Übersicht, möchten 55 00:02:56,820 --> 00:02:59,500 ‫wir nur den Inhalt für diese spezielle Seite einfügen. 56 00:02:59,500 --> 00:03:01,720 ‫Wir wollen hier also keine Fußzeile und keine 57 00:03:01,720 --> 00:03:04,260 ‫Kopfzeile und nichts von dem, was wir in der Basis haben. 58 00:03:04,260 --> 00:03:06,040 ‫Also wieder wirklich nur 59 00:03:06,040 --> 00:03:07,900 ‫der Inhalt für die Übersichtsseite. 60 00:03:07,900 --> 00:03:10,890 ‫Genau das werden wir also in diese Datei 61 00:03:10,890 --> 00:03:14,000 ‫einfügen, und dann werden wir diesen Inhalt im Grunde 62 00:03:14,000 --> 00:03:16,300 ‫in die Basisvorlage einfügen, die wir 63 00:03:16,300 --> 00:03:18,316 ‫als Elternvorlage bezeichnen können. 64 00:03:18,316 --> 00:03:21,620 ‫Dieser Vorgang wird dann als Erweitern bezeichnet. 65 00:03:21,620 --> 00:03:24,750 ‫Wenn also die Übersichtsvorlage gerendert wird, nehmen 66 00:03:24,750 --> 00:03:26,550 ‫wir die Basisvorlage und 67 00:03:26,550 --> 00:03:29,560 ‫füllen sie mit dem Inhalt dieser Datei 68 00:03:29,560 --> 00:03:31,353 ‫und erweitern sie. 69 00:03:32,930 --> 00:03:35,080 ‫So setzen wir das um. 70 00:03:35,080 --> 00:03:38,203 ‫Zuerst müssen wir in der Basis einen Block platzieren. 71 00:03:40,110 --> 00:03:41,560 ‫Das werde ich hier tatsächlich tun. 72 00:03:42,890 --> 00:03:45,180 ‫Also lass uns das alles 73 00:03:45,180 --> 00:03:47,900 ‫löschen und hier einen Block setzen. 74 00:03:47,900 --> 00:03:52,320 ‫Und diesen Block nenne ich Inhalt. 75 00:03:52,320 --> 00:03:54,260 ‫Dann können wir innerhalb dieses Blocks tatsächlich 76 00:03:54,260 --> 00:03:55,303 ‫auch Inhalte haben. 77 00:03:56,490 --> 00:03:58,520 ‫Also setzen wir hier einfach ein h1. 78 00:03:58,520 --> 00:04:01,740 ‫Dieser Inhalt wird dann aber später überschrieben. 79 00:04:01,740 --> 00:04:03,600 ‫Aber egal, lassen Sie es 80 00:04:03,600 --> 00:04:06,230 ‫uns hier im Grunde nur als Platzhalter verwenden. 81 00:04:06,230 --> 00:04:09,630 ‫Dies ist also eine Platzhalterüberschrift. 82 00:04:12,150 --> 00:04:15,600 ‫Okay, wir haben unseren Block hier und können 83 00:04:15,600 --> 00:04:18,280 ‫jetzt auf unsere Übersichtsseite gehen 84 00:04:18,280 --> 00:04:21,473 ‫und sagen, dass wir unser Basistemplate erweitern möchten. 85 00:04:22,360 --> 00:04:25,053 ‫Also Basis erweitern. 86 00:04:26,400 --> 00:04:28,420 ‫Oder eigentlich heißt das verlängert. 87 00:04:28,420 --> 00:04:30,823 ‫Diese Datei erweitert also die Basisdatei. 88 00:04:31,970 --> 00:04:33,528 ‫Und natürlich, wenn dieser hier zum 89 00:04:33,528 --> 00:04:36,157 ‫Beispiel Index heißen würde. Mops, dann 90 00:04:36,157 --> 00:04:38,853 ‫würden wir hier sagen, erweitert den Index. 91 00:04:40,660 --> 00:04:42,510 ‫Was genau ist nun der 92 00:04:42,510 --> 00:04:45,083 ‫Inhalt, der in der Basisvorlage erweitert wird? 93 00:04:46,000 --> 00:04:49,203 ‫Nun, das ist alles, was wir in den Inhaltsblock packen. 94 00:04:52,030 --> 00:04:55,573 ‫Auch hier erstellen wir also einen Block namens content. 95 00:04:57,410 --> 00:05:01,063 ‫Und dann können wir wie immer unseren Inhalt einfügen. 96 00:05:02,650 --> 00:05:06,243 ‫Sagen wir einfach: Dies ist die Tourübersicht. 97 00:05:09,180 --> 00:05:12,075 ‫Hier definieren wir im Grunde den Inhaltsblock, der sich 98 00:05:12,075 --> 00:05:14,073 ‫in der Basis befindet, neu. 99 00:05:15,270 --> 00:05:16,900 ‫Wir haben hier also 100 00:05:16,900 --> 00:05:19,450 ‫wieder diesen Block, der Inhalt genannt wird, und 101 00:05:19,450 --> 00:05:22,400 ‫jetzt, indem wir den gleichen Inhaltsblock hier auf dieser 102 00:05:22,400 --> 00:05:24,370 ‫Seite platzieren, die dann die 103 00:05:24,370 --> 00:05:27,293 ‫Basis erweitert, definieren wir diesen Block im Grunde neu. 104 00:05:28,171 --> 00:05:31,820 ‫Jede Datei kann nur eine andere Datei erweitern. 105 00:05:31,820 --> 00:05:33,860 ‫Wir können hier also nur 106 00:05:33,860 --> 00:05:38,390 ‫die Basis erweitern, aber wir können in jeder der Dateien unterschiedliche Blöcke haben. 107 00:05:38,390 --> 00:05:41,730 ‫Wir könnten also auch hier einen Block für den Kopf haben. 108 00:05:41,730 --> 00:05:43,760 ‫Und dann könnten wir das 109 00:05:43,760 --> 00:05:45,790 ‫auch in der Übersichtsvorlage erweitern. 110 00:05:45,790 --> 00:05:48,330 ‫Und eigentlich werden wir das etwas später tun. 111 00:05:48,330 --> 00:05:51,260 ‫Aber vorerst halten wir es natürlich einfach. 112 00:05:51,260 --> 00:05:52,923 ‫Okay, macht das Sinn? 113 00:05:54,270 --> 00:05:57,020 ‫Lassen Sie uns nun fortfahren und hier tatsächlich dasselbe tun. 114 00:05:57,930 --> 00:06:02,190 ‫Dies erweitert also das Basislayout. 115 00:06:02,190 --> 00:06:04,083 ‫Und was genau verlängert es? 116 00:06:05,200 --> 00:06:08,900 ‫Nun, es wird den Inhaltsblock erweitern. 117 00:06:08,900 --> 00:06:11,660 ‫Und so werden wir diese 118 00:06:11,660 --> 00:06:16,180 ‫hier auf die h1 setzen. Dies ist die Tour-Detailseite. 119 00:06:19,230 --> 00:06:21,830 ‫Bevor wir dies testen, lassen Sie uns kurz zusammenfassen, was 120 00:06:21,830 --> 00:06:23,020 ‫wir gerade getan haben. 121 00:06:23,020 --> 00:06:26,100 ‫Daher möchten wir diese Basisvorlage hier 122 00:06:26,100 --> 00:06:28,330 ‫als Ausgangspunkt verwenden. 123 00:06:28,330 --> 00:06:31,600 ‫Also als Gerüst, das all das HTML-Zeug enthält, 124 00:06:31,600 --> 00:06:32,815 ‫wie diesen 125 00:06:32,815 --> 00:06:36,360 ‫Kopf und auch die Kopf- und Fußzeile, aber 126 00:06:36,360 --> 00:06:39,610 ‫nicht den spezifischen Inhalt für jede Seite. 127 00:06:39,610 --> 00:06:41,720 ‫Dann haben wir auf jeder 128 00:06:41,720 --> 00:06:44,933 ‫dieser Seiten hier nur den Inhalt für diese Seite selbst. 129 00:06:46,020 --> 00:06:47,650 ‫Und das können wir 130 00:06:47,650 --> 00:06:49,913 ‫tun, weil wir diesen Inhalt im Grunde 131 00:06:49,913 --> 00:06:53,650 ‫hier in die übergeordnete Basisvorlage einfügen können, indem wir Extend verwenden. 132 00:06:53,650 --> 00:06:57,353 ‫Betrachten Sie dies im Grunde als das Gegenteil von einschließlich. 133 00:06:58,881 --> 00:07:03,298 ‫Hier enthält diese Vorlage zwei übergeordnete Vorlagen. 134 00:07:03,298 --> 00:07:07,424 ‫Diese Vorlage enthält hier zwei untergeordnete Vorlagen, die 135 00:07:07,424 --> 00:07:10,293 ‫Kopf- und die Fußzeile. 136 00:07:12,284 --> 00:07:14,200 ‫Die Basis ist also wieder das 137 00:07:14,200 --> 00:07:17,140 ‫übergeordnete Element, und die Kopf- und Fußzeile sind die untergeordneten Elemente. 138 00:07:17,140 --> 00:07:19,890 ‫Hier schlossen die Eltern also die Kinder ein. 139 00:07:19,890 --> 00:07:22,740 ‫Aber bei Extends ist es umgekehrt, wo die 140 00:07:22,740 --> 00:07:25,660 ‫Kinder, wie wir sagen können, so können wir 141 00:07:25,660 --> 00:07:27,300 ‫sagen, dass die 142 00:07:27,300 --> 00:07:29,570 ‫Übersicht auch ein Kind der Basis 143 00:07:29,570 --> 00:07:33,160 ‫ist, aber hier ist das Kind, das die Basis einschließt. 144 00:07:33,160 --> 00:07:36,883 ‫Also im Grunde alles, was um diesen Blockinhalt herum ist. 145 00:07:38,260 --> 00:07:40,960 ‫Sie können sich vorstellen, dass all 146 00:07:40,960 --> 00:07:43,750 ‫dieser Code hier, der nicht der Blockinhalt 147 00:07:43,750 --> 00:07:47,090 ‫ist, dann direkt in diese Datei kopiert wird. 148 00:07:47,090 --> 00:07:49,843 ‫Das ist eine schöne Art, sich vorzustellen, wie das funktioniert. 149 00:07:51,334 --> 00:07:55,360 ‫Dadurch können wir dann hier in unserer Route die 150 00:07:55,360 --> 00:07:59,430 ‫Übersicht und die Tourenvorlagen verwenden, anstatt die Basis zu verwenden. 151 00:07:59,430 --> 00:08:02,750 ‫Aber natürlich immer noch mit all dem HTML, 152 00:08:02,750 --> 00:08:04,620 ‫das wir hier haben. 153 00:08:04,620 --> 00:08:08,460 ‫Okay, ich hoffe, das macht jetzt Sinn. 154 00:08:08,460 --> 00:08:10,653 ‫Lassen Sie uns das tatsächlich ausprobieren. 155 00:08:12,030 --> 00:08:13,783 ‫Ich kopiere einfach die URL. 156 00:08:14,960 --> 00:08:16,913 ‫Lassen Sie uns nun eine Übersicht schreiben. 157 00:08:18,960 --> 00:08:22,350 ‫Und so erhalten wir tatsächlich das h1, das besagt, 158 00:08:22,350 --> 00:08:24,460 ‫dass dies die Tourübersicht ist. 159 00:08:24,460 --> 00:08:27,810 ‫Und tatsächlich verwenden wir auch die Titelvariable, die wir 160 00:08:27,810 --> 00:08:29,683 ‫an diese Vorlagen übergeben haben. 161 00:08:31,810 --> 00:08:34,096 ‫Denken Sie daran, dass wir hier den 162 00:08:34,096 --> 00:08:37,320 ‫Titel Alle Touren in der Übersicht haben und dann auf 163 00:08:37,320 --> 00:08:39,310 ‫der Tour The Forest Hiker. 164 00:08:39,310 --> 00:08:41,563 ‫Lassen Sie uns das also auf den Titel setzen. 165 00:08:42,590 --> 00:08:44,860 ‫Tatsächlich können wir dies direkt hier 166 00:08:44,860 --> 00:08:47,110 ‫in der Basisvorlage tun. 167 00:08:47,110 --> 00:08:48,850 ‫Wenn wir also hier 168 00:08:48,850 --> 00:08:51,140 ‫in der Übersicht das Basistemplate erweitern, hat 169 00:08:51,140 --> 00:08:54,970 ‫das Basistemplate immer noch Zugriff auf die Locals, also auf die 170 00:08:54,970 --> 00:08:57,843 ‫Variablen, die wir an das Template übergeben haben. 171 00:08:58,810 --> 00:09:02,300 ‫Hier können wir das machen, was wir vorher gemacht 172 00:09:02,300 --> 00:09:05,973 ‫haben, also Interpolation mit der Variablen, also mit dem Local. 173 00:09:07,620 --> 00:09:12,580 ‫Also, alles was wir tun müssen, ist den Titel hier einzugeben. 174 00:09:12,580 --> 00:09:14,400 ‫Und wenn wir jetzt neu 175 00:09:14,400 --> 00:09:16,823 ‫laden, dann sehen Sie hier oben Alle Touren. 176 00:09:19,267 --> 00:09:20,573 ‫Jetzt versuchen wir es mit der Tour. 177 00:09:21,630 --> 00:09:24,420 ‫Dies ist die Detailseite der Tour, und hier oben 178 00:09:24,420 --> 00:09:26,833 ‫sehen Sie The Forest Hiker Tour. 179 00:09:28,610 --> 00:09:30,660 ‫Wenn wir nun diesen laden, sollten wir 180 00:09:30,660 --> 00:09:32,540 ‫diesen Platzhalter erhalten, den wir in 181 00:09:32,540 --> 00:09:34,230 ‫den Block eingefügt haben. 182 00:09:34,230 --> 00:09:35,113 ‫Erinnere dich daran? 183 00:09:36,890 --> 00:09:40,430 ‫Und tatsächlich ist dies die Platzhalterüberschrift. 184 00:09:40,430 --> 00:09:41,570 ‫Toll. 185 00:09:41,570 --> 00:09:44,466 ‫Dies ist ein mächtiger und sehr wichtiger Mechanismus, den 186 00:09:44,466 --> 00:09:47,220 ‫wir verstehen und für alle Vorlagen verwenden können, 187 00:09:47,220 --> 00:09:49,200 ‫die wir im Rest des 188 00:09:49,200 --> 00:09:50,550 ‫Abschnitts erstellen werden. 189 00:09:52,210 --> 00:09:54,250 ‫Im nächsten Video werden wir dann 190 00:09:54,250 --> 00:09:57,710 ‫endlich ein wenig dieses Durcheinander, das wir hier haben, aufräumen 191 00:09:57,710 --> 00:09:59,328 ‫und all diesen Code 192 00:09:59,328 --> 00:10:01,303 ‫hier in verschiedene Dateien umwandeln.