1 00:00:01,240 --> 00:00:03,170 ‫-: In diesem und 2 00:00:03,170 --> 00:00:06,540 ‫dem nächsten Video werden wir gemeinsam die Tour-Detailseite erstellen. 3 00:00:06,540 --> 00:00:07,500 ‫Und 4 00:00:07,500 --> 00:00:09,930 ‫nebenbei lernst du weitere Mops-Techniken 5 00:00:09,930 --> 00:00:12,107 ‫wie Conditionals und Mixins. 6 00:00:14,120 --> 00:00:15,840 ‫Und wie ich 7 00:00:15,840 --> 00:00:19,760 ‫Ihnen bereits gezeigt habe, sieht die Tour-Detailseite tatsächlich so aus. 8 00:00:19,760 --> 00:00:22,590 ‫Und das ist es, was wir in diesem und 9 00:00:22,590 --> 00:00:24,640 ‫im nächsten Video aufbauen werden. 10 00:00:24,640 --> 00:00:26,180 ‫Das einzige, was wir 11 00:00:26,180 --> 00:00:27,550 ‫etwas später verlassen 12 00:00:27,550 --> 00:00:29,490 ‫werden, ist eigentlich diese Karte. 13 00:00:29,490 --> 00:00:31,060 ‫Alles klar, aber alles 14 00:00:31,060 --> 00:00:33,760 ‫andere werden wir in diesen Werkzeugvorträgen aufbauen. 15 00:00:33,760 --> 00:00:35,873 ‫Einschließlich dieser Bewertungen. 16 00:00:37,510 --> 00:00:39,070 ‫Gut. 17 00:00:39,070 --> 00:00:41,830 ‫Im Moment haben wir also unsere Übersicht 18 00:00:41,830 --> 00:00:43,350 ‫und wir haben 19 00:00:43,350 --> 00:00:46,270 ‫diese Schaltflächen natürlich mit den bereits erstellten URLs. 20 00:00:46,270 --> 00:00:49,430 ‫Aber wenn wir dann versuchen, auf diese Seite zuzugreifen, 21 00:00:49,430 --> 00:00:51,380 ‫erhalten wir natürlich diesen Fehler. 22 00:00:51,380 --> 00:00:52,380 ‫Gut. 23 00:00:52,380 --> 00:00:55,170 ‫Kommen wir also zurück zu unserem VS-Code und 24 00:00:55,170 --> 00:00:57,470 ‫ich möchte dies eigentlich mit einer 25 00:00:57,470 --> 00:00:59,650 ‫kleinen Herausforderung für Sie beginnen. 26 00:00:59,650 --> 00:01:00,820 ‫Ich möchte, dass 27 00:01:00,820 --> 00:01:03,310 ‫Sie eine Route für die Detailseite gemäß 28 00:01:03,310 --> 00:01:06,180 ‫der URL erstellen, die wir gerade erstellt haben. 29 00:01:06,180 --> 00:01:07,370 ‫Und es wird 30 00:01:07,370 --> 00:01:09,100 ‫ähnlich sein, was wir hier bereits 31 00:01:09,100 --> 00:01:11,640 ‫haben, aber Sie müssen es ein wenig optimieren. 32 00:01:11,640 --> 00:01:12,473 ‫Okay. 33 00:01:12,473 --> 00:01:13,306 ‫Genug davon, 34 00:01:13,306 --> 00:01:16,120 ‫ich möchte auch, dass Sie diesen Controller bauen. 35 00:01:16,120 --> 00:01:17,530 ‫Also komm dazu. 36 00:01:17,530 --> 00:01:19,370 ‫Denn im Moment haben wir 37 00:01:19,370 --> 00:01:20,910 ‫nur diesen Platzhalter. 38 00:01:20,910 --> 00:01:23,410 ‫Lassen Sie mich Ihnen hier die Schritte geben. 39 00:01:23,410 --> 00:01:25,130 ‫Und wie immer 40 00:01:25,130 --> 00:01:26,660 ‫müssen wir 41 00:01:26,660 --> 00:01:29,120 ‫zuerst die Daten abrufen. 42 00:01:29,120 --> 00:01:31,093 ‫Diesmal für die gewünschte Tour. 43 00:01:34,480 --> 00:01:35,313 ‫Und dafür 44 00:01:35,313 --> 00:01:37,360 ‫bedenken Sie, dass wir hier tatsächlich die Bewertungen 45 00:01:37,360 --> 00:01:38,693 ‫und auch die Reiseleiter brauchen. 46 00:01:43,670 --> 00:01:44,503 ‫Okay. 47 00:01:45,890 --> 00:01:46,723 ‫Schauen wir 48 00:01:46,723 --> 00:01:48,700 ‫uns das also noch einmal an. 49 00:01:48,700 --> 00:01:51,140 ‫Also haben wir diese Reiseleiter hier. 50 00:01:51,140 --> 00:01:54,230 ‫Richtig, und so sind sie im Grunde ein separater Datensatz. 51 00:01:54,230 --> 00:01:55,550 ‫Also Benutzer. 52 00:01:55,550 --> 00:01:57,933 ‫Und dann haben wir hier auch die Bewertungen. 53 00:01:59,380 --> 00:02:00,730 ‫Nun, diese Reiseleiter hier, 54 00:02:00,730 --> 00:02:03,330 ‫ich glaube, sie werden tatsächlich automatisch in ein 55 00:02:03,330 --> 00:02:04,400 ‫Modell eingefügt. 56 00:02:04,400 --> 00:02:06,930 ‫Schauen wir uns das also ganz schnell an. 57 00:02:06,930 --> 00:02:08,270 ‫Also das 58 00:02:09,610 --> 00:02:11,450 ‫Tourmodell und so, 59 00:02:11,450 --> 00:02:12,283 ‫ja. 60 00:02:12,283 --> 00:02:13,116 ‫Hier 61 00:02:13,116 --> 00:02:14,400 ‫unten haben wir diese 62 00:02:14,400 --> 00:02:16,600 ‫automatische Auffüllung, wenn es eine Suchabfrage gibt, 63 00:02:16,600 --> 00:02:18,070 ‫aber nur für die Leitfäden. 64 00:02:18,070 --> 00:02:20,160 ‫Vergessen Sie also nicht, auch die 65 00:02:20,160 --> 00:02:21,173 ‫Bewertungen auszufüllen. 66 00:02:22,530 --> 00:02:23,450 ‫Okay. 67 00:02:23,450 --> 00:02:24,513 ‫Danach werden wir 68 00:02:25,900 --> 00:02:27,120 ‫eine Vorlage erstellen, aber 69 00:02:27,120 --> 00:02:29,670 ‫das werden wir zusammen gut machen, also brauche ich 70 00:02:29,670 --> 00:02:31,470 ‫Sie nicht, um diesen Teil zu erledigen. 71 00:02:33,880 --> 00:02:35,220 ‫Und schließlich möchte 72 00:02:35,220 --> 00:02:38,030 ‫ich, dass Sie auch diesen Teil hier abschließen. 73 00:02:38,030 --> 00:02:38,950 ‫So rendern 74 00:02:40,370 --> 00:02:41,203 ‫Sie 75 00:02:42,130 --> 00:02:43,510 ‫die Vorlage erneut mit 76 00:02:44,930 --> 00:02:47,050 ‫den Daten aus Schritt eins. 77 00:02:47,050 --> 00:02:48,580 ‫Gut. 78 00:02:48,580 --> 00:02:50,120 ‫Das ist also auch ganz einfach. 79 00:02:50,120 --> 00:02:51,300 ‫Ich möchte also, 80 00:02:51,300 --> 00:02:52,870 ‫dass Sie die Route erstellen und 81 00:02:52,870 --> 00:02:54,410 ‫dann auch die Daten abrufen. 82 00:02:54,410 --> 00:02:57,763 ‫Okay, also pausiere das Video hier und viel Glück dabei. 83 00:03:01,540 --> 00:03:03,280 ‫Ich hoffe, Sie haben das getan 84 00:03:03,280 --> 00:03:05,950 ‫und lassen es mich wissen, lösen Sie es hier für Sie. 85 00:03:05,950 --> 00:03:08,090 ‫Und wir beginnen mit der Route. 86 00:03:08,090 --> 00:03:11,360 ‫Und jetzt müssen wir hier eigentlich nur noch diese Schnecke hinzufügen. 87 00:03:11,360 --> 00:03:14,510 ‫Und das tun wir natürlich als URL-Parameter. 88 00:03:14,510 --> 00:03:17,693 ‫Also einfach so, es Slug nennen. 89 00:03:18,885 --> 00:03:21,150 ‫Also bevor wir die ID benutzen, richtig? 90 00:03:21,150 --> 00:03:22,660 ‫Also hatten wir es 91 00:03:22,660 --> 00:03:25,480 ‫so und nennen wir es jetzt einfach die Schnecke. 92 00:03:25,480 --> 00:03:26,313 ‫Gut. 93 00:03:26,313 --> 00:03:27,146 ‫Denn 94 00:03:27,146 --> 00:03:29,560 ‫auch so sieht die Übersichtsseite aus. 95 00:03:29,560 --> 00:03:32,413 ‫Wir haben im Grunde Tour Slash Slug. 96 00:03:33,780 --> 00:03:36,100 ‫Okay, und damit legen 97 00:03:36,100 --> 00:03:39,460 ‫wir dann die Tour im Controller an. 98 00:03:39,460 --> 00:03:41,500 ‫Also machen wir das jetzt hier. 99 00:03:41,500 --> 00:03:44,460 ‫Also const, Tour 100 00:03:44,460 --> 00:03:48,633 ‫gleich, erwarten Tour und 101 00:03:51,970 --> 00:03:53,440 ‫Findone. 102 00:03:53,440 --> 00:03:56,540 ‫Daher können wir die Suche nach ID dieses Mal nicht verwenden. 103 00:03:56,540 --> 00:03:58,330 ‫Nun, weil wir die 104 00:03:58,330 --> 00:04:00,130 ‫ID der Tour nicht kennen. 105 00:04:00,130 --> 00:04:01,030 ‫Und 106 00:04:01,030 --> 00:04:04,040 ‫so suchen wir stattdessen nach der Schnecke. 107 00:04:04,040 --> 00:04:05,140 ‫Und die 108 00:04:06,140 --> 00:04:07,540 ‫Schnecke ist wie ich 109 00:04:07,540 --> 00:04:09,940 ‫hoffe, Sie wissen es. Params 110 00:04:09,940 --> 00:04:12,960 ‫Dot Slug in Ordnung. 111 00:04:12,960 --> 00:04:15,180 ‫Und jetzt ist das alles, um 112 00:04:16,570 --> 00:04:18,263 ‫das Arrays-Feld zu füllen. 113 00:04:19,390 --> 00:04:20,223 ‫Gut. 114 00:04:21,540 --> 00:04:24,063 ‫Der Weg zum Auffüllen sind also Bewertungen. 115 00:04:25,080 --> 00:04:27,690 ‫Und eigentlich brauchen wir hier nicht alle Felder. 116 00:04:27,690 --> 00:04:29,890 ‫Lassen Sie uns also einfach diejenigen angeben, die wir brauchen. 117 00:04:30,810 --> 00:04:32,480 ‫Das sind also nur 118 00:04:32,480 --> 00:04:34,023 ‫die Rezension, die 119 00:04:35,200 --> 00:04:36,113 ‫Bewertung 120 00:04:37,290 --> 00:04:38,450 ‫und der Benutzer. 121 00:04:38,450 --> 00:04:39,283 ‫Denn 122 00:04:39,283 --> 00:04:40,600 ‫denken Sie daran, dass 123 00:04:41,500 --> 00:04:44,490 ‫wir tatsächlich so den Benutzernamen und das Benutzerfoto anzeigen. 124 00:04:44,490 --> 00:04:45,460 ‫Und dann 125 00:04:45,460 --> 00:04:47,873 ‫natürlich die Rezension selbst und die Bewertung. 126 00:04:50,065 --> 00:04:50,898 ‫Okay. 127 00:04:50,898 --> 00:04:51,910 ‫Dann beschwert es 128 00:04:51,910 --> 00:04:54,604 ‫sich natürlich, dass wir Async nicht verwendet haben. 129 00:04:54,604 --> 00:04:56,763 ‫Und das würde ich natürlich nicht vergessen. 130 00:04:58,140 --> 00:04:59,300 ‫Aber trotzdem ist 131 00:04:59,300 --> 00:05:02,290 ‫es gut, dass ES Line uns vor solchen Fehlern warnt. 132 00:05:02,290 --> 00:05:04,660 ‫Es nimmt wirklich viele Fehler aus 133 00:05:04,660 --> 00:05:06,353 ‫der Entwicklung weg. 134 00:05:07,880 --> 00:05:08,713 ‫Okay. 135 00:05:08,713 --> 00:05:09,770 ‫Und 136 00:05:09,770 --> 00:05:12,030 ‫dann übergeben wir hier natürlich 137 00:05:12,030 --> 00:05:14,660 ‫diese Tourvariable an unsere Tourvorlage. 138 00:05:14,660 --> 00:05:16,240 ‫Also dieser. 139 00:05:16,240 --> 00:05:17,380 ‫Sparen Sie. 140 00:05:17,380 --> 00:05:19,010 ‫Keine Fehler mehr. 141 00:05:19,010 --> 00:05:21,590 ‫Und damit ist dieser Teil nun tatsächlich fertig. 142 00:05:21,590 --> 00:05:22,940 ‫Alles, was wir 143 00:05:22,940 --> 00:05:26,420 ‫jetzt tun müssen, ist, unsere Vorlage zu erstellen. 144 00:05:26,420 --> 00:05:27,730 ‫Okay. 145 00:05:27,730 --> 00:05:28,940 ‫Das sollten 146 00:05:28,940 --> 00:05:30,920 ‫wir hier also schon haben. 147 00:05:30,920 --> 00:05:32,193 ‫Und das sind die Entwicklerdaten. 148 00:05:33,050 --> 00:05:34,230 ‫Wir haben also 149 00:05:34,230 --> 00:05:35,490 ‫viele Ordner und viele Daten. 150 00:05:35,490 --> 00:05:37,370 ‫Und es kann irgendwann 151 00:05:37,370 --> 00:05:39,090 ‫etwas verwirrend werden. 152 00:05:39,090 --> 00:05:39,923 ‫Okay. 153 00:05:39,923 --> 00:05:40,923 ‫Also, 154 00:05:41,780 --> 00:05:45,310 ‫lassen Sie uns diesen Platzhalterinhalt hier loswerden. 155 00:05:45,310 --> 00:05:47,510 ‫Und bevor wir etwas anderes 156 00:05:47,510 --> 00:05:51,690 ‫tun, werfen wir noch einmal einen Blick auf die ursprüngliche HTML-Datei. 157 00:05:51,690 --> 00:05:53,510 ‫Welches ist in diesem 158 00:05:53,510 --> 00:05:55,900 ‫öffentlichen Ordner, den ich gerade geschlossen habe. 159 00:05:55,900 --> 00:05:58,080 ‫Lassen Sie uns all dies hier wirklich schließen, 160 00:05:59,180 --> 00:06:00,980 ‫denn ich finde das wirklich verwirrend. 161 00:06:03,150 --> 00:06:05,470 ‫Okay, die Modelle auch. 162 00:06:05,470 --> 00:06:08,290 ‫Was wir jetzt brauchen, ist die Öffentlichkeit und dann 163 00:06:08,290 --> 00:06:09,893 ‫die Tour. html. 164 00:06:12,180 --> 00:06:14,950 ‫Also den Header haben wir natürlich schon. 165 00:06:14,950 --> 00:06:16,970 ‫Und dann geht hier der gesamte Inhalt. 166 00:06:16,970 --> 00:06:17,803 ‫Alle 167 00:06:17,803 --> 00:06:18,880 ‫diese Abschnitte, die 168 00:06:18,880 --> 00:06:20,070 ‫wir auf unserer 169 00:06:20,070 --> 00:06:23,110 ‫Seite haben, sind hier natürlich als HTML übersetzt. 170 00:06:23,110 --> 00:06:24,360 ‫Und genau 171 00:06:24,360 --> 00:06:26,830 ‫wie zuvor habe ich tatsächlich bereits 172 00:06:26,830 --> 00:06:30,649 ‫eine Pug-Vorlage erstellt, die auf all diesem HTML-Code basiert. 173 00:06:30,649 --> 00:06:33,390 ‫Alles klar, wir möchten das hier 174 00:06:33,390 --> 00:06:35,630 ‫nicht manuell zusammen übersetzen. 175 00:06:35,630 --> 00:06:36,640 ‫Okay. 176 00:06:36,640 --> 00:06:40,050 ‫So habe ich es hier schon in dieser Vorlagendatei. 177 00:06:40,050 --> 00:06:40,883 ‫Aber natürlich 178 00:06:40,883 --> 00:06:42,630 ‫können Sie das Video auch 179 00:06:42,630 --> 00:06:44,020 ‫jetzt wieder anhalten und 180 00:06:44,020 --> 00:06:46,113 ‫selbst übersetzen, wenn Sie Lust haben. 181 00:06:47,010 --> 00:06:47,843 ‫Gut. 182 00:06:47,843 --> 00:06:49,870 ‫Aber was ich jetzt tun werde, ist, 183 00:06:49,870 --> 00:06:51,850 ‫den gesamten Code zu kopieren. 184 00:06:51,850 --> 00:06:54,933 ‫Was immer noch eine Menge Code ist, wie Sie sehen können. 185 00:06:56,310 --> 00:07:00,270 ‫Also lass uns das alles kopieren und in unsere Tour gehen 186 00:07:00,270 --> 00:07:02,090 ‫und das hier einfügen. 187 00:07:02,090 --> 00:07:05,240 ‫Jetzt wird die Annotation wieder falsch sein. 188 00:07:05,240 --> 00:07:08,920 ‫Lassen Sie uns also kopieren oder auswählen, was wir gerade hier eingefügt haben. 189 00:07:08,920 --> 00:07:11,990 ‫Also ist alles außer der ersten Zeile falsch. 190 00:07:11,990 --> 00:07:14,490 ‫Aber alles, was wir hier tun müssen, ist, eine weitere Registerkarte hinzuzufügen. 191 00:07:15,400 --> 00:07:16,910 ‫Und das ist es. 192 00:07:16,910 --> 00:07:20,420 ‫Jetzt befinden sie sich alle innerhalb dieses Inhaltsblocks auf 193 00:07:20,420 --> 00:07:21,720 ‫derselben Ebene. 194 00:07:21,720 --> 00:07:22,920 ‫Also Sektion und 195 00:07:22,920 --> 00:07:23,980 ‫Sektion und 196 00:07:23,980 --> 00:07:26,410 ‫im Grunde sind alle Sektionen jetzt auf 197 00:07:26,410 --> 00:07:27,700 ‫dem gleichen Niveau, 198 00:07:27,700 --> 00:07:29,570 ‫also sind sie alle Geschwister. 199 00:07:29,570 --> 00:07:30,403 ‫Toll. 200 00:07:30,403 --> 00:07:32,650 ‫Also lasst uns all das, was wir nicht 201 00:07:32,650 --> 00:07:33,973 ‫mehr brauchen, einfach schließen. 202 00:07:34,820 --> 00:07:36,070 ‫Und genau wie 203 00:07:36,070 --> 00:07:38,150 ‫zuvor haben wir jetzt diese statische Seite 204 00:07:38,150 --> 00:07:40,120 ‫hier mit all diesen statischen Daten. 205 00:07:40,120 --> 00:07:43,310 ‫Von denen wir wissen, dass wir sie ersetzen müssen. 206 00:07:43,310 --> 00:07:44,700 ‫Aber bevor wir das tatsächlich 207 00:07:44,700 --> 00:07:46,960 ‫tun, schauen wir einfach mal, ob unsere 208 00:07:46,960 --> 00:07:48,173 ‫Route bereits funktioniert. 209 00:07:49,670 --> 00:07:50,840 ‫Okay. 210 00:07:50,840 --> 00:07:52,600 ‫Laden wir es also neu 211 00:07:52,600 --> 00:07:54,700 ‫und das gibt uns den gleichen Fehler. 212 00:07:54,700 --> 00:07:55,690 ‫Und ich denke, 213 00:07:55,690 --> 00:07:56,970 ‫das liegt daran, dass wir hier 214 00:07:56,970 --> 00:07:58,720 ‫Touren haben und nicht Tour, wie ich 215 00:07:58,720 --> 00:08:00,673 ‫denke, dass wir sie in unserer Route haben. 216 00:08:03,410 --> 00:08:04,800 ‫Hier haben wir also eine Tour. 217 00:08:04,800 --> 00:08:07,560 ‫Und so macht es eigentlich auch Sinn. 218 00:08:07,560 --> 00:08:10,443 ‫Also lasst uns das hier in unserer 219 00:08:11,480 --> 00:08:12,313 ‫Übersicht ändern. 220 00:08:13,690 --> 00:08:14,950 ‫Okay und 221 00:08:14,950 --> 00:08:16,670 ‫hier wollen wir eigentlich Tour. 222 00:08:16,670 --> 00:08:17,680 ‫Denn tatsächlich 223 00:08:17,680 --> 00:08:19,950 ‫sehen wir nur eine Tour und 224 00:08:19,950 --> 00:08:21,333 ‫nicht mehrere Touren. 225 00:08:22,460 --> 00:08:23,570 ‫Richtig? 226 00:08:23,570 --> 00:08:25,800 ‫Wenn wir also jetzt zurück zur 227 00:08:25,800 --> 00:08:27,940 ‫Übersicht gehen, sie laden und jetzt 228 00:08:27,940 --> 00:08:29,800 ‫The Forest Hiker öffnen, 229 00:08:29,800 --> 00:08:32,500 ‫dann sehen Sie, dass es eine Tour wird. 230 00:08:32,500 --> 00:08:33,420 ‫Und 231 00:08:33,420 --> 00:08:35,533 ‫dann bekommen wir natürlich den 232 00:08:35,533 --> 00:08:38,160 ‫HTML-Code für die soeben erstellte Seite. 233 00:08:38,160 --> 00:08:41,360 ‫Aus irgendeinem Grund ist das CSS nicht hier. 234 00:08:41,360 --> 00:08:42,860 ‫Versuchen wir einfach, das neu zu laden. 235 00:08:44,410 --> 00:08:46,100 ‫Nun, was ist hier los? 236 00:08:46,100 --> 00:08:48,340 ‫Versuchen wir, dies zu überprüfen. 237 00:08:48,340 --> 00:08:50,440 ‫Und ich sehe, wir haben ein paar Fehler. 238 00:08:50,440 --> 00:08:52,510 ‫Also können wir darauf klicken. 239 00:08:52,510 --> 00:08:55,000 ‫Und damit der Grund für das fehlende CSS, 240 00:08:55,000 --> 00:08:57,630 ‫denn stattdessen versucht es, die Datei an der falschen 241 00:08:57,630 --> 00:08:58,640 ‫Stelle zu laden. 242 00:08:58,640 --> 00:09:01,320 ‫Es wird also versucht, es in den CSS-Ordner innerhalb von 243 00:09:01,320 --> 00:09:02,310 ‫Tour zu laden. 244 00:09:02,310 --> 00:09:04,890 ‫Aber das gibt es natürlich nicht. 245 00:09:04,890 --> 00:09:05,950 ‫Und das liegt 246 00:09:05,950 --> 00:09:08,430 ‫daran, dass wir hier auf dieser Tourroute sind, okay. 247 00:09:08,430 --> 00:09:10,230 ‫Also müssen wir grundsätzlich die Art 248 00:09:10,230 --> 00:09:13,493 ‫und Weise korrigieren, wie wir das CSS in unser Basistemplate importieren. 249 00:09:14,850 --> 00:09:16,113 ‫Lass uns da hin gehen. 250 00:09:18,720 --> 00:09:19,950 ‫Und hier 251 00:09:19,950 --> 00:09:23,070 ‫sollten wir tatsächlich einen weiteren Schrägstrich haben. 252 00:09:23,070 --> 00:09:25,010 ‫Okay, und das gleiche eigentlich hier. 253 00:09:25,010 --> 00:09:25,910 ‫Und das 254 00:09:25,910 --> 00:09:27,153 ‫aus genau dem gleichen 255 00:09:27,153 --> 00:09:30,770 ‫Grund, den ich Ihnen zuvor in der Übersicht hier unten erläutert habe. 256 00:09:30,770 --> 00:09:33,930 ‫Also haben wir auch diese URL mit einem Schrägstrich begonnen. 257 00:09:33,930 --> 00:09:36,260 ‫Und das wird dann wieder am 258 00:09:36,260 --> 00:09:38,120 ‫Stamm der Seite beginnen. 259 00:09:38,120 --> 00:09:40,350 ‫Und so soll es funktionieren. 260 00:09:40,350 --> 00:09:43,470 ‫Das gilt übrigens für alle Bilder hier. 261 00:09:43,470 --> 00:09:45,630 ‫Alle Bilder sollten 262 00:09:45,630 --> 00:09:49,080 ‫also immer auch relativ zur Root-URL beginnen. 263 00:09:49,080 --> 00:09:52,030 ‫Also fügen wir das hier ganz schnell zu all diesen Bildern hinzu. 264 00:09:54,800 --> 00:09:55,633 ‫Und, ja, 265 00:09:55,633 --> 00:09:56,590 ‫das ist es. 266 00:09:56,590 --> 00:09:57,723 ‫Das sind sie alle. 267 00:09:58,800 --> 00:09:59,813 ‫Damit 268 00:10:01,020 --> 00:10:02,810 ‫haben wir die 269 00:10:02,810 --> 00:10:06,210 ‫Übersicht und auch diese Basisdatei korrigiert. 270 00:10:06,210 --> 00:10:07,950 ‫Wenn wir also jetzt 271 00:10:07,950 --> 00:10:11,610 ‫neu laden, sollten wir dann Zugriff auf das richtige CSS bekommen. 272 00:10:11,610 --> 00:10:13,610 ‫Und tatsächlich, los geht's. 273 00:10:13,610 --> 00:10:15,000 ‫Es gibt nur einen weiteren 274 00:10:15,000 --> 00:10:16,610 ‫Fehler, der hier in diesem Bild ist. 275 00:10:16,610 --> 00:10:17,480 ‫Und wieder 276 00:10:17,480 --> 00:10:19,390 ‫liegt es daran, dass es versucht, 277 00:10:19,390 --> 00:10:20,830 ‫es von der Tour hierher 278 00:10:20,830 --> 00:10:22,830 ‫zu laden und nicht von der Root-URL. 279 00:10:22,830 --> 00:10:23,663 ‫Das Problem 280 00:10:23,663 --> 00:10:25,563 ‫liegt also hier im Header. 281 00:10:27,040 --> 00:10:27,873 ‫Und so 282 00:10:27,873 --> 00:10:29,770 ‫müssen wir es hier natürlich 283 00:10:29,770 --> 00:10:31,700 ‫auch relativ zum Root-Pfad machen. 284 00:10:31,700 --> 00:10:33,853 ‫Wahrscheinlich das gleiche in der Fußzeile. 285 00:10:34,950 --> 00:10:35,783 ‫Und ja. 286 00:10:37,180 --> 00:10:38,033 ‫Gut. 287 00:10:39,320 --> 00:10:41,960 ‫Nur um das schnell zu bestätigen, ja, 288 00:10:41,960 --> 00:10:43,573 ‫es geht los. 289 00:10:45,320 --> 00:10:46,350 ‫Toll. 290 00:10:46,350 --> 00:10:47,830 ‫Wie ich bereits 291 00:10:47,830 --> 00:10:49,890 ‫erwähnt habe, enthält dies natürlich alle 292 00:10:49,890 --> 00:10:52,380 ‫statischen Daten zu The Park Camper Tour, 293 00:10:52,380 --> 00:10:54,650 ‫die wir in der Vorlage haben. 294 00:10:54,650 --> 00:10:57,140 ‫Aber wir schauen auf den Waldwanderer. 295 00:10:57,140 --> 00:11:01,060 ‫Beginnen wir also damit, unsere Vorlage zu reparieren und 296 00:11:01,060 --> 00:11:04,663 ‫im Grunde die dynamischen Daten hier zu verwenden. 297 00:11:07,620 --> 00:11:10,720 ‫Denken Sie also daran, dass die Variable, die wir hier 298 00:11:10,720 --> 00:11:12,053 ‫übergeben haben, Tour heißt. 299 00:11:13,210 --> 00:11:14,043 ‫Richtig? 300 00:11:14,043 --> 00:11:15,480 ‫Es heißt also einfach 301 00:11:15,480 --> 00:11:18,100 ‫Tour und so müssen wir es hier nennen. 302 00:11:18,100 --> 00:11:18,933 ‫Also Tour. Namen, und auch 303 00:11:19,997 --> 00:11:20,883 ‫das gleiche hier oben. 304 00:11:21,720 --> 00:11:23,600 ‫Und jetzt wissen Sie bereits, dass wir 305 00:11:23,600 --> 00:11:24,630 ‫hier einen Vorlagenstring 306 00:11:24,630 --> 00:11:26,840 ‫verwenden müssen, weil wir eigentlich einen String erstellen möchten. 307 00:11:26,840 --> 00:11:29,993 ‫So genannt . Tour. 308 00:11:31,240 --> 00:11:32,463 ‫Und auch hier ist dieser Weg nicht richtig. 309 00:11:33,460 --> 00:11:36,543 ‫Zuerst muss es ein Template-String sein und 310 00:11:37,920 --> 00:11:40,530 ‫dann unsere Bilder, ich schreibe 311 00:11:40,530 --> 00:11:42,250 ‫Image Slash 312 00:11:42,250 --> 00:11:45,000 ‫Tours Slash den Namen des Titelbilds. 313 00:11:46,280 --> 00:11:48,983 ‫Also Tourpunkt, und jetzt weiß ich 314 00:11:52,140 --> 00:11:53,330 ‫nicht mehr, 315 00:11:53,330 --> 00:11:56,880 ‫ob es das Titelbild oder das Titelbild ist. 316 00:11:56,880 --> 00:12:00,080 ‫Also, ja. 317 00:12:00,080 --> 00:12:01,160 ‫Bild-Cover. 318 00:12:01,160 --> 00:12:01,993 ‫Okay. 319 00:12:03,780 --> 00:12:04,613 ‫Probieren wir das also schnell aus. 320 00:12:04,613 --> 00:12:07,140 ‫Und denken Sie daran, wir sind bei The First Hiker. 321 00:12:07,140 --> 00:12:09,830 ‫Und das sollte nun der Name sein. 322 00:12:09,830 --> 00:12:11,580 ‫Und noch ein Fehler. 323 00:12:12,710 --> 00:12:14,480 ‫Also, heißt es hier, kann die Eigenschaftstour von 324 00:12:14,480 --> 00:12:15,450 ‫undefined nicht lesen. 325 00:12:15,450 --> 00:12:19,310 ‫Also gehen wir zurück und 326 00:12:19,310 --> 00:12:21,020 ‫ja. 327 00:12:21,890 --> 00:12:22,770 ‫Also hier ist dieser dumme Fehler. 328 00:12:22,770 --> 00:12:27,900 ‫Also natürlich Tour. Name und nicht Name. 329 00:12:27,900 --> 00:12:27,900 ‫Tour. 330 00:12:27,900 --> 00:12:30,420 ‫Also, was dachte 331 00:12:30,420 --> 00:12:31,290 ‫ich da? 332 00:12:31,290 --> 00:12:32,663 ‫Laden wir das neu und 333 00:12:33,980 --> 00:12:34,910 ‫jetzt bekommen wir 334 00:12:34,910 --> 00:12:37,820 ‫tatsächlich The Forest Hiker mit diesem wirklich schönen Titelbild im Hintergrund. 335 00:12:37,820 --> 00:12:41,980 ‫Toll. 336 00:12:41,980 --> 00:12:42,813 ‫Und lass uns hier weitermachen. 337 00:12:42,813 --> 00:12:44,373 ‫Erstellen Sie also noch eine weitere Vorlagenzeichenfolge. 338 00:12:45,550 --> 00:12:47,723 ‫Tour. 339 00:12:49,980 --> 00:12:50,813 ‫Dauer und dann 340 00:12:52,320 --> 00:12:53,343 ‫die Anzahl der Tage. 341 00:12:55,421 --> 00:12:57,680 ‫Dann hier unten haben wir wieder 342 00:12:57,680 --> 00:12:58,560 ‫den Startplatz. 343 00:12:58,560 --> 00:13:03,930 ‫Also, Rundgang. 344 00:13:03,930 --> 00:13:05,570 ‫Startort. Beschreibung, denken Sie daran. 345 00:13:07,000 --> 00:13:09,643 ‫Gut. 346 00:13:11,440 --> 00:13:12,520 ‫Jetzt hier unten 347 00:13:12,520 --> 00:13:14,070 ‫haben wir diese Übersichtsboxen hier. 348 00:13:14,070 --> 00:13:16,220 ‫Also Übersichtskasten-Detail. 349 00:13:16,220 --> 00:13:18,110 ‫Und wie Sie sehen, haben 350 00:13:18,110 --> 00:13:19,100 ‫wir hier 351 00:13:19,100 --> 00:13:21,660 ‫vier gleiche Kästchen, in denen sich nur 352 00:13:21,660 --> 00:13:23,530 ‫dieser Symbolname ändert, dann 353 00:13:23,530 --> 00:13:25,687 ‫das Datum und das nächste Datum. 354 00:13:25,687 --> 00:13:28,810 ‫Okay, hier ändert sich nicht der nächste 355 00:13:28,810 --> 00:13:29,643 ‫Termin, 356 00:13:29,643 --> 00:13:32,140 ‫sondern die Beschreibung der Boxen. 357 00:13:32,140 --> 00:13:34,210 ‫Also nächstes Datum, 358 00:13:34,210 --> 00:13:36,540 ‫Schwierigkeit, Teilnehmer und Wertung. 359 00:13:36,540 --> 00:13:38,500 ‫Gut. 360 00:13:38,500 --> 00:13:39,350 ‫Und so ist 361 00:13:39,350 --> 00:13:40,260 ‫dieser Code hier im 362 00:13:40,260 --> 00:13:42,550 ‫Grunde immer derselbe, nur mit drei Teilen, die sich ändern. 363 00:13:42,550 --> 00:13:44,710 ‫Also der Name des Symbols, die Beschreibung und 364 00:13:44,710 --> 00:13:46,100 ‫der Wert dieser Beschreibung. 365 00:13:46,100 --> 00:13:49,560 ‫Und da wir wiederholten Code nicht mögen, 366 00:13:49,560 --> 00:13:50,393 ‫richtig? 367 00:13:50,393 --> 00:13:53,510 ‫Lassen Sie uns eine andere Funktion von Pug 368 00:13:53,510 --> 00:13:56,070 ‫verwenden, die wir noch nicht verwendet 369 00:13:56,070 --> 00:13:57,410 ‫haben, nämlich Mixins. 370 00:13:57,410 --> 00:13:59,500 ‫Mixins sind also im 371 00:13:59,500 --> 00:14:03,060 ‫Grunde wiederverwendbare Codestücke, an die wir Argumente übergeben können. 372 00:14:03,060 --> 00:14:05,060 ‫Also ein bisschen wie eine Funktion. 373 00:14:05,060 --> 00:14:06,940 ‫Und es ist auch genau wie Mixins in SAS. 374 00:14:06,940 --> 00:14:10,400 ‫Das ist also ein CSS-Vorprozessor, mit dem 375 00:14:10,400 --> 00:14:12,460 ‫Sie vielleicht vertraut sind. 376 00:14:12,460 --> 00:14:14,370 ‫Kopieren wir also diesen Code hier für dieses Übersichtsfeld. 377 00:14:14,370 --> 00:14:17,950 ‫Also kopieren. 378 00:14:17,950 --> 00:14:19,200 ‫Und jetzt hier draußen, 379 00:14:19,200 --> 00:14:22,240 ‫aus diesem Block heraus, lasst uns dann ein neues Mixin erstellen. 380 00:14:22,240 --> 00:14:24,353 ‫Also schreiben wir Mixin und 381 00:14:25,930 --> 00:14:29,140 ‫dann den Namen des Mixins, den ich Übersichtsbox nenne. 382 00:14:29,140 --> 00:14:30,793 ‫Und dann können wir, ähnlich 383 00:14:33,400 --> 00:14:35,200 ‫wie bei einer Funktion, einige Argumente angeben. 384 00:14:35,200 --> 00:14:37,200 ‫Denken Sie also daran, wie 385 00:14:37,200 --> 00:14:41,430 ‫wir die Beschreibung der Box haben, dann haben wir den Wert dieser Beschreibung 386 00:14:41,430 --> 00:14:43,600 ‫und nennen es hier einfach Text. 387 00:14:43,600 --> 00:14:45,283 ‫Und dann auch der Symbolname. 388 00:14:46,241 --> 00:14:48,570 ‫Okay. 389 00:14:48,570 --> 00:14:49,790 ‫Also kopieren wir jetzt 390 00:14:49,790 --> 00:14:52,020 ‫diesen Text hier hinein und das bringt natürlich jetzt 391 00:14:53,447 --> 00:14:54,450 ‫unsere Formatierung durcheinander. 392 00:14:54,450 --> 00:14:56,853 ‫Lass uns das einfach schnell beheben. 393 00:14:58,420 --> 00:14:59,980 ‫Und jetzt funktionieren diese Variablen hier 394 00:15:02,047 --> 00:15:02,880 ‫wirklich wie 395 00:15:02,880 --> 00:15:04,320 ‫alle anderen Variablen in Pug. 396 00:15:04,320 --> 00:15:07,940 ‫Hier sollte nun also der Text 397 00:15:07,940 --> 00:15:08,773 ‫stehen. 398 00:15:08,773 --> 00:15:11,563 ‫Richtig? 399 00:15:13,640 --> 00:15:14,473 ‫Und das hier sollte die Beschreibung sein. 400 00:15:14,473 --> 00:15:16,410 ‫Also gleiche Beschreibung. 401 00:15:18,300 --> 00:15:20,920 ‫Nun, hier heißt es im CSS eigentlich Label. 402 00:15:20,920 --> 00:15:23,730 ‫Nennen wir es also auch hier Label. 403 00:15:23,730 --> 00:15:26,303 ‫Okay, also Label, Text und Symbol. 404 00:15:28,210 --> 00:15:30,833 ‫Daher müssen wir hier auch den Namen 405 00:15:31,850 --> 00:15:35,280 ‫dieses Symbols ändern und alle diese Symbolnamen beginnen immer 406 00:15:35,280 --> 00:15:36,530 ‫mit dem Symbolstrich. 407 00:15:36,530 --> 00:15:38,730 ‫Alles was wir also wirklich ersetzen 408 00:15:38,730 --> 00:15:40,630 ‫müssen, ist dieses Teil. 409 00:15:40,630 --> 00:15:42,350 ‫Lassen Sie uns also erneut eine Vorlagenzeichenfolge erstellen. 410 00:15:42,350 --> 00:15:44,963 ‫Und dann lass das los. 411 00:15:46,500 --> 00:15:48,493 ‫Und Symbol. 412 00:15:51,690 --> 00:15:52,943 ‫Okay, und jetzt können wir das verwenden. 413 00:15:54,000 --> 00:15:56,363 ‫Ich wollte auch sagen, dass wir dieses 414 00:15:57,310 --> 00:15:58,800 ‫Mixin auch in 415 00:15:58,800 --> 00:16:03,200 ‫eine andere Datei hätten exportieren und diese Datei dann hier einfügen können. 416 00:16:03,200 --> 00:16:05,170 ‫Aber ich denke, das macht nicht viel Sinn. 417 00:16:05,170 --> 00:16:07,040 ‫In diesem Fall, weil 418 00:16:07,040 --> 00:16:09,780 ‫es nicht wirklich viel Code ist. 419 00:16:09,780 --> 00:16:11,890 ‫Wie auch immer, lassen Sie uns jetzt wirklich weitermachen und 420 00:16:11,890 --> 00:16:12,723 ‫dieses Mixin verwenden. 421 00:16:12,723 --> 00:16:15,760 ‫Lassen Sie mich nur den Namen kopieren. 422 00:16:15,760 --> 00:16:17,510 ‫Also hier statt dieses Übersichtskastens. 423 00:16:18,490 --> 00:16:22,203 ‫Und jetzt lassen Sie es mich hier eigentlich nur duplizieren. 424 00:16:23,290 --> 00:16:25,840 ‫Okay, wir haben dieses Mixin verwendet, indem 425 00:16:27,290 --> 00:16:29,310 ‫wir plus geschrieben haben, und 426 00:16:29,310 --> 00:16:31,220 ‫dann wie bei einer normalen 427 00:16:31,220 --> 00:16:33,130 ‫Funktion leere Argumente übergeben. 428 00:16:33,130 --> 00:16:35,340 ‫Und so ist unsere erste Übersichtsbox der nächste Termin. 429 00:16:35,340 --> 00:16:38,043 ‫Dann ist vorerst nur das Datum, das hier ist. 430 00:16:41,150 --> 00:16:43,380 ‫Damit ich Ihnen zeigen kann, dass es tatsächlich funktioniert. 431 00:16:43,380 --> 00:16:46,383 ‫Also 20. August 432 00:16:47,600 --> 00:16:49,480 ‫21. 433 00:16:49,480 --> 00:16:50,380 ‫Und 434 00:16:50,380 --> 00:16:51,363 ‫dann hier, Kalender. 435 00:16:52,400 --> 00:16:53,510 ‫Okay, denn so heißt das Symbol hier. 436 00:16:53,510 --> 00:16:56,280 ‫Und so sollten wir jetzt 437 00:16:56,280 --> 00:16:58,420 ‫zwei Kisten bekommen. 438 00:16:58,420 --> 00:16:59,810 ‫Also dieser und 439 00:16:59,810 --> 00:17:01,560 ‫dieser, der genau gleich aussehen sollte. 440 00:17:01,560 --> 00:17:03,740 ‫Lassen Sie uns das also schnell bestätigen. 441 00:17:03,740 --> 00:17:05,800 ‫Und dann können wir weitermachen, um 442 00:17:05,800 --> 00:17:07,830 ‫das Mixin richtig zu verwenden. 443 00:17:07,830 --> 00:17:10,103 ‫Und ja, hier sind also unsere beiden 444 00:17:11,220 --> 00:17:12,240 ‫exakt gleichen Boxen. 445 00:17:12,240 --> 00:17:15,163 ‫Toll. 446 00:17:16,450 --> 00:17:17,490 ‫Also lasst uns dieses erste loswerden. 447 00:17:17,490 --> 00:17:20,203 ‫Und natürlich wollen wir hier das 448 00:17:24,450 --> 00:17:25,760 ‫echte Datum. 449 00:17:25,760 --> 00:17:27,233 ‫Okay. 450 00:17:28,540 --> 00:17:29,410 ‫Und 451 00:17:29,410 --> 00:17:33,960 ‫das heißt, Tour hinzufügen. Start, Datum, Null. 452 00:17:33,960 --> 00:17:34,793 ‫Schauen wir uns das also an. 453 00:17:36,450 --> 00:17:37,283 ‫Und denken Sie 454 00:17:38,330 --> 00:17:39,910 ‫daran, dass dies ein bisschen seltsam aussehen wird. 455 00:17:39,910 --> 00:17:41,310 ‫So wie früher. 456 00:17:41,310 --> 00:17:43,410 ‫Okay. 457 00:17:43,410 --> 00:17:45,083 ‫Also lass uns weitermachen und das beheben. 458 00:17:45,920 --> 00:17:46,860 ‫Lassen Sie uns das also von hier aus nehmen. 459 00:17:46,860 --> 00:17:49,820 ‫Was wir also brauchen, ist 460 00:17:49,820 --> 00:17:52,503 ‫im Grunde dies stattdessen. 461 00:17:53,610 --> 00:17:55,220 ‫Jetzt möchte ich diese 462 00:17:55,220 --> 00:17:57,603 ‫Zeile hier nicht zu lang machen, indem 463 00:17:59,370 --> 00:18:01,290 ‫ich sie einfach hier einfüge. 464 00:18:01,290 --> 00:18:02,300 ‫Warum also 465 00:18:02,300 --> 00:18:04,800 ‫nicht einfach eine neue Java-Script-Variable dafür erstellen. 466 00:18:04,800 --> 00:18:06,700 ‫Denken Sie also daran, dass wir 467 00:18:06,700 --> 00:18:08,560 ‫diese Syntax hier verwenden müssen, 468 00:18:08,560 --> 00:18:11,100 ‫um Java-Script-Code zu erstellen, der keine Ausgabe erzeugt. 469 00:18:11,100 --> 00:18:12,910 ‫Und dann können wir 470 00:18:12,910 --> 00:18:15,083 ‫hier auch einfach Java-Skript schreiben. 471 00:18:16,780 --> 00:18:17,613 ‫Okay. 472 00:18:17,613 --> 00:18:20,133 ‫Und jetzt werde ich hier einfach dieses 473 00:18:21,060 --> 00:18:21,893 ‫Datum verwenden. 474 00:18:21,893 --> 00:18:24,780 ‫Toll. 475 00:18:24,780 --> 00:18:26,240 ‫Und jetzt duplizieren wir das hier ein paar Mal für 476 00:18:26,240 --> 00:18:27,073 ‫alle Boxen, die wir haben. 477 00:18:27,073 --> 00:18:29,470 ‫Der erste ist also für Schwierigkeiten. 478 00:18:29,470 --> 00:18:31,610 ‫Und die Ikone ist im Trend. 479 00:18:31,610 --> 00:18:33,623 ‫Dann ist der nächste für die Teilnehmer. 480 00:18:37,150 --> 00:18:38,833 ‫Mit dem Symbol des Benutzers. 481 00:18:41,970 --> 00:18:44,483 ‫Und das letzte ist die Bewertung. 482 00:18:48,040 --> 00:18:50,220 ‫Und das Symbol ist ein Stern. 483 00:18:50,220 --> 00:18:52,383 ‫Hier haben wir also das Datum, aber hier in der 484 00:18:58,010 --> 00:18:59,403 ‫Schwierigkeit haben wir tatsächlich Tour. Schwierigkeit. 485 00:19:00,540 --> 00:19:02,770 ‫Dann wollen wir hier 486 00:19:02,770 --> 00:19:05,080 ‫für die Teilnehmer diese Saite. 487 00:19:06,860 --> 00:19:07,860 ‫Wie 10 Leute. 488 00:19:09,149 --> 00:19:10,810 ‫Also eine Schablone 489 00:19:10,810 --> 00:19:14,053 ‫mit dem Spruch Tour. Mischung, 490 00:19:15,160 --> 00:19:19,120 ‫Gruppengröße und dann Leute. 491 00:19:21,327 --> 00:19:22,940 ‫Und schließlich wollen wir die Wertung und 492 00:19:22,940 --> 00:19:23,823 ‫dann von fünf. 493 00:19:24,740 --> 00:19:25,573 ‫Also Tour, 494 00:19:26,950 --> 00:19:28,570 ‫und ich kann mich nie 495 00:19:28,570 --> 00:19:30,850 ‫erinnern, wie ich dieses Feld genannt habe. 496 00:19:30,850 --> 00:19:32,333 ‫Und es ist der Durchschnitt der Bewertungen. 497 00:19:37,130 --> 00:19:38,530 ‫Gut. 498 00:19:38,530 --> 00:19:40,730 ‫Und dann von 499 00:19:40,730 --> 00:19:44,673 ‫fünf. 500 00:19:49,730 --> 00:19:50,563 ‫Okay. 501 00:19:50,563 --> 00:19:51,396 ‫Und das sollte es sein. 502 00:19:51,396 --> 00:19:52,380 ‫Jetzt können wir all diesen Code loswerden. 503 00:19:52,380 --> 00:19:53,213 ‫Und so sieht es viel schöner aus. 504 00:19:54,560 --> 00:19:55,393 ‫Und 505 00:19:55,393 --> 00:19:56,530 ‫um sicherzugehen, dass 506 00:19:56,530 --> 00:19:58,660 ‫das funktioniert, speichern wir hier, 507 00:19:58,660 --> 00:20:01,760 ‫laden neu und tatsächlich bekommen wir leicht 508 00:20:01,760 --> 00:20:03,820 ‫25 Leute und die Bewertung 509 00:20:03,820 --> 00:20:05,203 ‫fünf von fünf. 510 00:20:06,370 --> 00:20:08,140 ‫Genial. 511 00:20:08,140 --> 00:20:09,350 ‫Wir haben also schon viel 512 00:20:09,350 --> 00:20:12,170 ‫behandelt, aber lass uns dieses Video in zwei Teile aufteilen und mit 513 00:20:12,170 --> 00:20:13,453 ‫dem Rest der Seite gleich im 514 00:20:14,360 --> 00:20:15,193 ‫nächsten fortfahren.