1 00:00:01,010 --> 00:00:03,430 ‫Dozent: In diesem Vortrag möchte ich Ihnen nur 2 00:00:03,430 --> 00:00:05,760 ‫ganz kurz eine Funktion zeigen, die wir eigentlich 3 00:00:05,760 --> 00:00:07,330 ‫in allen Programmiersprachen haben. 4 00:00:07,330 --> 00:00:09,870 ‫Wir fügen nur eine Datei und in diesem Fall 5 00:00:09,870 --> 00:00:12,313 ‫eine Vorlage in eine andere Vorlage ein. 6 00:00:13,770 --> 00:00:16,250 ‫Nehmen wir also an, wir wollten unser 7 00:00:16,250 --> 00:00:18,540 ‫Basislayout hier wirklich sauber halten, ohne 8 00:00:18,540 --> 00:00:20,720 ‫dass es Inhalte enthält. 9 00:00:20,720 --> 00:00:23,460 ‫Was wir also tun werden, ist den gesamten Code 10 00:00:23,460 --> 00:00:26,180 ‫für den Header in eine Header-Datei zu packen. 11 00:00:26,180 --> 00:00:29,040 ‫Und dann fügen Sie diese Datei hier ein. 12 00:00:29,040 --> 00:00:31,470 ‫Und das gleiche auch für die Fußzeile. 13 00:00:31,470 --> 00:00:33,990 ‫Und so wird unser Inhaltsblock, also 14 00:00:33,990 --> 00:00:35,670 ‫im Grunde genommen, unser 15 00:00:35,670 --> 00:00:39,650 ‫Körper hier nur mit diesen Inhalten dieses sehr saubere Element 16 00:00:39,650 --> 00:00:42,780 ‫und dann dieser Inhalt hier für den Moment. 17 00:00:42,780 --> 00:00:43,613 ‫Okay. 18 00:00:43,613 --> 00:00:47,633 ‫Lassen Sie uns hier noch einmal eine neue Datei für den Header erstellen. 19 00:00:49,950 --> 00:00:51,000 ‫dot pug 20 00:00:51,000 --> 00:00:54,640 ‫Und eigentlich stelle ich diesen Dateien, die nur zum 21 00:00:54,640 --> 00:00:57,083 ‫Einfügen dienen, gerne einen Unterstrich voran. 22 00:00:58,060 --> 00:01:00,710 ‫Und wenn Sie so etwas wie Sass 23 00:01:00,710 --> 00:01:03,423 ‫kennen, dann wird Ihnen das auch bekannt vorkommen. 24 00:01:04,310 --> 00:01:08,400 ‫Okay, also lass uns das hier hinzufügen und einfügen und nicht 25 00:01:08,400 --> 00:01:10,110 ‫diesen Code, also habe 26 00:01:10,110 --> 00:01:13,740 ‫ich wohl vergessen, ihn zu kopieren oder sogar auszuschneiden. 27 00:01:13,740 --> 00:01:16,030 ‫Und dann hier einfügen. 28 00:01:16,030 --> 00:01:18,940 ‫Und jetzt ist diese Einrückung hier ganz 29 00:01:18,940 --> 00:01:22,040 ‫falsch, weil wir jetzt drei Ebenen haben, wie 30 00:01:22,040 --> 00:01:24,870 ‫Sie sehen können, also eine, zwei, 31 00:01:24,870 --> 00:01:28,520 ‫drei Ebenen, auf denen dieser Code eigentlich hier sein sollte. 32 00:01:28,520 --> 00:01:31,940 ‫Okay, und jetzt müssen wir das hinzufügen und beheben, aber was wir 33 00:01:31,940 --> 00:01:35,250 ‫tatsächlich tun können, anstatt es manuell zu tun, ist eine nette 34 00:01:35,250 --> 00:01:38,423 ‫Erweiterung zu verwenden, die diese Arbeit für uns erledigt. 35 00:01:39,400 --> 00:01:41,313 ‫Hier in meinem Erweiterungs-Tab zeige 36 00:01:42,280 --> 00:01:44,930 ‫ich Ihnen die Erweiterung, die ich meine. 37 00:01:44,930 --> 00:01:48,380 ‫Und das nennt sich Mops verschönern. 38 00:01:48,380 --> 00:01:53,330 ‫Okay, also fahren Sie fort und installieren Sie dieses Paket, in Ordnung. 39 00:01:53,330 --> 00:01:55,210 ‫Und wenn Sie das 40 00:01:55,210 --> 00:01:57,350 ‫getan haben, können Sie hier 41 00:01:57,350 --> 00:02:00,970 ‫einfach den gesamten Code auswählen, indem Sie Befehl-A drücken und 42 00:02:00,970 --> 00:02:03,810 ‫dann einen VS-Code-Befehl erstellen, indem Sie Befehl-Umschalt-P sagen. 43 00:02:03,810 --> 00:02:06,310 ‫Und dann schreibst du hier Mops. 44 00:02:06,310 --> 00:02:08,800 ‫Und so wird dieser Mops dann verschönern. 45 00:02:08,800 --> 00:02:11,480 ‫Und Sie sehen, dass Sie hier auch die Verknüpfung 46 00:02:11,480 --> 00:02:14,610 ‫haben und ich bin mir nicht sicher, ob dies die Standardeinstellung 47 00:02:14,610 --> 00:02:17,825 ‫ist, aber zumindest in meinem Fall kann ich die Verknüpfung auch 48 00:02:17,825 --> 00:02:19,740 ‫verwenden, um diesen Code zu verschönern. 49 00:02:19,740 --> 00:02:21,910 ‫Aber egal, wenn Sie Mops 50 00:02:21,910 --> 00:02:24,590 ‫schreiben, sollten Sie diese Auswahl jetzt hier bekommen. 51 00:02:24,590 --> 00:02:27,290 ‫Und wenn Sie dann die Eingabetaste drücken, 52 00:02:27,290 --> 00:02:30,880 ‫wird, wie Sie sehen, die falsche Einrückung in dieser Datei korrigiert. 53 00:02:30,880 --> 00:02:32,230 ‫Gut? 54 00:02:32,230 --> 00:02:34,800 ‫Also speichern Sie es, schließen Sie es und 55 00:02:36,450 --> 00:02:38,103 ‫gehen wir tatsächlich hierher zurück. 56 00:02:39,220 --> 00:02:42,870 ‫Und jetzt müssen wir nur noch _header einschließen. 57 00:02:46,297 --> 00:02:48,750 ‫Das gleiche gilt für die Fußzeile, also 58 00:02:48,750 --> 00:02:52,170 ‫schneiden wir sie hier ab, erstellen eine neue Vorlage ... 59 00:02:54,826 --> 00:02:55,659 ‫_footer 60 00:02:57,160 --> 00:02:58,320 ‫einfügen Wählen Sie 61 00:02:58,320 --> 00:03:00,940 ‫es aus, Befehl-Umschalt-P oder wahrscheinlich in Windows 62 00:03:02,061 --> 00:03:04,270 ‫ist das Strg-Umschalt-P und dann wird 63 00:03:04,270 --> 00:03:06,460 ‫tatsächlich das letzte verwendet, das hier 64 00:03:06,460 --> 00:03:08,470 ‫bei der Auswahl angezeigt wird. 65 00:03:08,470 --> 00:03:12,043 ‫Drücken Sie also die Eingabetaste und los geht's. 66 00:03:13,090 --> 00:03:14,763 ‫Das ist jetzt auch behoben. 67 00:03:16,330 --> 00:03:17,260 ‫Enthalten... 68 00:03:19,130 --> 00:03:20,500 ‫Fusszeile. 69 00:03:20,500 --> 00:03:23,200 ‫Und beachten Sie, dass wir die Punkt-Mops-Erweiterung nicht 70 00:03:23,200 --> 00:03:25,103 ‫einmal erneut angeben müssen. 71 00:03:26,610 --> 00:03:29,610 ‫Also speichern Sie es und wenn wir 72 00:03:29,610 --> 00:03:32,800 ‫es jetzt neu laden, sollte es genau gleich aussehen. 73 00:03:32,800 --> 00:03:36,380 ‫Nun, nicht wirklich, denn diese Schaltflächen hier sind 74 00:03:36,380 --> 00:03:38,860 ‫irgendwie nach unten verschoben, 75 00:03:38,860 --> 00:03:41,900 ‫sodass sie diese Navigationsleiste verlassen haben. 76 00:03:41,900 --> 00:03:45,560 ‫Oder eigentlich dieser Header, das ist also nicht korrekt, 77 00:03:45,560 --> 00:03:47,230 ‫vielleicht war das 78 00:03:47,230 --> 00:03:50,990 ‫ein Problem mit dieser automatischen Einrückung hier im Header. 79 00:03:50,990 --> 00:03:53,510 ‫Und ja, das stimmt eigentlich 80 00:03:53,510 --> 00:03:56,523 ‫nicht, denn all das sollte im Header stehen. 81 00:03:59,880 --> 00:04:03,040 ‫Dieses Nav, dieses Div und dieses Nav sollten also 82 00:04:03,040 --> 00:04:05,180 ‫alle auf der gleichen Ebene sein. 83 00:04:05,180 --> 00:04:07,030 ‫Und so ist das jetzt richtig. 84 00:04:07,030 --> 00:04:09,623 ‫Sehen wir uns zur Sicherheit auch die Fußzeile an. 85 00:04:10,786 --> 00:04:12,740 ‫Aber hier ist es tatsächlich richtig, daher 86 00:04:12,740 --> 00:04:15,690 ‫bin ich mir nicht sicher, was in dieser Situation tatsächlich schief gelaufen ist. 87 00:04:17,010 --> 00:04:19,073 ‫Aber egal, versuchen wir es jetzt noch einmal. 88 00:04:20,560 --> 00:04:22,230 ‫Also los geht's. 89 00:04:22,230 --> 00:04:26,100 ‫Wie auch immer, das beinhaltet einfach einige Dateien, eine in 90 00:04:26,100 --> 00:04:27,283 ‫die andere. 91 00:04:28,382 --> 00:04:30,380 ‫Im nächsten Video werden 92 00:04:30,380 --> 00:04:35,120 ‫wir dann etwas Ähnliches machen, aber gleichzeitig viel komplexer und auch nützlicher. 93 00:04:35,120 --> 00:04:37,580 ‫Wenn Sie also neugierig sind, was das ist, dann 94 00:04:37,580 --> 00:04:39,963 ‫schließen Sie sich mir gleich im nächsten an.