‫Dozent: In diesem Vortrag möchte ich Ihnen nur
‫ganz kurz eine Funktion zeigen, die wir eigentlich
‫in allen Programmiersprachen haben.
‫Wir fügen nur eine Datei und in diesem Fall
‫eine Vorlage in eine andere Vorlage ein.
‫Nehmen wir also an, wir wollten unser
‫Basislayout hier wirklich sauber halten, ohne
‫dass es Inhalte enthält.
‫Was wir also tun werden, ist den gesamten Code
‫für den Header in eine Header-Datei zu packen.
‫Und dann fügen Sie diese Datei hier ein.
‫Und das gleiche auch für die Fußzeile.
‫Und so wird unser Inhaltsblock, also
‫im Grunde genommen, unser
‫Körper hier nur mit diesen Inhalten dieses sehr saubere Element
‫und dann dieser Inhalt hier für den Moment.
‫Okay.
‫Lassen Sie uns hier noch einmal eine neue Datei für den Header erstellen.
‫dot pug
‫Und eigentlich stelle ich diesen Dateien, die nur zum
‫Einfügen dienen, gerne einen Unterstrich voran.
‫Und wenn Sie so etwas wie Sass
‫kennen, dann wird Ihnen das auch bekannt vorkommen.
‫Okay, also lass uns das hier hinzufügen und einfügen und nicht
‫diesen Code, also habe
‫ich wohl vergessen, ihn zu kopieren oder sogar auszuschneiden.
‫Und dann hier einfügen.
‫Und jetzt ist diese Einrückung hier ganz
‫falsch, weil wir jetzt drei Ebenen haben, wie
‫Sie sehen können, also eine, zwei,
‫drei Ebenen, auf denen dieser Code eigentlich hier sein sollte.
‫Okay, und jetzt müssen wir das hinzufügen und beheben, aber was wir
‫tatsächlich tun können, anstatt es manuell zu tun, ist eine nette
‫Erweiterung zu verwenden, die diese Arbeit für uns erledigt.
‫Hier in meinem Erweiterungs-Tab zeige
‫ich Ihnen die Erweiterung, die ich meine.
‫Und das nennt sich Mops verschönern.
‫Okay, also fahren Sie fort und installieren Sie dieses Paket, in Ordnung.
‫Und wenn Sie das
‫getan haben, können Sie hier
‫einfach den gesamten Code auswählen, indem Sie Befehl-A drücken und
‫dann einen VS-Code-Befehl erstellen, indem Sie Befehl-Umschalt-P sagen.
‫Und dann schreibst du hier Mops.
‫Und so wird dieser Mops dann verschönern.
‫Und Sie sehen, dass Sie hier auch die Verknüpfung
‫haben und ich bin mir nicht sicher, ob dies die Standardeinstellung
‫ist, aber zumindest in meinem Fall kann ich die Verknüpfung auch
‫verwenden, um diesen Code zu verschönern.
‫Aber egal, wenn Sie Mops
‫schreiben, sollten Sie diese Auswahl jetzt hier bekommen.
‫Und wenn Sie dann die Eingabetaste drücken,
‫wird, wie Sie sehen, die falsche Einrückung in dieser Datei korrigiert.
‫Gut?
‫Also speichern Sie es, schließen Sie es und
‫gehen wir tatsächlich hierher zurück.
‫Und jetzt müssen wir nur noch _header einschließen.
‫Das gleiche gilt für die Fußzeile, also
‫schneiden wir sie hier ab, erstellen eine neue Vorlage ...
‫_footer
‫einfügen Wählen Sie
‫es aus, Befehl-Umschalt-P oder wahrscheinlich in Windows
‫ist das Strg-Umschalt-P und dann wird
‫tatsächlich das letzte verwendet, das hier
‫bei der Auswahl angezeigt wird.
‫Drücken Sie also die Eingabetaste und los geht's.
‫Das ist jetzt auch behoben.
‫Enthalten...
‫Fusszeile.
‫Und beachten Sie, dass wir die Punkt-Mops-Erweiterung nicht
‫einmal erneut angeben müssen.
‫Also speichern Sie es und wenn wir
‫es jetzt neu laden, sollte es genau gleich aussehen.
‫Nun, nicht wirklich, denn diese Schaltflächen hier sind
‫irgendwie nach unten verschoben,
‫sodass sie diese Navigationsleiste verlassen haben.
‫Oder eigentlich dieser Header, das ist also nicht korrekt,
‫vielleicht war das
‫ein Problem mit dieser automatischen Einrückung hier im Header.
‫Und ja, das stimmt eigentlich
‫nicht, denn all das sollte im Header stehen.
‫Dieses Nav, dieses Div und dieses Nav sollten also
‫alle auf der gleichen Ebene sein.
‫Und so ist das jetzt richtig.
‫Sehen wir uns zur Sicherheit auch die Fußzeile an.
‫Aber hier ist es tatsächlich richtig, daher
‫bin ich mir nicht sicher, was in dieser Situation tatsächlich schief gelaufen ist.
‫Aber egal, versuchen wir es jetzt noch einmal.
‫Also los geht's.
‫Wie auch immer, das beinhaltet einfach einige Dateien, eine in
‫die andere.
‫Im nächsten Video werden
‫wir dann etwas Ähnliches machen, aber gleichzeitig viel komplexer und auch nützlicher.
‫Wenn Sie also neugierig sind, was das ist, dann
‫schließen Sie sich mir gleich im nächsten an.