Hugo kompiliere SCSS und SASS in CSS Vollständiger Kurs

1. Einführung: Hallo, mein Name ist Sean und willkommen zu meinem Kurs zum Kompilieren von CSS und S mit Hugo Bevor Sie diesen Kurs abschließen, wird davon ausgegangen, dass Sie über Grundkenntnisse der Verwendung von Hugo verfügen, falls Sie Hilfe benötigen Im Abschnitt Ressourcen unten finden Sie einen Link zu meinem Einführungskurs „Erste Schritte mit Hugo“. In diesem Kurs verwende ich Bootstrap Five als CSS-Framework Nach Abschluss dieses Kurses können Sie die erlernten Fähigkeiten auf jedes andere CSS-Framework oder Ihr eigenes benutzerdefiniertes Code-Projekt anwenden jedes andere CSS-Framework oder Ihr eigenes benutzerdefiniertes Code-Projekt Einer konzentriert sich auf die folgenden Themen: NPM-Pakete, Kompilieren von CSS und S zu Browser-Präfixe mit Autoprefixer erstellen, ungenutzte CSS-Klassen mit bereinigtem CSS entfernen Verwenden der Bootstrap-Browser-Listendatei, um die eigene Browserunterstützung zu replizieren zu replizieren Selektives Importieren der Bootstrap-Quelle , um die Größe der Datei zu minimieren Anpassen von Bootstrap über ihre Variablen. Und das Erstellen benutzerdefinierter CSS-Dienstprogrammklassen mit der Bootstraps-Utility-API In Projekt zwei können Sie die Fähigkeiten, die Sie in Projekt eins gelernt haben, zusammen mit Ihrer eigenen Kreativität umsetzen Fähigkeiten, die Sie in Projekt eins gelernt haben, zusammen mit Ihrer eigenen Kreativität Sie werden eine von mir bereitgestellte Website-Vorlage ändern . Ich werde da sein, um dir auf dem Weg zu helfen. Poste einfach einen Link zu deiner Arbeit im Projektbereich. Ich aktualisiere diesen Kurs ständig während sich Hugo und Bootstrap weiterentwickeln Sie können sicher sein, dass Sie die aktuellsten Informationen erhalten Ich freue mich sehr, dass du dich für meinen Kurs entschieden hast. Ich kann es kaum erwarten, unterwegs Fortschritte zu sehen. 2. Lektion2: Willkommen bei Projekt eins. Projekt eins ist ein kompetenzorientiertes Projekt und dann werden die Fähigkeiten, die Sie gelernt haben, Projekt eins kreativ in Projekt zwei eingesetzt Bevor wir mit Projekt eins beginnen, schauen wir uns die Voraussetzungen für diesen Kurs an Sie benötigen Grundkenntnisse in Hugo, nur die Grundlagen. Wenn Sie Schwierigkeiten haben, können Sie sich an meinen Einführungskurs zu Hugo und Bootstrap wenden Einführungskurs zu Hugo und Bootstrap Im Bereich Ressourcen gibt es einen Link. Sie müssen Hugo lokal installiert haben. Das kannst du in meinem Einführungskurs lernen. Sie müssen auch nos installiert haben, und dazu gehört auch NPM, das ein integraler Bestandteil dieses Kurses ist Auch hier können Sie sich auf den Einführungskurs beziehen. Sie müssen Visual Studio Code oder einen Code-Editor, mit dem Sie vertraut sind, installiert haben Ich werde Ihnen den Kurs über Visual Studio Code beibringen, aber Sie können gerne Ihren eigenen Code verwenden. Wenn Sie Hilfe bei der Installation benötigen, klicken Sie einfach auf den Link zu meinem Einführungskurs und ich zeige Ihnen, wie Sie alles installieren , was Sie jemals für Hugo benötigen. Project One ist ein kompetenzorientiertes Projekt Arbeiten Sie an all diesen Fähigkeiten, die hier aufgelistet sind und über die ich in der Einführung gesprochen habe. Es ist wirklich wichtig , wenn Sie das erste Projekt beenden oder wenn Sie dabei Schwierigkeiten haben , eine Kopie Ihrer Arbeit in den Projektbereich hochzuladen. Dazu müssen Sie einen Cloud-Dienst wie Dropbox Cloud oder One Drive oder Google Drive oder einen anderen Cloud-Dienst verwenden , Google Drive oder einen anderen Cloud-Dienst um einen Link zu Ihrer Arbeit bereitzustellen. Ich kann mir dann nie Ihre Arbeit ansehen und Ihnen Feedback geben , wenn Sie dabei Schwierigkeiten haben. Wir sehen uns in der nächsten Klasse. 3. Lektion3: In dieser Lektion können Sie die Zip-Datei für weniger als drei Personen im Abschnitt Ressourcen herunterladen . Ich werde dann die Vorlage kurz auspacken und jeden Abschnitt erläutern Wenn Sie meinen Kurs „Einführung in Hugo und Bootstrap“ abgeschlossen haben , werden Sie die Vorlage vollständig verstehen Ich gebe diese Erklärung für diejenigen, die meinen Einführungskurs nicht oder schon seit einiger Zeit nicht mehr gemacht haben Wenn Sie Fragen haben, schauen Sie sich unbedingt meinen Einführungskurs in Hugo an. Ich werde einen Link dazu im Abschnitt Ressourcen unter Lektion drei hinterlassen . Schauen wir uns kurz die Vorlage an , mit der wir arbeiten werden. Sie finden diese Dateien im Abschnitt Ressourcen. Für Lektion drei müssen Sie den ZIP-Ordner herunterladen und dann entpacken. Sobald du es extrahiert hast, hast du das, was ich hier habe. Wenn Sie Click schreiben, können Sie es mit VS-Code öffnen. Sobald wir im VS-Code sind, wenn wir ein neues Terminal öffnen und den Hugo-Server eingeben, können wir uns die Vorlage ansehen Sie können den Link kontrollieren und klicken. Wenn wir die Seite inspizieren und in den Kopf schauen, können wir sehen, dass die CSS-Datei einem CDN Content Delivery Network stammt Und es wird die Bootstrap-CSS-Datei heruntergeladen , die überhaupt nicht geändert wurde, es werden lediglich alle Bootstrap-Standardeinstellungen verwendet Wenn wir dann bis zum Ende des Hauptteils scrollen, werden Sie sehen, dass es sich bei der JS-Datei wiederum um die vollständige JS-Datei handelt und sie vom CDN stammt Jetzt, wo wir im VS-Code sind, gebe ich Ihnen einen kurzen Überblick darüber, wie die Vorlage funktioniert Wenn Sie Probleme mit einem dieser Konzepte haben, schauen Sie sich bitte meinen Hugo-Einführungskurs an. Den Link dazu finden Sie unten im Abschnitt Ressourcen. Archetypes dient zum Einrichten einer neuen Seite. Immer wenn Sie Hugo new ausführen, verwendet Hugo die Daten in Archetypen, um eine neue Seite zu generieren Der Inhalt Ihrer Seiten wird im Inhaltsordner gespeichert Es gibt zwei Arten von Indexen: Dodd wird abgekürzt, Indexpunkt D mit einem Unterstrich steht für eine Listenseite In diesem Fall ist dieser Indexpunkt MDs für die Startseite. Aber wenn Sie in den Produktordner gehen, haben wir hier eine Menge untergeordneter Seiten. Unser Underscore Index Dot MD ist eine Listenvorlage, die all diese Produkte auflistet Und ich werde Ihnen gleich zeigen, was Listenvorlagen sind. Wobei es sich bei dieser Indexpunkt-MDs um eine normale Einzelseite handelt. Wir verwenden in diesem Projekt keine Daten. Wenn Sie Informationen aus einer Datendatei anzeigen würden , würden Sie sie hier speichern. Layouts hier sind Standardwerte, Basis von bezieht sich auf die gesamte Seite. All die verschiedenen HTML-Komponenten, wir haben Partials und Blöcke Blöcke werden von einer Seitenebene aus gesteuert. Das ist unser Block hier, der Hauptblock für unsere einzelne Seite. Partials werden aus dem Partials-Ordner abgerufen. Wenn wir einen Unterstrich als Indexpunkt D verwenden, verwenden wir eine Listenvorlage Wenn es sich um einen Standard-Indexpunkt d oder eine andere Datei handelt, verwenden wir unsere einzige Vorlage Hier sind alle unsere Teildateien. In diesem Kurs werden wir an der Fußzeile des Skripts arbeiten. Wir werden die CDN-Javascript-Datei überschreiben. Außerdem werden wir im Kopf die CSS-CDN-Bootstrap-Datei mit unserer eigenen überschreiben CSS-CDN-Bootstrap-Datei Wir haben einen Ergebnisordner, der von Hugo generiert wird. Darüber müssen Sie sich keine Sorgen machen. Es gibt einen statischen Ordner, wir haben dort eine CSS-Datei und wir haben eine JS-Datei. In diesem Kurs werden wir diese CSS-Datei loswerden und sie in einen Assets-Ordner legen, damit wir sie mit CSS oder SS erstellen können . Wenn Sie also Fragen dazu haben, was das alles bewirkt, schauen Sie sich bitte meinen Hugo-Einführungskurs an, andernfalls fangen wir an. 4. Lektion4: In dieser Lektion initialisieren wir Ihr Hugo-Projekt als NPM-Projekt und erstellen so eine JSON-Paketdatei erstellen so Anschließend werden wir Bootstrap als NPM-Abhängigkeit installieren Bootstrap als Das heißt, wir laden Bootstrap aus der NPM-Registrierung herunter und installieren es im Ordner mit den Und dann werden wir in einer späteren Lektion auf Bootstrap-Quelldateien zugreifen Wir werden unser Projekt so einrichten, dass es bereit ist , NPM-Pakete zu akzeptieren Sie müssen Nots im NPM Package Manager installiert haben. Sie können beide gleichzeitig installieren, indem Sie einfach Notes installieren Falls Sie das noch nicht getan haben , ist es wirklich wichtig. Sie sehen meinen Hugo-Einführungskurs, und im ersten Leslie geht es darum, alle Softwarepakete herunterzuladen , die Sie benötigen. Seien Sie bereit zu gehen Sie müssen lediglich ein neues Terminal starten und den Befehl NPM ausführen Wenn das nicht funktioniert, liegt es höchstwahrscheinlich daran, dass Sie NPM nicht installiert haben zu dem anderen Kurs zurück und folgen Sie diesen Anweisungen Wenn Sie das ausführen, werden Sie als Erstes nach einem Namen für das Paket gefragt Wenn Sie nun auf NPM veröffentlichen möchten, müssen Sie am Anfang ein AT-Zeichen und den Namen Ihres NPM-Benutzernamens setzen Anfang ein AT-Zeichen und den Namen Ihres NPM-Benutzernamens Aber wir werden nicht auf NPM veröffentlichen, wir verwenden das nur, um Sie können wahrscheinlich die Standardeinstellung akzeptieren , wenn Sie möchten . Wenn Sie Ihr Projekt bereits gespeichert haben , um es abzurufen, wird dies wahrscheinlich für Sie übernommen Andernfalls können Sie ihm einfach einen Namen wie Hugo SCSS geben , oder natürlich Hugo SCSS Dann frage ich dich nach einer Version. Normalerweise fange ich mit 0.0 0.1 an, aber das ist zu diesem Zeitpunkt nicht wirklich wichtig, es sei denn, Sie verwenden eine Beschreibung des Versionsverwaltungstools Auch hier veröffentlichen wir das NPM nicht Es ist nicht übermäßig wichtig, aber Sie können jederzeit eine Beschreibung angeben eine Beschreibung wenn Sie möchten Der Einstiegspunkt gilt nicht wirklich für das, was wir hier tun , da es sich nicht um ein echtes NPM-Paket Wir brauchen keinen Testbefehl. Auch hier gilt: Wenn Sie ein Git-Repository eingerichtet haben , werden Sie dieses abrufen. Auch hier ist es nicht so wichtig, weil wir keine Keywords veröffentlichen. eigentlich keine Rolle. Autor, du kannst es einrichten wenn du willst und lizenzieren. Jetzt habe ich das Paket JSON-Paket Jason. Wenn Sie dort hineinschauen, werden Sie alle Daten sehen, die Sie gerade eingegeben haben. Wozu das dient, ist für die Verwaltung von Paketen. Das erste Paket, das wir installieren werden, ist Bootstrap. So wie du das machst , schreibst du NPM und installierst dann Bootstrap Bevor ich eintrete, zeige ich Ihnen einfach, wie das funktioniert, indem ich es in der NPM-Registrierung nachschlage Ich bin zu pms.com gegangen und werde nach Bootstrap suchen. Wir haben ihre Bootstrap-Version fünf. Wir haben hier einen Befehl zum Installieren dieses speziellen NPM-Pakets, was sehr praktisch ist, wenn Sie ein Anfänger sind Sie haben auch auf ihr Github-Repository verlinkt , aus dem der gesamte Code abgerufen wurde Dann müssen wir auf ihre Homepage verlinken , um Zugang zu Dokumentationen zu erhalten Habe ein paar interessante Statistiken. Sie werden sehen, dass sie jede Woche 3,5 Millionen Downloads haben. Das zeigt Ihnen , dass es sich tatsächlich ein sehr beliebtes Paket handelt und dass es sich um eines handelt, das gerade heruntergeladen wird. Weißt du, es ist nicht abgestanden. Wir sind in Version 5.1 0.3 Version fünf ist definitiv das, was Sie wollen Sie können sehen, dass die letzte Veröffentlichung vor einem Monat war. Zumindest wissen Sie , dass es gerade entwickelt wird und nicht veraltet ist Wir haben hier einige grundlegende Dokumente, aber ich empfehle Ihnen, einen Link zu ihrer Website zu verwenden Wir drücken die Eingabetaste und es wird aus der NPM-Registrierung heruntergeladen . Und es ist installiert Schauen wir uns noch einmal unsere Paket-JSON-Datei an Wir werden das Terminal schließen, Sie werden sehen, dass wir dort eine Abhängigkeit von Bootstrap haben Wenn wir in unserem Projekt unter Node-Module nachschauen, sehen wir, dass wir nicht nur Bootstrap installiert haben, sondern dass es auch einen Ordner bei PoperJS gibt Was das ist, es ist eigentlich eine Peer-Abhängigkeit von eine Peer-Abhängigkeit Es ist eine zusätzliche Bibliothek in Javascript-Bibliothek, von der Bootstrap Javascript abhängt. Wir haben nicht nur Bootstrap installiert, wir haben auch einige Abhängigkeiten gleichzeitig installiert. Wenn wir in das Bootstraps-Paket Json gehen und dort einen Blick darauf werfen, werden Sie feststellen, dass Pops von Peers abhängig ist, und deshalb wird das automatisch Für uns gilt das nur, wenn Sie Node JS Version 7 oder höher haben , was wahrscheinlich der Fall ist Es gibt noch eine letzte Sache, die du tun musst : Wenn du Git verwendest, um den Fortschritt zu speichern, musst du in dein Git gehen und das Ausklappen der Node-Module ignorieren weil Git derzeit 472 Dateien dorthin übertragen will. Die Dateien wurden gerade in die Knotenmodule heruntergeladen. Sie möchten sie nicht in Ihr Git-Repository hochladen und ich werde Ihnen gleich zeigen, warum. Wir werden in unser Git-Ignore-Menü übergehen. Wir werden einen neuen Zeilenknoten hinzufügen und Module unterstreichen. Beenden Sie es mit dem Schrägstrich, speichern Sie das. Sie werden sehen, dass es sich nur um die drei Dateien handelt, an denen ich gerade arbeite Aber ich werde Git nicht in diesen speziellen Kurs aufnehmen , nur um die Dinge einfach zu halten. Wenn Sie nun dieses Projekt speichern würden, um den Inhalt des Node-Module-Ordners abzurufen , würde er nicht in Ihrem Get- oder Github-Repository gespeichert . Nur um Ihnen zu zeigen, wie das funktioniert, sagen wir, wir würden den Node-Module-Ordner löschen und das ist, um das Herunterladen dieses Projekts von Get zu emulieren Ich zeige dir, wie wir dann alles mit einem Befehl installieren können alles mit einem Befehl installieren Ich habe den Ordner Node Modules eingeschränkt, sodass Sie dieses Projekt gerade von Ihrem Get-Konto heruntergeladen haben . Alles was Sie tun müssen, ist NPM install auszuführen. Es sucht dann nach Ihrer Paket-Dot-JSON-Datei und installiert alles, was sich darin befindet, in unserer Paket-Dot-JSON-Datei wie wir gerade besprochen haben. Wir haben Bootstrap Wie Sie sehen können, wurden zwei Pakete installiert, und das sind Bootstrap und Pops diesem Grund übergeben Sie den Inhalt dieses Node-Module-Ordners nicht an Get, da dadurch Ihr Get-Konto sehr schnell aufgefüllt wird Wir müssen diesen Ordner ignorieren und wenn Sie dann Ihr Get-Projekt heruntergeladen haben, müssen Sie nur NPM install ausführen und schon kann es losgehen Da haben wir es. Wir haben Bootstrap als NPM-Abhängigkeit installiert Bootstrap als NPM-Abhängigkeit Wir sind bereit anzufangen. 5. Lektion5: In dieser Lektion werden wir einige NPM-Befehle einrichten. Der Grund, warum wir das tun, ist, dass wir schnell verschiedene Hugo-Befehle ausführen können schnell verschiedene Hugo-Befehle ausführen Wir werden einige komplexe Hugo-Befehle erstellen. Sie werden wahrscheinlich nicht in die Befehlszeile tippen wollen . Wenn Sie in Ihr hinterlegtes Paket gehen, werden Sie sehen, dass wir ein Testskript haben. Wir werden nun damit beginnen, ein Entwicklungsskript zu erstellen. Danach müssen Sie ein Komma setzen. Dann werden wir ein Build-Skript erstellen. Wir gehen zuerst auf diese beiden und fügen dann noch ein paar hinzu. Was die Entwicklung angeht, wissen Sie, dass Sie den Hugo-Server ausführen müssen, um den automatischen Reloading-Server ausführen zu Dem können wir noch ein paar zusätzliche Dinge hinzufügen. Das erste ist GC und das ist für die Müllabfuhr. Wenn Sie diesen Server schließen , werden alle ungenutzten Dateien entfernt. Als Nächstes werden wir das schnelle Rendern deaktivieren. Setzen Sie tatsächlich Großbuchstaben an den Anfang jedes Wortes, außer dem ersten Das bedeutet, dass jedes Mal, wenn Sie eine Datei speichern, Ihre gesamte Website neu geladen wird, sodass Sie garantiert die aktuellste Version Ihrer Website haben aktuellste Version Ihrer Als Nächstes werden wir das Build-Skript erstellen. Dieses Mal werden wir nur den Hugo-Befehl ausführen. Wir werden GC für die Müllabfuhr hinzufügen. Dieses Mal werden wir auch den Ordner bereinigen, den wir für die Erstellung verwenden. Es wird in einem öffentlichen Ordner erstellt . Wir möchten sicherstellen, dass dieser vollständig leer ist, sodass sich darin keine veralteten Dateien aus früheren Versionen der Website befinden aus früheren Versionen der Website Wir werden Clean Destination D mit nur einem großen D ausführen Als Nächstes werden wir Unify verwenden, um zu versuchen, die HTML-Datei zu verkleinern Wir speichern das und überprüfen sie. Sie werden unten sehen, ob es bei Verwendung von VS-Code einen Abschnitt namens NPM-Skripte gibt Und das ist wirklich praktisch. Diese beiden Skripte , die wir gerade geschrieben haben und jetzt hier verfügbar sind Wenn Sie die Maus darüber halten, können Sie den eigentlichen Befehl sehen , den Sie geschrieben haben, und sie passen zusammen. Wir werden versuchen, dass der Entwickler mit dem Spielen beginnen möchte . Es läuft im Terminal, Sie können sehen, dass es die Dateien erstellt hat, es hat keine Säuberung mit der Müllabfuhr durchgeführt. Es gibt dir die Adresse. Sie können darauf klicken, um es im Browser zu öffnen. Jetzt, wo wir auf der Website sind, schreiben und klicken, und wir sehen uns die Quelle an und Sie werden sehen dass zwischen all den Zeilen viel Leerraum ist. Kehren wir zum VS-Code zurück und versuchen, das Produktionsskript auszuführen. Als erstes drücken wir entweder die Taste C oder die Mülltonne. Dann werden wir bauen. Damit wird kein Server betrieben, es werden nur die Dateien auf die Festplatte geschrieben. Wir gehen dann in den öffentlichen Ordner. Wir werden unseren Index, Html, überprüfen. Sie werden sehen, wie es ihm geht, den ganzen Leerraum entfernen , weil sie den Minify-Befehl ausführen Sie müssen noch etwas tun und Sie können sehen, wie Gets versuchen, all diese Dateien abzurufen , die wir gerade erstellt haben Wir müssen diese Dateien ignorieren, wenn du Git für die Versionsverwaltung verwendest. Und um deine Arbeit zu sichern, musst du nur public hinzufügen. Und Sie sehen, es ist von 29 auf zwei gesunken. Wir übertragen nur die beiden Dateien, an denen wir gerade arbeiten, um das zu bekommen. Wenn Sie verwenden, müssen Sie für diesen Kurs nichts tun, das ist wirklich wichtig. Ich werde unserem Paket noch ein paar Skripte hinzufügen, Jason. Als Nächstes werden wir rendern, dass Hugo, wenn es läuft, all diese Dateien auf die Disc rendert , sodass wir sie bei Bedarf überprüfen können Wir kopieren und fügen den Inhalt des Entwicklungsskripts ein. Die einzige wichtige Sache, die wir hinzufügen müssen, ist das Rendern auf die Disc, weil wir von der Festplatte aus arbeiten. Wir müssen auch sicherstellen, dass wir das Zielverzeichnis bereinigen , bevor das passiert. Sie müssen nach Ihrem zweiten Befehl ein Komma setzen. Nun zum Rendern, wir machen das Render-Dev, weil wir als Entwicklungsserver laufen Wir werden dann einen davon erstellen, aber für die Produktion, damit wir testen können, wie die Website in der Produktion aussehen wird. Aber bei einem Entwicklungsserver setzen wir einen Render-Entwickler ein und ändern diesen für die Produktion auf Render Prod Wir werden ein paar Änderungen vornehmen. Als Erstes müssen wir ihm sagen, dass es ein Produktionsserver sein wird . Wir werden einen Umgebungsraum produzieren, der nachahmt, wie Ihre Website aussehen wird, wenn Sie den Build tatsächlich ausführen Beispielsweise verfügen Sie möglicherweise über einige Skripts, die nur in der Produktion ausgeführt werden Oder einige Dinge, die vereinheitlicht werden könnten, zum Beispiel mit Javascript oder SCSS Das nächste, was Sie hinzufügen müssen, ist Unify. Das ist nur für dein HTML. Sie müssen auch in der Lage sein, einen Entwicklungsserver zu betreiben, aber für Dateien, deren Datum in der Zukunft liegt. Und auch für Dateien oder Seiten , die als Entwürfe markiert sind. Wir kopieren und fügen unser Dev-Skript ein und fügen es unten ein, wir nennen das Dev Colon Drafts Dann werden wir zwei Optionen hinzufügen. Die erste besteht darin, zukünftiges Kapital aufzubauen und Entwürfe zu erstellen Ich mag es nicht, diese beiden Optionen für die Produktion zu verwenden , weil ich finde, dass das ein bisschen irreführend ist, weil das nicht das ist, was auf dem Server passieren wird Aber ich verwende es gerne für den Dev-Server. Es gibt noch einen letzten Befehl , den du eingeben wirst? Und das ist für PM, ist wirklich schwierig zu benutzen, wenn es darum geht, Ihre Pakete zu aktualisieren. Aber es gibt ein Programm , das du installieren kannst , das grafisch ist und es wirklich einfach macht. Öffne ein neues Terminal und führe NPM install NPM oder Hyphen check aus. Es wird dir sagen, dass acht Pakete installiert wurden und das liegt daran , dass es acht Pakete installiert wurden und das liegt daran , dass Abhängigkeiten von NPM Check handelt Wenn du in deinem Ordner nachschaust, der keine Module ist, wirst du sehen, dass er langsam voll Aber das wichtigste, das wir tatsächlich installiert haben, war NPM Check. Aber es gibt noch viele andere, die Abhängigkeiten von NPM überprüfen. Dann machen wir eine neue Zeile und wir überprüfen per PM, ob Sie Update schreiben könnten , aber das könnte irreführend sein Es wird tatsächlich mit NPM aktualisiert. Ich nenne es einfach NPM-Check. Ich weiß genau, was ich tue. Füge eine Spalte ein und dann ein paar Anführungszeichen. Und den Befehl, den wir ausführen werden, NPM check, musst du ausführen, der ist für die Aktualisierung, sonst bekommst du diese Option nicht, wenn du darauf klickst Wir können das testen, indem wir auf PM-Check klicken. Es sagt uns, dass Irving auf dem neuesten Stand ist Und das liegt daran, dass wir gerade Bootstrap installiert haben. Wenn Sie jedoch veraltete Pakete haben, erhalten Sie eine Liste von Paketen, die aktualisiert werden können Wir werden einen kurzen Test des Render-Befehls durchführen. Wir werden zunächst Rendern Dev ausführen. Sie werden sehen, dass es Hugo erstellt, aber es rendert auch auf die Festplatte. Wenn wir in unseren öffentlichen Ordner gehen, sind das alle Dateien, die auf der lokalen Host-Website verwendet werden . Wenn wir uns unseren Index HL ansehen, werden Sie viel Speicherplatz sehen. Ich werde das schließen. Ich werde die Render-Produktion übernehmen. Wenn Sie wirklich genau hinschauen, werden Sie die Produktion der Umgebung statt der Entwicklung sehen . Und hier sind all unsere Dateien hier, aber sie sind auch auf dem Ladeserver der Bibliothek sichtbar. Wenn wir Indexpunkt-HTML öffnen, werden Sie feststellen, dass nicht alle, aber der größte Teil des Leerraums entfernt wurde , um die Dateigröße gering zu halten. Nehmen wir also an dieser Lektion teil. Wir sehen uns in der nächsten. 6. Lektion6: In dieser Lektion werden wir einige weitere NPM-Pakete hinzufügen. Und das tun wir, damit wir Hugo als NPM-Abhängigkeit hinzufügen können Hugo als NPM-Abhängigkeit hinzufügen Das heißt, wer auch immer an dem Projekt arbeitet oder wo auch immer Sie an dem Projekt arbeiten, egal ob es sich um einen anderen Computer handelt, Sie verwenden dieselbe Version von Hugo Es funktioniert auf jeder Plattform, egal ob Linux, Mac oder Windows. Hugo wird in dem für diese Plattform erforderlichen Format herunterladen . Wir werden zwei NPM-Pakete installieren. Öffne ein neues Terminal. Wir geben NPM install Der erste ist der Hugo-Installer. Der zweite ist von demselben Autor und es ist wichtig dass Sie all diese Namen richtig hinbekommen denn wenn Sie die Buchstabierung verpassen, können Sie etwas herunterladen, das Sie nicht möchten. Werfen wir einen kurzen Blick auf unsere JSON-Paketdatei. Sie werden unter Abhängigkeiten sehen, dass wir jetzt jeden Pin und Hugo installiert haben. Der einfachste Weg, das Hugo-Installationsprogramm zum Laufen zu bringen , besteht darin, zu Ihrem Abhängigkeitsbereich zu wechseln. Sie ein Zeichen danach in eine neue Zeile setzen, fügen Sie einen neuen Abschnitt namens Andere Abhängigkeiten ein, sodass Sie ein großes D für Abhängigkeiten verwenden. Dann setzen wir einen Doppelpunkt und einige geschweifte Klammern in eine neue Zeile, Anführungszeichen geben Hugo ein, Dann müssen Sie die neueste Version bereitstellen . Sie müssen es genau so eingeben , wie Hugo es auf seiner Website hat. Ich werde nach der Hugo-Version suchen. Dann gehe ich auf die Github-Seite. Sie sehen, die aktuelle Version, wenn diese Lektion aufgenommen wurde, ist 0.89 0.4 Wir geben das genau ohne die V-Tasten 0.89 0.4 Sie brauchen kein Zeichen nach dieser Zeile oder nach den geschweiften Klammern, weil sie die letzten in ihren jeweiligen Abschnitten sind in Dann gehen wir zu unserem Skript über. Wir werden hier ein letztes Skript namens Post Install einfügen. Jetzt wird nach der Installation Ihr vorletztes Skript nach der Installation ausgeführt. Nachdem die NPM-Installation ausgeführt wurde, fügen wir einen Doppelpunkt ein. Und dann zu erfundenen Kommas. Und wir werden den Hugo-Installer ausführen , den wir gerade installiert Für die Version werden wir andere Abhängigkeiten verwenden Hugo. Und das bezieht sich auf diesen Abschnitt, den wir gerade erstellt haben. Sie können Hugo also hier unten aktualisieren. Dann werden wir ihm sagen, dass es die erweiterte Version installieren soll dass es die erweiterte Version die den Fold auf Linux und das Mac-Board auf Windows installiert . Tut es nicht. Es ist wirklich wichtig, dass Sie das für das, was wir in dieser Lektion mit CSS und als Building behandeln werden, benötigen. Wir müssen dem Hugo-Installationsprogramm mitteilen , wo die Dateien abgelegt werden sollen , die die ausführbare Hugo-Datei heruntergeladen haben. Wir geben das Ziel an und dann werden wir die Module in Node Underscore installieren In Hugo sollten Sie Get wahrscheinlich anweisen, Ordner mit den Knotenmodulen nicht hochzuladen Sie erhalten die Datei ignoriere, Sie müssen sich keine Sorgen machen, Ihre Hugo-Datei hochgeladen wird. Das speichern wir. Wenn wir den Befehl NPM install ausführen, wird hugo be ausgeführt. Er hängt von Ihrem System ab und wird im Ordner Node Modules gespeichert . Lass uns weitermachen und das tun Führen Sie NPM install aus, es durchläuft und überprüft, es lädt jetzt die Hugo-Binärdatei unter Windows herunter, es wird eine C-Datei sein Lass uns einen Blick darauf werfen. Jetzt unserem Ordner für Knotenmodule suchen wir in unserem Ordner für Knotenmodule nach Knotenmodulen. Hugo, wir sind drin und dann haben wir Hugo. Und du wirst dort sehen, dass wir Hugo Doc haben. Wenn Sie Macolinux ausführen würden, hätten Sie eine ausführbare Datei, die zu Ihrem System passt . Aber bei unseren Befehlen hier dreht sich alles um Hugo Server oder Hugo. Sie verweisen nicht auf diese Datei. Und wir versuchen, unsere Skripte so einzurichten , dass sie plattformübergreifend oder plattformunabhängig Wir müssen noch etwas hinzufügen, das wir tun werden. Ich werde vor Hugo klicken. Jedes Mal, wenn ich die Alt-Taste gedrückt halte , kann ich sie alle gleichzeitig bearbeiten. Ich werde Exec Bin ausführen. Exec bin, ein weiteres Paket, das wir gerade Ich werde Exec Bin anweisen, in die Knotenmodule Shinhugo zu schauen Knotenmodule Shinhugo Dann brauchen wir eine genaue Anzeige, dass Bin plattformübergreifend und plattformunabhängig ist Es wird die Datei Hugo ausführen, je nachdem, auf welchem System Sie sich befinden. Lassen Sie uns das speichern und eines unserer Skripte hier unten ausführen. Und probiere es aus. Es sieht also so aus, als ob es wirklich gut funktioniert. Es verwendet die erweiterte Hugo-Version , von der wir angefordert haben, dass sie heruntergeladen wurde. Sie können Exec-Bins sehen, in denen die ausführbare Hugo-Datei von bekannten Modulen aus ausgeführt ausführbare Hugo-Datei von bekannten Modulen aus Hugo, Hugo. Oder wenn du auf Macolinux bist, wird es nicht sein, was großartig ist. Das war's also für diese Lektion. Ich werde in der nächsten Lektion sehen, wo wir anfangen mit CSS zu bauen. Und als 7. Lektion7: In dieser Lektion importieren wir die Bootstrap-CSS-Quelldateien aus dem Bootstrap-NPN-Paket Bootstrap-CSS-Quelldateien aus dem Bootstrap-NPN-Paket Dann werden wir sie zu CSS kompilieren, damit sie in einem Browser verwendet werden können Was wir tun werden: Wenn Sie in Ihrem Layout-Ordner in den Teildateien und im Head-Teil nachschauen, werden Sie feststellen, dass das Bootstrap-CSS von einem CDN-Server oder einem Content Delivery Network abgerufen wird von einem CDN-Server oder einem Content Delivery Network abgerufen Es wird Bootstrap Version 5.1 0.3 heruntergeladen Das ist eine fehlerhafte CSS-Datei mit allen Bootstrap-Standardeinstellungen Ihre Primärfarbe wird Blau sein, Ihre Sekundärfarbe wird Grau sein Nichts wurde angepasst. Es beinhaltet alles. Das ist eine ziemlich große Datei. Wir werden das Bootstrap-CSS aus dem NPM-Paket abrufen Bootstrap-CSS aus dem NPM-Paket Und dann werden wir es in einer weiteren Lektion anpassen und auch Teile entfernen müssen wir nicht tun Was wir tun werden, ist , zur Wurzel des Projekts zurückzukehren Wurzel des Projekts Wir werden einen neuen Ordner namens Assets erstellen. Dies ist ein Ordner, mit dem Hugo arbeitet. Dann werden sie darin einen Ordner namens CSS erstellen. Sie werden dort eine Datei namens Mass erstellen. Was wir jetzt tun müssen, ist das Bootstrap-CSS aus dem MPM-Paket zu importieren Bootstrap-CSS aus dem MPM-Paket Wir werden Import ausführen und dann einen umgekehrten Comer einfügen Wir suchen nach Bootstraps. Bootstraps. Das wird relativ zum Ordner mit den Knotenmodulen sein. Stellen Sie sicher, dass Sie sich am Ende erkälten. Wir werden danach suchen. Wir gehen in den Ordner Nodemodules und dann runter zu Dann schauen wir uns das CSS an. Das ist eine Quelle, hat CSS kompiliert, was wir nicht wollen. Wir wollen die Quelle. Wir gehen in den SCSS-Ordner und Sie werden unten sehen wir eine Bootstrap-CSS-Datei haben Das werden wir aus der Datei herausholen aus der Datei herausholen All diese Dateien sind importiert , die Teile sind sofort einsatzbereit. Jetzt müssen wir Hugo so einrichten, dass es Liss verwendet, um diese SCSS-Datei auszuführen Derzeit wird mit dieser Datei eigentlich nichts passieren, sie sitzt einfach da und geht zurück zu mit dieser Datei eigentlich nichts passieren, den Head-Layouts, Partials, Head, wir kommentieren diesen Zeilensteuerungs-KC aus, um ihn auszukommentieren Wir werden es dort belassen, aber nur für den Fall, dass wir es zum Testen benötigen Später werden wir versuchen, das so einfach wie möglich zu machen. Um mit zwei K-Klammern zu beginnen , erstellen wir eine neue Variable namens CSS, weil wir sie deklarieren, müssen wir einen Doppelpunkt (Enter) verwenden Wir werden Ressourcen verwalten, Ressourcen beschaffen, uns eine Ressource schnappen Der Pfad, den wir angeben werden, bezieht sich auf den Assets-Ordner Wir gehen zurück zu unserem Assets-Ordner, Sie werden sehen, dass es Assets, SS, SS heißt. Ich gebe das in Mass ein. So greifen wir auf die Datei zu. Als Nächstes müssen wir tatsächlich kompilieren, was in dieser Datei enthalten ist. Weil der Browser, ich sage das einfach, der Browser nicht weiß, was er damit anfangen soll. Außerdem befinden sich diese Dateien im NPM-Ordner und der Browser kann nicht auf sie zugreifen. Hugo wird diese Dateien nicht bereitstellen. Wir werden sie abrufen und verarbeiten. Wir müssen es in ein Rohr stecken, das ist der Schlüssel oben. Geben Sie den umgekehrten Schrägstrich ein und drücken Sie den umgekehrten Schrägstrich um, um eine Pipe zu erhalten. Und wir werden zwei CSS ausführen. Es ist ein großes CSS, das eigenständig und ohne Optionen funktioniert. Aber es weiß nicht, wo diesen Bootstrap, den gefalteten Bootstrap, findet Es weiß nicht, dass es im Ordner mit den Knotenmodulen suchen muss im Ordner mit den Knotenmodulen suchen Die Konfiguration wird als Objekt bereitgestellt. Aber in Go und here go wird das als Diktat oder Wörterbuch bezeichnet Wir setzen einige Klammern ein, schreiben dann unser erstes Konfigurationselement um und unser erstes Element in diesem Bericht wird mit der Zeit Include-Pfade sein Wenn Sie die Include-Pfade angeben, müssen sie als Array bereitgestellt werden Der Grund dafür ist, dass Sie mehrere Include-Pfade angeben können. Ein Array ist der perfekte Weg, das zu tun. Öffnen und schließen Sie unsere Klammern und wir geben Slice ein, in Go und in Hugo Slice ist das, was Sie für Arrays verwenden, wir werden ein Element bereitstellen Es ist also ein bisschen seltsam für ein Array, aber Sie können bei Bedarf weitere hinzufügen Wir werden Node-Underscore-Module als Pfad bereitstellen Node-Underscore-Module als , der eingeschlossen werden muss Dann müssen wir einen Link für den Browser bereitstellen Wenn wir einen Link eingeben Doppelpunkt einen Link im Stil bereitstellt, werden wir diese Datei entfernen. Wir setzen unsere lockigen Zahnspangen an. Wir werden auf die CSS-Variable verweisen, die wir gerade erstellt haben, L Permalink mit Großbuchstaben R und Großbuchstaben. Dann musst du deine Beinstützen schließen. Hugo stellt einen Link zu dieser Datei bereit, die über diesen variablen Rel-Permalink generiert wurde . Relativer Permalink bedeutet, dass die Domain, ein Teil der Domain, mit diesem Link nicht enthalten ist Teil der Domain, mit Speichern wir das und schauen wir uns das an. Dann klicken wir bei gedrückter Kontrolle auf den Link und überprüfen ihn im Browser. Wir klicken mit der rechten Maustaste und prüfen. Wir werden zum Kopf gehen. Zuerst wirst du sehen, dass es einen Link zu Casmin gibt. Das ist diese Bootstrap-Datei. Das ist eigentlich, diese Datei wurde über diese Variable in eine CSS-Datei umgewandelt über diese Variable in eine CSS-Datei Wenn wir zur Registerkarte Quellen gehen und dann den SCSS-Ordner öffnen, können wir den Inhalt der gerade generierten Datei anzeigen der gerade generierten Datei Sie werden sehen, dass es ziemlich genau dasselbe ist wie das Bootstrap-CSS , das Sie vom CDN abrufen oder sogar von der Bootstrap-Website herunterladen können herunterladen Es gibt viele Vorteile. Wir können all diese Informationen und vieles mehr über Variablen ändern . Wir können auch Teile entfernen , die wir nicht wollen. Wir können sogar so weit gehen ungenutzte Teile der Datei zu entfernen , verglichen mit den Tags, die wir im HTML-Code unserer Website angefordert haben . Wenn Sie das Bootstrap-CSS so einrichten können, dass es im SCSS-Ordner Ihrer Haupt-SS angezeigt wird, können Sie mit der nächsten Lektion fortfahren 8. Lektion8: In der letzten Lektion haben wir die SCSS-Kompilierung eingerichtet. Jetzt müssen wir einige Parameter sowohl für die Produktions- als auch für die Entwicklungsumgebung erstellen , damit der CSS-Compiler unterschiedlich verhält, unabhängig davon, ob wir einen Entwicklungsserver verwenden oder eine Hugo Four-Produktion erstellen Im Bereich Ressourcen finden Sie einen Link zu dieser Seite. Es sind die Hugo-Pipes, CSS und Page, die Anzahl der Optionen, die wir beim Kompilieren übergeben können Zuerst werde ich mir den Transpiler ansehen. Standardmäßig verwendet Hugo derzeit Lipsas. Wir werden das so einrichten, dass es Hugo zwingt, Lipsas zu verwenden Nur für den Fall, dass Hugo auf Dartsas aufgerüstet wird. In Zukunft werden wir keine bahnbrechenden Änderungen mehr haben. Wir werden uns den Ausgabestil ansehen. Die Standardeinstellung ist verschachtelt, was sich hervorragend für die Entwicklung eignet Wir möchten aber auch, dass es komprimiert wird, wenn es für die Produktion verwendet wird, um die Größe zu reduzieren Wir werden uns mit der Aktivierung von Sauce-Maps für die Entwicklung befassen. Wir haben uns bereits mit Include-Teilen für Knotenmodule befasst . Lassen Sie uns zur Sache kommen. Wenn Sie in den Layout-Ordner gehen und dann den Partials-Ordner und den Html markieren, markieren Sie alles, was Sie für zwei CSS bereitgestellt haben Alle Optionen, die Sie angegeben haben, was derzeit nur die Option Include-Pass ist , markieren Sie diese und schneiden Sie sie mit Strg X oder Befehl X aus. Stattdessen geben wir eine Variable an, die wir aufrufen und die Optionen für CSS auswählt Lassen Sie uns nun diese Variable deklarieren und die Optionen erstellen, die wir in geschweifte Klammern setzen werden Wir geben opt to CSS ein, weil wir es deklarieren. Wir müssen Kohle und Wasser verwenden. Wir werden dann ein Wörterbuch erstellen , das ein Objekt für unsere Optionen ist. Der erste, den wir machen werden, ist Transpiler. Der Transpiler, den wir benutzen werden, ist Lisa. Der Grund, warum wir das festlegen, ist, dass Hugo irgendwann in der Zukunft auf Dart As umsteigen wird und wir keine bahnbrechenden Änderungen wollen Wir werden dann den Ausgabestil standardmäßig deklarieren. Ausgabestil ist verschachtelt, was sich hervorragend für die Entwicklung eignet, aber wir möchten den komprimierten Stil für die Produktion verwenden Wir prüfen derzeit unsere Produktionsoptionen. Dann haben wir unseren letzten, einschließlich Pass, den Sie einfach einfügen können, wenn Sie möchten. Das wird ein Slice sein und wir haben Node-Module. In Ordnung, das sind also unsere Produktionswerte. Sie können das dann kopieren und eine neue Zeile erstellen. Und wir werden eine if-Anweisung verwenden, wenn das If-Gleich-O-Umgebung mit einer großen E-Entwicklung Wenn wir uns in der Entwicklungsumgebung befinden, fügen wir hier ein Tag ein Wir öffnen die Tabulatortaste und fügen dann ein, was wir gerade geschrieben haben, aber Sie müssen diese Spalte entfernen. Sehr wichtig. Wir werden jetzt den komprimierten Ausgabestil entfernen , weil wir die Standardeinstellung Nested verwenden möchten Aber wir werden Quellzuordnungen aktivieren, also zum Beispiel Singular, es gibt keine Quelle am Ende, es ist nur eine Quelle mit einem auf dem Dann kartografieren Sie mit Kapital und Kapital. Wir werden die Option „Wahr“ verwenden. Sie müssen bei true keine Anführungszeichen verwenden, da es sich um einen boolischen Wert handelt Es ist entweder wahr oder falsch. Es sind keine Anführungszeichen erforderlich Speichern wir das und probieren wir es aus. Ich fange mit dem Dev-Skript an, dann steuern wir den Click und öffnen es im Browser. Dann klicken wir mit der rechten Maustaste und prüfen. Wir gehen zu Sources und öffnen CSS Mass. Wenn Sie nach unten scrollen, werden Sie sehen, dass es einen Link zu der von uns generierten Quellenkarte gibt, die sich hervorragend zum Debuggen Lassen Sie uns das Produktionsskript mitnehmen. Jetzt drücken wir C, um zu beenden, und dann Y, andernfalls kannst du das Terminal einfach aus dem Mülleimer löschen. Wir werden dann die Produktion durchführen. Dafür müssen wir den Befehl Render verwenden. Klicken Sie auf Render Production Control. Dann können Sie schreiben, klicken und prüfen, zu Quellen und dann zu CSS und vielleicht nicht zu CSS gehen. Sie werden sehen, dass es minimiert oder komprimiert wurde. Also müssen wir alle Leerzeichen entfernen. Es ist in einer großen langen Schlange. Wenn Sie bis zum Ende sind, gibt es keinen Link zu einer Quellenkarte, was sich hervorragend für die Produktion eignet. Das wollen wir nicht. Es wurden zusätzliche Dateien geschrieben, und Quellzuordnungen sind für die Produktion nicht wirklich nützlich. Außerdem bedeutet das, dass Allah sich nicht einschleichen und genau sehen kann , wie unser Code geschrieben wird Es macht es für andere Leute etwas schwieriger , unseren Code auseinanderzunehmen, aber es ist nicht unmöglich, wenn Sie die Entwicklungs- und Produktionsskripte zum Laufen bringen können die Entwicklungs- und Produktionsskripte zum und Sie haben Munification, Sie haben keine Quellzuordnungen Ihrer Produktion, in Ihrer Sie haben keinen vereinheitlichten Code und Sie haben eine Quellenkarte. Sie sind bereit, mit dem nächsten Schritt fortzufahren werden wir in der nächsten Lektion sehen. 9. Lektion9: In dieser Lektion werden wir die CSS-Ausgabe mit einem Fingerabdruck versehen Wir werden eine Prüfsumme, einen Hash, auf die Datei anwenden einen Hash, auf die Datei Das bedeutet, dass jedes Mal, wenn wir die Datei aktualisieren , der Browser zur neuesten Form dieser Datei weitergeleitet der Browser zur neuesten Form dieser Datei Es wird keine Verwechselung wenn der Browser alte Versionen der Datei zwischenspeichert Sie können Fingerabdrücke auch aus Sicherheitsgründen verwenden, aber wir werden in diesem Kurs nicht näher auf die Implementierung Ihr letzter Link zu dieser Seite finden Sie im Abschnitt Ressourcen auf der Hugo Pipes-Seite für Fingerabdrücke und Nun, wenn Sie den Fingerabdruck ausschließlich zum Busting verwenden um sicherzustellen, dass die aktuellste Version der Datei vom Browser angefordert wird Wenn Sie ständig neue Versionen der Seite entwickeln und sicherstellen möchten, dass der Browser nach der neuesten Version sucht, sollten Sie wahrscheinlich MD five verwenden Md Five wird etwas kürzer sein. Wenn Sie jedoch versuchen, Ihre Website mit CSP zu sichern, worauf ich in diesem Kurs nicht eingehen werde, sollten in diesem Kurs nicht eingehen werde, Sie möglicherweise eine Verschlüsselung auf hohem Niveau wie S HA 384 verwenden wie S HA 384 Lassen Sie uns zur Sache kommen. Wir werden diesen Prozess hier in unserem Projekt in unserer Zeile mit der CSS-Variablen durchgehen . Wir verwenden Ressourcen , um die Datei aus dem Ressourcenordner zu holen. Wir lassen es dann durch zwei CSS laufen, um es zu verarbeiten. Wir werden dann einen weiteren Befehl ausführen. Anstatt die Pipe mit Shift-Back weiterzuleiten, lautet der Befehl Fingerprint. Die Option, die wir verwenden werden, ist MD Five. Und das bedeutet, den Dateinamen etwas kürzer zu halten, da am Ende des Dateinamens ein Hash verwendet wird. Wenn Sie CSP aus Sicherheitsgründen verwenden, möchten Sie MD Five möglicherweise nicht verwenden, Sie können es einfach auf der Standardeinstellung belassen In diesem Fall würden Sie das einfach ganz loswerden. Wir werden MD Five verwenden , nur um unseren Dateinamen kurz zu halten. Wir werden dann hier unten in unser Etikett einsteigen. Der durch einen Fingerabdruck generierte Dateiname wird automatisch in den Link übernommen. Aus Gründen der Integrität müssen wir dafür ein Integritäts-Tag einfügen . Wir werden einige geschweifte Klammern verwenden und es wird CSS sein, was dieselbe Variable ist, die für unseren Dateilink verwendet wird, aber es werden Daten mit einer Großbuchstaben D-Integrität sein Dann machen wir ein Leerzeichen und schließen unsere Ur-Klammern. Wir speichern das und schauen uns das an. Wenn wir uns dann die Quelle ansehen und zum Link gehen, werden Sie feststellen, dass sich die Dateinamen geändert haben. Es hat den ersten Hauptteil, aber dann haben sie einen Hash hinzugefügt, der ein MD Five ist. Hat dann im Integritäts-Tag MD 5 und es hat einen Schlüssel, mit dem überprüft werden kann, ob es sich tatsächlich um die richtige Datei handelt, aber wir werden nicht CSP verwenden und darauf eingehen, wie man das mit Hittern konfiguriert, weil das ein ganz anderes Thema ist Wenn Sie in der Lage waren, eine Hash-Datei und Ihr Integritäts-Tag zu generieren, können Sie mit der nächsten Lektion fortfahren 10. Lektion10: Jetzt werden wir zwei weitere NPM-Pakete installieren, nämlich Post-CSS und Autoprefixer Autoprefixer Der Grund, warum wir sie verwenden, ist, dass sie keine Präfixe für ältere Browser bereitstellen, wenn Sie die Bootstrap-CSS-Quelle aus ihrem NPM-Paket ausführen keine Das macht Bootstrap, wenn sie ihre vorkompilierte CSS-Quelle anbieten Wir werden genau den gleichen Vorgang durchführen , sodass die Datei, die wir ausgeben, dieselbe Kompatibilität mit älteren Browsern hat wie das vorkompilierte CSS von Bootstrap Wenn Sie sich also die Bootstrap-Dokumentationsseite für Bill Tools ansehen, geht es eher darum, eine Version der CSS-Datei zu erstellen , die genau ihrer entspricht, aber sie verwenden SAS zum Kompilieren, was wir Dann werden sie Autoprefixer ausführen. Was wir tun werden, wir werden die Bootstrap-Browserlistendatei kopieren , sodass wir genau dieselben Browser unterstützen , die Bootstrap unterstützt , wenn Sie ihre Standard-CSS-Datei von ihrer Website herunterladen Standard-CSS-Datei Bevor wir uns ansehen, wie Post-CSS und Auto-Präfix implementiert Wir benötigen also eine Datei, um zu definieren, auf welche Browser wir in Bezug auf Präfixe abzielen Bevor wir fortfahren, gehen wir zur Github-Seite von Bootstrap Sie können das finden, indem Sie im Bereich Ressourcen nach dem Link suchen im Bereich Ressourcen nach dem Link Oder Sie können eine Google-Suche nach Bootstrap Github durchführen. Gehen Sie zur Seite, scrollen Sie dann nach unten und suchen Sie nach Browserliste Punkt Browserliste Punkt Der einfachste Weg, daran heranzukommen, besteht darin , einfach den Inhalt dieser Datei zu kopieren, dann in das Stammverzeichnis Ihres Projekts zu gehen, eine neue Datei mit dem Aufruf der Browserliste R zu erstellen und dann in diese Datei die Informationen von der Bootstrap Skew Hub-Seite einzufügen Diese Datei teilt Autoprefixer mit, welche Präfixe erstellt werden Autoprefixer mit, welche Präfixe erstellt Viele ältere Browser benötigen unterschiedliche Präfixe für die CSS-Klassen, was bei modernen nicht so üblich ist Indem wir definieren, auf welche Browser wir abzielen, verwenden wir die Standardliste von Bootstrap Hier vermeiden wir, zu viele Klassen hinzuzufügen. Zum Beispiel werden wir keine Internet Explorer-Präfixe bereitstellen Wir sind wieder auf der Hugo-Seite unter Hugo-Teile für Post-CSS Im Bereich Ressourcen finden Sie einen Link dazu Wenn Sie sich schnell durchlesen, werden Sie feststellen, dass Sie Post-SS-CLI und auch Post-CSS und auch Post-CSS und Autoprefixer benötigen Jetzt schlägt Hugo vor, dass Sie sie global installieren. Ich empfehle Ihnen, sie in der Umgebung zu installieren. Wir gehen zurück und fügen weitere NPM-Pakete hinzu , öffnen ein neues Terminal führen dann NPM install aus Zuerst war Post-CSS, dann Post-CSS-CLI und dann Autoprefixer Wir haben drei Pakete angefordert, 39 wurden installiert, weil es viele Abhängigkeiten gibt Wir haben drei Pakete angefordert. 54 wurden installiert , weil es viele Abhängigkeiten gibt. Wenn du dein Paket Jason öffnest, wirst du sehen, dass wir unsere Abhängigkeiten hier aufgelistet haben und sie hinzugefügt wurden. dann die Dokumente durchlesen, werden Sie feststellen, dass wir die Ressourcen postSS verwenden müssen Dafür gibt es eine Abkürzung, aber Sie können den Teil Ressourcen entfernen und dann den Teil in Kleinbuchstaben schreiben Lass uns das mal ausprobieren. Gehe zu Layouts, Teilbildern und Kopf. Dann fügen wir am Ende unserer CSS-Zeichenfolge kurz vor dem Fingerabdruck, , kurz vor dem Fingerabdruck, eine weitere Pipe ein Und dann werden wir Beiträge für unsere Optionen erstellen. Wir gehen zurück zum Arzt. Wir müssen jetzt eine Konfigurationsdatei für Post-CSS erstellen. Post-CSS sucht automatisch im Stammverzeichnis des Projekts nach dieser Konfigurationsdatei. Wir erstellen eine Datei im Stammverzeichnis des Projekts und nennen sie Post Css Config. Erstes müssen wir Plug-In portieren, wir werden Constant autoprefixer equals require open klammer, zwei Anführungszeichen ausführen und Autoprefixer setzt tatsächlich ein Semikolon ans Ende Als Erstes müssen wir Autoprefixer als Plug-In portieren, wir werden Constant autoprefixer equals require open klammer, zwei Anführungszeichen ausführen und Autoprefixer setzt tatsächlich ein Semikolon ans Ende. Dann müssen wir Exporte ausführen. Wir machen Modulexporte, die einer offenen Klammer entsprechen. Wir deklarieren die Plug-ins als Doppelpunkt und machen eine eckige Klammer Hier fängt es an, knifflig zu werden. wir zu unserem Hugo-Skript zurückkehren, werden wir feststellen, dass Post-CSS ständig ausgeführt wird, sowohl in der Entwicklung als auch in der Produktion. Der einfachste Weg, es so einzustellen, dass es nur in der Produktion läuft, ist nicht über diesen Teil hier in Hugo, sondern über JS. Es ist viel einfacher, es zum Testen zu überschreiben. Sie werden sehen, dass wir auf die Hugo-Umgebung zugreifen können . Gehen wir zurück. Wir greifen mit Prozessen auf die Umgebung von Hugo zu. Dies ist eine Umgebung mit Hugo-Unterstrichen in Großbuchstaben. Wir suchen nach drei Gleichwertigen für eine exakte Nachbildung dessen, was geschrieben wurde Und das ist Entwicklung. Es gibt eine, vielleicht haben Sie ein paar verschiedene Produktionsumgebungen. Wenn es um Entwicklung geht, haben Sie wahrscheinlich nur die eine, wenn Sie mit dem Library-Load-Server testen . Dann setzen wir ein Fragezeichen. Wenn es sich um Entwicklung handelt, werden wir Null zurückgeben, aber tatsächlich werden wir einige Arrays zurückgeben Wir setzen Null in einige eckige Klammern. Die nächste Zeile werden wir in eine Spalte einfügen. Und das alles kann in einer Zeile gemacht werden, aber wir trennen es, um es in dieser Zeile einfacher zu machen. Das sind die Plug-ins, die laufen, wenn es nicht um die Entwicklung geht. Wir werden Autoprefixer zurückgeben und in der nächsten Lektion ein weiteres Plug-In hinzufügen Da wir die Werte , die als Arrays zurückgegeben werden, angegeben haben , benötigen wir die einzelnen Zeichenketten, nicht das Zeichenketten-Array nicht das Um die Zeichenketten aus den Arrays zu extrahieren, wurden sie drei Punkten versehen, dem Anfang dieser Zeile Und wenn diese Zeile dann ausgeführt wird, wird entweder das Array mit Null im Inneren versehen oder es wird das Array mit einem automatischen Präfixer versehen Wir werden dieses Array aufgrund der drei Punkte in einzelne Zeichenketten zerlegen aufgrund der drei Punkte in einzelne Zeichenketten Es sollte funktionieren. Das speichern wir. Wir werden den Dev-Server laufen lassen ihn mit dem ursprünglichen Dev-Server testen. Prüfen Sie zunächst, wie viele Präfixe derzeit vorhanden sind. Und das sind Präfixe, die in Bootstrap integriert sind. Das ist Teil der normalisierten Punkte. Wir werden den Dev-Server ausführen und kontrollieren, ob Sie durch Klicken auf den Link die Aktualisierung Nach dem Neuladen wird der Server beim ersten Laden nicht automatisch aktualisiert Überprüfen Sie dann Ihre Quellen. Gehe zu CSS und Main. Und wir werden eine Kontrollsuche nach dem Webkit durchführen. Sie werden sehen, dass 40 anwesend sind. Diese werden standardmäßig mit normalisiertem CSS geliefert. Normalisiertes CSS ist eine HTML-Datei, die so geschrieben wurde , dass alle Elemente in vielen verschiedenen Browsern gleich aussehen Normalisiertes CSS überschreibt die Browser-Standardeinstellungen so, dass alle Browser einigermaßen gleich aussehen Bootstraps verwenden das, und sie haben auch ein bisschen daran gearbeitet Und sie haben es als Teil von Bootstrap aufgenommen. Das ist es, woraus diese 40 Webkit-Klassen stammen. Lassen Sie uns diesen Prozess jetzt beenden. Wir werden die Renderproduktion durchführen. Das ist in einer Produktionsumgebung , die nachahmt, was passiert, wenn Sie bauen Sie werden sehen, dass es sich bei ihrer Umgebung um eine Produktionsumgebung handelt. Lassen Sie uns das kontrollieren, klicken Sie auf den Link. Dann gehen wir zu Sources und CSS und Main und wir machen Control und Webkit Sie werden die 99 Klassen sehen, die dort anwesend sind. Auto Prefix hat diese 99 Klassen basierend auf der Listendatei des Browsers hinzugefügt . Wenn Sie direkt im Stammverzeichnis nachschauen, werden Sie sehen, dass B-Browser RC auflisten , die auf den von Bootstrap angegebenen Browsern basieren Es handelt sich dabei um die Web-IT-Präfixe , die für die Browser erforderlich sind , die älteren Browser in dieser Liste sein werden , im Allgemeinen nicht die neueren Sie können diese Liste ändern, wenn Sie mehr ältere Browser als die hier aufgeführten angeben . Sie werden mehr Präfixe erhalten. Es gibt jedoch einige CSS-Attribute , die in der aktuellen Version von Bootstrap, Bootstrap Five, verwendet wurden und die auch mit Präfixen in älteren Browsern nicht funktionieren. Sie müssen vorsichtig Diese Datei erzeugt eine CSS-Datei, die Seien Sie vorsichtig, treiben Sie die Dinge nicht zu weit, sonst erhalten Sie hier später möglicherweise keine Ergebnisse. Wenn Sie in der Produktionsumgebung eine CSS-Datei mit etwa 99 Präfixen erstellen können , können Sie Ihre Entwicklungsumgebung, den Dev-Server, ausführen und Sie haben 40 Das bedeutet, dass Sie Autoprefixer korrekt verwenden und bereit sind, mit der nächsten Lektion fortzufahren bereit Ich sehe mir die nächste Lektion an. 11. Lektion11: Jetzt haben wir Hugo so eingerichtet, dass es die Bootstrap-CSS-Quelle in eine CSS-Datei kompiliert , die dieselben Spezifikationen erfüllt wie die verfügbare CSS-Datei von Bootstrap, die auf ihrer Website heruntergeladen Wir werden jetzt ein Paket namens CSS verwenden, um ungenutzte CSS-Klassen zu entfernen Um die Größe der Datei zu reduzieren, müssen wir das Programm Purge CSS installieren Wenn Sie nach NPM suchen und CSS löschen, kommen Sie hier auf diese Seite, die mit NPM oder NPM install und dann per CSS installiert wird mit NPM oder NPM install und dann per CSS installiert Aber lassen Sie sich nicht verwirren, denn dieses spezielle Paket funktioniert nicht mit Post-CSS Was Sie benötigen, ist das folgende Plug-In und ich werde den Befehl dafür in den Ressourcenbereich für diese Lektion einfügen den Befehl dafür . Dies ist eine Version von Per CSS, die als Plug-In für Post-CSS funktioniert. Sobald wir es installiert haben, können wir es mit diesem Javascript-Code hier ausführen . Lassen Sie uns weitermachen und diesen Befehl kopieren und einfügen, und wir werden ihn in unserem Projekt ausführen. Wir werden ein neues Terminal öffnen. Wir fügen den Code ein, der installiert ist. Lassen Sie uns nun weitermachen und den Code in unsere Post-CSS-Konfigurationsdatei schreiben in unsere Post-CSS-Konfigurationsdatei Wir beginnen hier mit diesem Text, wir werden ihn kopieren. Dann fügen wir diesen Text unter der automatischen Präfixausrichtung oben auf der Seite ein. Um die Dinge hier unten einfacher zu halten, haben wir, wie Sie gesehen haben, die offenen und schließenden Klammern kopiert und eingefügt , um das automatische Präfix auszuführen Um das obere Ende dort einzustecken , wo es definiert wird. Das machen wir auch für PerGSS. Was wir tun müssen, ist diese Zeile und die zugehörigen Klammern komplett zu entfernen und die zugehörigen Und dann werden wir das Wort per CSS loswerden . Wir werden das ansprechen. Wir können Alt-Shift verwenden , um alles neu zu formatieren , was sehr neu aussieht. Wir geben dann die Quelle in eine neue Zeile. Und wir werden diese schließende eckige Klammer auch in eine neue Zeile einfügen. Wir ändern den Quellordner auf Layouts. Dort lebt unser HTML-Code. Der Doppelstern bezieht sich auf einen beliebigen Ordner in Layouts, oder es kann sich sogar um keinen Ordner in Layouts handeln. Wenn wir keine neuen Ordner haben, machen Sie ein Komma und eine neue Zeile und wir setzen einige Anführungszeichen ein und wir machen Inhaltsstern, Stern, Stern, Dod Das bezieht sich auf alle Markdown-Dateien, unabhängig davon , ob sie sich in einem Ordner oder nicht im Inhalt befinden Jetzt werden nur noch HTML-CSS-Klassen für Poss bereitgestellt , die explizit über HTML-Tags in Markdown geschrieben wurden in Markdown geschrieben It's Pss wird nichts über HTML-Tags wissen, die Jetzt, wo wir das eingerichtet haben, können wir dorthin gehen Da steht Autoprefixer. Wir setzen ein Komma ein und dann führen wir die Säuberung durch. Die CSS-Konstante, auf die wieder hier oben verwiesen wird. Wir ziehen den Stecker rein und lassen ihn dann mit diesen Einstellungen laufen . Lass uns das versuchen. Wir speichern unsere Konfiguration. Wir müssen das Produkt ausführen und die Produktion rendern, um zu überprüfen, ob es funktioniert. Dann kontrollieren wir, klicken Sie auf den Link oder öffnen Ihren Browser. Wenn Sie es bereits ausgeführt haben, aktualisieren Sie Ihre Seite, wir klicken mit der rechten Maustaste und wir werden es überprüfen. Dann gehen wir zu den drei Punkten über. Und wir werden zu mehr Tools wechseln. Und wir werden die Berichterstattung überprüfen. Die Berichterstattung wird unten angezeigt. Du musst nachladen. Sie können Strg-R oder Befehl R ausführen, oder Sie können auf die Schaltfläche Reload dann Ihre Site neu laden Und es verfolgt wie viele Ressourcen genutzt wurden Zum Beispiel die Javascript-Datei, 65% der Bootstrap-Javascript-Datei sind unbenutzt Sie können das Laden der Bibliothek ignorieren, da es von Hugo ist. Aber die Haupt-SS, so heißt es, sind 47% unbenutzt. Lass uns in einer Minute einen Check machen. Wir vergleichen das mit dem Dev-Skript , in dem keines dieser Plug-ins läuft. Aber wir werden kurz überprüfen, ob alle Seiten funktionieren. Bevor wir fortfahren, sind wir auf unser erstes Problem gestoßen, nämlich die Seitennummerierung Seitennummerierung wurde nicht über die HTML-Datei bereitgestellt, sondern über eine integrierte Hugo-Vorlage Kehren wir schnell zum Projekt zurück und schauen wir uns das an Eine kurze Zusammenfassung, falls Sie den letzten Kurs gemacht haben, damit Sie genau sehen können, wie das funktioniert Wenn Sie zu Layouts und Standard wechseln, dann listen Sie Html auf. Sie werden unten sehen, dass wir Hugos interne Paginierungsvorlage verwenden Gehen Sie zurück zur Website und wir überprüfen. Und wir schauen uns an, welche Klassen verwendet werden. Wir werden tatsächlich mit der rechten Maustaste auf die kaputte Navigation klicken und sie überprüfen. Wir haben ein paar Kurse. Wir haben Seitennummerierung, Standardseitenelement deaktiviert, Seitenelement aktiv Und dann haben wir einen Seitenlink , der für jeden bereitgestellten Link gilt Gehen wir nun zurück zum Löschen von CSS, der Konfiguration, und richten es so ein, dass es diese CSS-Klassen auf die weiße Liste Wenn du zur Seite mit den Pss-Docs gehst, CSS.com bereinigst und den Link im Bereich Ressourcen öffnest, gehen wir zur sicheren Liste über Sie werden sehen, dass wir diese Informationen auf verschiedene Weise bereitstellen können , um CSS zu löschen Es gibt eine Standardliste für sichere Klassen , in die Sie eine Liste von Klassen einfügen können , oder wir können Ihnen Standardformulare zur Verfügung stellen , die tiefgründig und gierig Hier gibt es einige Beispiele. Wenn Sie sich Greedy ansehen, ist das für uns sehr nützlich, da es den von Ihnen bereitgestellten Text verwendet Es wird auch Klassen auf beiden Seiten geben. diesen Beispielen wird der Text am Ende des Kurses verwendet. Wenn wir das Dollarzeichen loswerden und eine Karotte , also Schicht sechs, den Anfang, verwenden wir den Text am Anfang der Zeichenfolge und das sind Rejx-Befehle Gehen wir in unsere Konfiguration und wir richten das ein, kopieren und fügen diese Konfiguration für die sichere Liste Wir gehen zurück zu unseren Projekten und richten es ein. Wir setzen am Ende des Inhaltsbereichs ein Komma. Wir fügen ein, was wir aus den Dokumenten haben löschen, was in Deep und Standard und auch in Greedy enthalten ist Deep und Standard und auch in Greedy Vorerst werden wir Standard und Deep auskommentieren , weil wir sie nicht verwenden werden Lassen Sie uns einfach eine kurze Liste aller Klassen schreiben , auf die wir abzielen möchten. Das sind alle unsere Klassen. Lass uns ein paar Ablehnungen schreiben. Wir beginnen mit den ersten beiden. Wenn wir einen Schrägstrich und dann eine Karotte machen , also Schicht sechs und dann Seitennummerierung, wird auch die Standardpaginierung übernommen Dann setzen wir das in eine neue Zeile um das Lesen etwas einfacher zu machen Setzen Sie einen letzten Schrägstrich und dann ein Komma für unsere nächste abgelehnte Karotte Carrot ordnet diesen Text dem Anfang der Zeichenfolge zu. Es wird mit nichts vor dem Wort Paginierung übereinstimmen, aber es wird mit Dingen danach übereinstimmen weil wir greedy verwenden Sie finden dann hier unten die Seite, auf der all diese Kurse aufgeführt sind Lass uns unsere Notizen löschen. Wir speichern das, wir werden die Seite überprüfen. Es sieht toll aus. Wir haben unsere deaktivierten Links zu vorherigen Seiten auf der ersten Seite, die deaktiviert ist, weil wir uns bereits auf der ersten Seite befinden. Wir haben die aktuelle Seite , die blau hervorgehoben ist. Wir haben die zweite Seite und wir haben dort die Links zur nächsten Seite und zur letzten Seite , die alle funktionieren. Großartig. Lassen Sie uns jetzt einen kurzen Vergleich durchführen, um zu sehen, wie viel Dateigröße wir wirklich gespeichert haben. Was wir tun werden, ist das Löschen von CSS zu deaktivieren. Ich setze es in eine eigene Zeile, und dann kommentiere ich es mit einem Doppelzeichen aus und speichere das Dann kehren wir zum Browser zurück und überprüfen und aktualisieren. Ich sehe 165 Kilobyte und davon sind 96% ungenutzt. Dann werde ich Purge CSS wieder aktivieren. Wir aktualisieren mit Control oder dem Befehl R, wir haben 13 Kilobyte und nur Das ist eine ziemlich große Reduzierung, wenn Sie es bis zu diesem Punkt geschafft haben , in dem Sie die Option pro CSS aktiviert und Ihre Dateigröße erheblich reduziert haben Ihre Dateigröße erheblich reduziert Im Bereich „Abdeckung“ haben Sie einen viel kleineren Prozentsatz, der ungenutzt ist, und Sie haben es geschafft, ungenutzt ist, und Sie haben Ihre Seitennummerierung zum Laufen zu bringen Sie sind bereit, mit der nächsten Lektion fortzufahren. Siehst du da. 12. Lektion12: Nachdem wir unseren Code für die Kompilierung der SCSS-Quelle fertig geschrieben haben, verschieben wir das gesamte Skript in ein Teilskript , sodass es erneut für den Import anderer SCSS-Dateien verwendet werden kann für den Import anderer SCSS-Dateien verwendet Auf diese Weise müssen wir unseren Code nicht kopieren und einfügen. Wir können den Teil einfach mehrmals mit unterschiedlichen Parametern aufrufen . Das erste, was wir tun müssen, um unser Partial zu erstellen , ist es in den Kopf zu stecken und den Code zu finden , den wir verschieben möchten. Dieser ganze Abschnitt hier wird in einen Teil verschoben. Wir schneiden den Code ab und gehen dann zurück in unseren Partials-Ordner. Wir werden eine neue Datei erstellen Wir nennen es lib sa hl. Der Grund, warum ich es libsas nenne, ist, dass wir in unserer Konfiguration Hugo Che Lipsas erzwingen , was derzeit die Standardeinstellung ist Aber das kann sich ändern und wir wollen keine grundlegenden Änderungen. Das speichern wir hier. Wir haben es auf die Datei abgesehen. Ich markiere das und drücke oder befehlen X, um es auszuschneiden und durch einen Punkt zu ersetzen. Und wir werden die Datei speichern. Dann richten wir unser Partial ein und rufen es auf, sodass die Datei, die wir abrufen möchten, der Kontext des Partial ist. Wir kehren zu unserem Kopf zurück, setzen die beiden Klammern und führen die Funktion mit dem Namen partial aus. Der Teil wird, da Sie kein HTML eingeben müssen, nach den libsas stehen, normalerweise würden Sie für einen Teil einen Punkt setzen. Sie stellen dem Teil den gesamten Kontext Ihres Hugo-Projekts zur Aber in diesem Fall werden wir den Namen der Datei einfügen. Jetzt wollten wir zum Beispiel eine Vendors CS-Datei erstellen. Wir gehen zurück zu unseren Assets und CSS und erstellen eine neue Datei, wir Vendors nennen. Dann ist es so einfach, einen neuen Teil zu erstellen. Wir könnten das sogar kopieren und einfügen. Wir werden das CSS von Main auf Vendor-CSS umstellen. Nehmen wir an, wir würden einige Plug-ins von Drittanbietern einbauen. Wir könnten ihren Code in der Herstellerdatei ausführen wenn wir ihn aufteilen und die Dateigröße gering halten wollen um unsere Seitenladezeit zu verringern , da Dateien gleichzeitig geladen werden. Das ist vorerst eine großartige Möglichkeit, das zu tun. Das werde ich kommentieren. Um Hugo-Tags zu kommentieren, geben wir Schrägstrich und dann einen Sternstrich Weil ich diese Datei derzeit nicht verwende. Lass es uns ausführen und überprüfen, ob es funktioniert. Es sieht so aus, als ob es gut funktioniert. Geh einfach und überprüfe unsere Quellen. Alles wird immer noch so reingezogen, wie wir es uns gewünscht haben. Wenn Sie es geschafft haben , das CSS auch nach dem Platzieren Ihres Codes in einen Teil zu generieren , können Sie mit der nächsten Lektion fortfahren . 13. Lektion13: Damit beenden wir den Umgang mit den NPM-Paketen und dem Skript Wir werden uns jetzt ansehen, wie wir nur die Teile der Bootstrap-Quelle importieren können, die wir benötigen Dies wird die Dateigröße erheblich reduzieren und ist in mancher Hinsicht besser als Perd CSS Aber es gibt offensichtlich Dinge, die Perd CSS tut, die Sie durch selektives Importieren nicht tun können Ich werde diese Lektion auf der Bootstrap Five Docs-Website beginnen der Bootstrap Five Docs-Website und den Link für diese spezielle Seite einfügen Im Bereich Ressourcen werden wir Sas anpassen Wir haben unser Projekt derzeit so eingerichtet dass es das gesamte Bootstrap-Projekt importiert, aber der Schwerpunkt dieser Lektion liegt auf der Erstellung eines schlanken Imports Wir importieren nur die Teile von Bootstrap, die wir für unsere Website benötigen Das ist Option A. Wir werden uns Option B ansehen. Und so schließen wir nur Teile von Bootstrap Sie werden hier sehen, dass sie es in Teile aufgeteilt haben. Aber wenn Sie den Text sehr sorgfältig lesen, müssen Sie tatsächlich alles aufnehmen, was Sie wollen Und sie nehmen nur Teile davon hier für dich auf. Was wir tun werden, wir werden uns mit dem Bootstrap-Paket befassen und uns all die verschiedenen Teile ansehen, die importiert werden Und richten Sie unsere eigene Haupt-SS-Datei , um nur die Teile von Bootstrap zu importieren, die wir benötigen Wir beginnen damit, alles, was hier ist, zu kopieren und alles, was hier ist, zu kopieren Dann öffnen wir den Assets-Ordner und CSS und das Haupt-CSS Und Sie werden sehen, dass wir ursprünglich das gesamte Bootstrap-Projekt importieren Wir werden das vorerst nur kommentieren, da es eine gute Referenz Dann fügen wir den Text ein , den wir gerade von der Bootstrap-Website kopiert Schauen Sie sich die obige Referenz an, Sie werden sehen, dass wir Bootstraps haben Bootstraps hier. In den angegebenen Beispielen haben Sie Knotenmodule Wir müssen diesen Teil der Knotenmodule zu Beginn entfernen Sie können sie alle auf einmal machen, indem Sie es markieren und dann mit der rechten Maustaste klicken und alle Vorkommen ändern. Und das entfernen wir , es ist einsatzbereit. Wir haben jedoch noch nicht alle Bootstrap-Komponenten aufgenommen alle Bootstrap-Komponenten Wir speichern unsere Datei und schauen uns dann an, was Bootstrap in ihren Projekten hat Wir werden die Node-Module öffnen, ein paar durchschauen und Bootstrap finden Wir suchen in den CSS-Ordnern wie hier. Bootstrapss navigiert nicht zu dieser Originaldatei , Bootstrapss. Das sind ein paar andere Dateien. Wir haben Utilities, Reboot und Grid drin. Optionale Importe. Leute, die nicht die gesamte Bootstrap-Bibliothek verwenden möchten Sie werden wahrscheinlich einfach zum Beispiel das Grid oder den Neustart importieren zum Beispiel das Grid oder den Neustart Wenn wir hier suchen, werden Sie alle Komponenten sehen. Wir werden all diese hervorheben. Kopiere sie. Dann schließen wir den Ordner Node Modules , weil er immer groß und sperrig Gehen Sie wieder rein und wir fügen sie unten ein. Und dann werden wir herausfinden, was wir haben und was nicht. Wir haben oben Funktionen, mit denen wir das entfernen können. Wir haben Variablen und Mixins. Wir haben noch keine Hilfsprogramme, dann alles bis auf den Grund. Wir haben sie nicht importiert. Wir haben jetzt ein kleines Problem. Das heißt, wir müssen den Pfad einrichten, da diese Links derzeit relativ zum Bootstrap-Ordner im Knotenmodulordner sind , wohingegen unsere Importlinks hier relativ zu unserer Datei sind Was wir tun werden, ist, all diese hervorzuheben. Schneiden Sie sie aus und dann fügen wir sie hier ein. Wir müssen den ersten Teil der URL hervorheben. Halten Sie dann die alte Taste gedrückt und klicken Sie auf den Start dieser Importe und fügen Sie sie ein. Eine andere Möglichkeit , dies zu tun, besteht darin , dort alles hervorzuheben, nur die, die Sie nicht haben, die vollständige URL und sie ausschneiden. Erstellen Sie eine neue Datei, fügen Sie sie dort ein, gehen Sie zurück und markieren Sie den Teil, den Sie hinzufügen möchten. Kopiere es. Dann könnten Sie diesen Teil des Codes markieren, mit der rechten Maustaste klicken und alle Vorkommen ändern. Benutze deine Pfeiltaste und füge es ein. Das spart dir viel Zeit. Dann schneiden wir das. Schließ die Datei. Und füge es ein. Wir sind fast da. Als Nächstes müssen wir eine Datei für die standardmäßigen Variablenüberschreibungen und eine Datei für zusätzlichen benutzerdefinierten Code erstellen Wir gehen zurück in unseren SCSS-Ordner und erstellen eine neue Jetzt verwenden wir Unterstriche für Dateien, die nicht direkt importiert werden sollen verwenden wir Unterstriche für Dateien, die nicht direkt importiert Wir werden benutzerdefinierte Variablen, CSS und benutzerdefiniertes CSS unterstreichen Dann kehren wir zu unserem Hauptmenü zurück und fügen einen Importlink hinzu Sie brauchen den Unterstrich nicht, wenn Sie einen Import ausführen. Wir werden Variablen verwenden, Sie benötigen das CSS nicht Das wird automatisch gelöst. Wir müssen den Doppelpunkt ans Ende setzen. Dann scrollen wir nach unten. Schritt fünf, wir werden einen Import durchführen und es wird benutzerdefiniertes CSS sein. Ich werde eine Spalte einfügen und einfach den Namen der Datei korrigieren , der mit einem Unterstrich endete Ordnung. Wir werden sagen , wir werden es ausführen, wir werden überprüfen, ob alles funktioniert. Und dann gehen wir zurück und fangen an, einige Teile von Bootstrap zu deaktivieren , um es schlanker zu machen und wirklich die Teile zu importieren, die wir benötigen Dies ist jedoch nicht so gut wie der vorherige Schritt. Wir haben CSS gelöscht Man muss beide Dinge zusammen ausführen , um wirklich eine kleine Datei zu bekommen Wir werden das Dev-Skript ausführen. Die Seite funktioniert immer noch. Schauen Sie es sich schnell an, wir können sehen, dass wir die Navbar-Bilderkarten haben , wir haben die Seitennummerierung Dies sind einige der Dinge, die wir sicherstellen müssen, dass wir sie nicht entfernen Gehen wir unsere Liste durch. Wir können keines der Konfigurationselemente entfernen, in ein bis vier Fällen können wir uns hinsetzen, um die Komponenten durchzugehen. Höchstwahrscheinlich benötigen Sie Root und Reboot. Geben Sie Bilder, Container und Grid ein, wir verwenden keine Tabellen, das können wir auskommentieren. Sie können tatsächlich ein paar Dinge hervorheben. Neues Steuerelement K C oder Befehl C im VS-Code. Wir brauchen Knöpfe. Wir werden Übergänge und Dropdowns hervorheben. Button-Gruppe, wir benötigen Navb, Navbar und Karte. Wir benutzen kein Akkordeon oder Semmelbrösel. Kontrolliere KC, um diese zu kommentieren, wir machen Alarm oder Fortschrittsgruppe, schließen, toasten, modaler Tooltip, Pop-Over-Karussell, wir machen Alarm oder Fortschrittsgruppe, schließen, toasten, modaler Tooltip, Pop-Over-Karussell, Drehfelder von der Leinwand oder Platzhalter kontrollieren Wir werden die Helfers-API dort behalten. Wir speichern das und schauen uns unsere Seite an. Sie müssen Ihre gesamte Website sehr sorgfältig durchgehen und sicherstellen, dass das CSS für Ihre Website nicht durch das, was Sie gerade getan haben, beschädigt wurde . Es ist ein ziemlich arbeitsintensiver Prozess, aber jedes Mal, wenn Sie die CSS-Importe einschränken oder die CSS-Konfiguration ändern oder löschen, ist es wirklich wichtig, dass Sie noch einmal überprüfen, ob Sie die Website nicht beschädigt haben, alles sieht gut Wenn Sie es geschafft haben, Ihren Bootstrap-CSS-Import auf nur wenige Komponenten zu reduzieren , die Sie benötigen und Sie das CSS für Ihre Website nicht beschädigt haben, sind Sie bereit, mit dem nächsten Schritt fortzufahren und Sie kommen mit dem Projekt wirklich gut zurecht. 14. Lektion14: Wir werden uns nun damit befassen, die ausgegebene Bootstrap-CSS-Datei so anzupassen die ausgegebene Bootstrap-CSS-Datei , dass sie Dinge wie Farben, Größen und Stilschatten enthält, die dem Aussehen unserer Website entsprechen Standardmäßig ist Bootstrap ziemlich generisch, und es gibt viele Websites, die die verwenden Wir möchten diese ändern, ohne jedoch zusätzliches CSS zu erstellen, das letztendlich größere Dateien für Ihre Wir werden die Bootstrap-Quelle tatsächlich so ändern , dass die Ausgabe anders ist Aber wir tun es, ohne die Dateien im Ordner Node Modules zu berühren die Dateien im Ordner Node Modules Wir erstellen einfach unsere eigene Variablendatei. Beginnen wir diese Lektion auf derselben Bootstrap-Dokumentseite wie die vorherige Auf der Seite haben wir alles im Bereich Dateistruktur und Import abgeschlossen alles im Bereich Dateistruktur und Import Wir sind jetzt bei den Standardwerten für Variablen angelangt. Und es heißt, dass jede AS-Variable in Bootstrap das Ausrufe-Standardflag enthält Wenn Sie das entfernen, können Sie diesen Standard mit Ihrer eigenen Variablen überschreiben, ohne die Bootstrap-Quellcodes zu ändern Sie müssen den Bootstrap-Quellcode nicht ändern. Sie müssen es auch nicht mit Ihrem eigenen CSS verdoppeln , um es zu überschreiben Wir können den Bootstrap-Quellcode tatsächlich über unsere eigenen Variablen ändern Bootstrap-Quellcode tatsächlich über unsere eigenen Bootstrap wird im Ordner installiert , der keine Module ist. Wir ändern dort überhaupt nichts , wir stellen nur unsere eigenen Variablen zur Verfügung Während wir Bootstrap importieren, finden Sie eine vollständige Liste der Bootstraps-Variablen in der SS-Datei mit Unterstrich-Variablen Wir werden das gleich überprüfen , weil wir sie von dort kopieren und einfügen werden Sie müssen die Bootstraps-Funktionen importieren, die wir haben, dann haben wir bereits unsere eigene Datei für diesen Abschnitt eingerichtet Hier springen wir ein und schauen uns die CSS-Datei mit der Bootstrap-Variablen Und dann fangen wir an, unsere Website mithilfe von Variablen zu gestalten. Im ersten Beispiel kopieren wir die Variablen, die Bootstrap uns für die Hintergrundfarbe und die Textfarbe für den Hauptteil zur Verfügung gestellt hat, und fügen die Textfarbe für den Hauptteil zur Verfügung gestellt hat , und Bevor wir in den Ordner Node Modules eintauchen, öffnen wir unseren Ordner mit benutzerdefinierten Variablen und fügen diese ein Wir gestalten es mit einem schwarzen Hintergrund und einer sehr dunklen Textfarbe werden wir immer behalten, aber wir speichern es einfach und schauen uns das an Es hat offensichtlich funktioniert. Es ist nicht die beste Idee, aber zumindest wissen wir , dass es funktioniert. Gehen wir jetzt zurück und gestalten unsere Website nach unseren eigenen Wünschen neu Hat uns gesagt, diese vollständig zu löschen und zu speichern. Wie Sie sehen können , wurden wieder die ursprünglichen Standardfarben verwendet. Ich gehe zu den Node-Modulen, ordne sie in Bootstrap und öffne dann die Variablen Hier finden wir alle Standardvariablen . Als erstes gehen wir runter und finden die Variablen für die Text- und Hintergrundfarbe. Nachdem du das ein paar Mal durchgesehen hast, wirst du anfangen, dich an den Ort von allem zu erinnern. Alle gängigen Variablen hier. Wir haben den Körperhintergrund, Körperfarbe und die Textzeile. Wir kopieren einfach die ersten beiden. Hier ist der Haken. Ich werde die einfach einfügen. Hier ist unser erstes Problem. Wenn ich das speichere, wird der SCSS-Compiler live Sas nicht wissen, was Weiß bedeutet und er wird nicht wissen, was Grain 900 Der Grund, warum er es nicht wissen wird, ist, dass zu diesem Zeitpunkt das Einzige diesem Zeitpunkt das Einzige, was importiert wurde, Funktionen sind Es wurden keine der Farbvariablen importiert , die wir hier sehen können. Ich werde das einfach speichern . Es wird ein Fehler ausgegeben und es heißt undefinierte Variable weiß Wenn ich das auskommentiere und speichere, wird ein anderer Fehler ausgegeben, nämlich die undefinierte Variable Grau Was wir tun müssen, widerspricht dem, was die SCSS-Dokumente Wenn Sie sich nicht sicher sind, was die SCSS-Dokumente sind, ist Slang do com drin. Dort finden Sie alle Dokumente zum Ausführen von CSS und As, finden Sie alle Dokumente zum Ausführen wie es allgemein Aber wenn du dir die Dokumente ansiehst, standardmäßig jede Seite standardmäßig CSS Zum Beispiel gehen wir auf eine der Seiten, sie ist bereits auf SCSS Wir können es in SS ändern, aber es ist standardmäßig SCSS, weil SCSS tatsächlich Das liegt daran, dass SSS genau wie CSS geschrieben ist, mit ein paar kleinen Unterschieden , die nicht in den Geltungsbereich dieser den Geltungsbereich Um unser Problem zu lösen, müssen wir uns mit Variablen befassen und die weiße Variable und die Grain 100-Variable finden Und wir müssen diese Variablen deklarieren , bevor wir sie ändern. diesen Klassen werden wir ein Bei diesen Klassen werden wir ein paar Leerzeilen einfügen. Gehen Sie zurück zu Variablen und wir werden wieder nach oben scrollen. Manche Leute kopieren und fügen die gesamte Datei ein, aber das ist ein bisschen übertrieben. Wir werden unsere Grautöne oben kopieren und einfügen. Wir können sie bei den Standard-Tags belassen, wenn wir wollen, weil wir sie nicht ändern. Und dann gehen wir runter und finden unsere Farben. Hier sind die Grundfarben. Fügen Sie diese ein. Ich würde sagen, es besteht eine hohe Wahrscheinlichkeit, dass Sie die Farben primär und sekundär usw. zuordnen müssen die Farben primär und sekundär usw. zuordnen Also könnten wir sie genauso gut einbauen. Also, richtig. Nun, Sie müssen sicherstellen, dass Sie die Reihenfolge auch beibehalten. Denn hier bezieht sich primär auf Blau und dann wird hier Blau deklariert. Jetzt entfernen wir die Standardfarbe anstelle von Weiß, wir ändern es auf hell, was eine viel weichere Farbe ist die Hintergrundfarbe derzeit auf Grau 900 liegt Recon, wir werden es stattdessen mit Grau 800 versuchen. Wir speichern das, wir werden es überprüfen. Das sieht toll aus. Unsere Textfarbe ist viel weicher. Hintergründe. Eine weiße Folie. Wenn wir uns das genauer ansehen, werden Sie feststellen, dass Farbe eine Variable ist. Bs, Körperfarbe, Hintergrundfarbe ist BS, Körper BG. Wir klicken darauf, du wirst sehen, dass es eine graue 800 gibt. Wenn wir nach dem Körperhintergrund suchen, ist es eigentlich ein IGB, aber das ist unsere Lichtfarbe dort Das funktioniert Nun, lassen Sie uns das jetzt durchgehen und wir werden unsere Primärfarbe auf etwas Angenehmeres ändern . Es ist sehr üblich, dass Menschen diese blaue Farbe verwenden. Dann machen wir es vielleicht durch und ändern auch das Aussehen unserer Karten. Der einfachste Weg, das zu tun, ist, Blau loszuwerden. Wir können eigentlich einfach eine dieser Farben wählen . Das ist der einfachste Weg. Dann zeige ich dir einen fortgeschritteneren Weg. Wir wollen nicht mehr blau sein. Wir wollen, dass es zum Beispiel orange ist. Wir geben nur die Variable orange , weil sie hier oben bereits deklariert wurde. Wir speichern diese Änderung. Unsere Sekundarstufe macht 700 vielleicht etwas dunkler. Sei einfach vorsichtig. Da unser Button-Text aber auch grau ist, wollen wir nicht, dass es zu Konflikten kommt. Unsere Vorwahlen werden jetzt orange. Und überall, wo wir Primary für eines unserer Elemente verwendet haben , es jetzt auf der gesamten Website geändert, was viel einfacher ist, als das CSS zu überschreiben Wir werden dann reingehen und unsere Karten wechseln. Wir gehen in unsere Variablendatei die Bootstrap-Datei aus dem MPM-Paket. Wir werden die Kontrolle übernehmen und nach einer Karte suchen. Wir sind jetzt in der Kartenabteilung. Wir werden das alles hervorheben. Und wir werden vorsichtig sein, weil es sich auf andere Variablen bezieht und das zu einem Fehler führen wird . Wir werden es kopieren und einfügen. Wir kehren zu unseren benutzerdefinierten Variablen zurück. Wir werden versuchen, die Dinge in der gleichen Reihenfolge zu halten. Wir werden feststellen müssen, dass die Breite des Abstandhalters kompliziert ist. Wie Sie sehen können, ist das der Grund, warum manche Leute einfach die gesamte Datei kopieren und einfügen Worüber wir uns wirklich Sorgen machen, aber ich möchte den Radius ändern, wir gehen zum Kartengrenzradius, er verwendet den Grenzradius. Eine Möglichkeit besteht darin, dass Teile tatsächlich gelöscht werden können. Wir wollen also nicht ändern, dass ich nur den Grenzradius ändern wollte. Könnte auch die Dicke des Randes ändern. Ich lösche die ersten drei. Die Farbe belassen wir vorerst. Wir werden den Radius ändern. Ich werde den Rest löschen, nur um die Dinge einfach zu halten. Wir haben hier ein paar Variablen, wir haben den Grenzradius und die Grenzbreite. Wir speichern das einfach. Sie werden sehen , dass es einen Fehler ausgeben wird. Wir gehen zurück in unsere Variablendatei und suchen nach Randbreite und Randradius. Der einfachste Weg, dies zu tun, besteht darin, zurück zur oberen Kontrollrahmenbreite zu scrollen . Wir haben eine Randbreite von eins. Der einfachste Weg, dies zu ändern, besteht darin, einfach einen Wert von zwei P x drei Px usw. einzugeben. Dann haben wir den Grenzradius. Dann kopiere ich sie alle rein lege sie über die Karten. Sagen wir zum Beispiel, ich möchte meinen Grenzradius ändern. Entfernen Sie zunächst die Standardeinstellung. Ich könnte es ändern, um beispielsweise einen kleinen Radius zu geben. Unsere Rahmenbreite, die derzeit bei einem Pixel liegt, könnte das auf zwei P X ändern. Und das speichern wir, wir werden es überprüfen. Jetzt haben wir unseren zwei Pixel breiten Rand und wir haben unseren engen Radius. Wenn wir mit der rechten Maustaste klicken und das Kartenetikett überprüfen, sehen Sie einen Randradius von 0,2 m, was ein wirklich enger Randradius ist. Dann Rand mit einer Dicke von 22 Pixeln. Das wurde genau so gemacht, wie wir gefragt haben. Wenn Sie in so ziemlich jedem Abschnitt der Bootstrap-Dokumente bis zum Ende scrollen , erfahren Sie dort, welche AS-Variablen Sie überschreiben können, um sie anzupassen. Das ist wirklich praktisch Nehmen wir zum Beispiel an, Sie wollten einen Rahmen mit zwei Pixeln auf Ihren Karten haben , aber Sie wollten, dass alles, was einen Rahmen hat, aus zwei Pixeln besteht Das ist wirklich einfach. Wir belassen es einfach bei der Standardeinstellung für die Rahmenbreite. Sie könnten das sogar auskommentieren, weil wir es nicht überschreiben Wir gehen dann zurück zur Rahmenbreite, die wir nicht kopiert und eingefügt Wir suchen erneut nach der Rahmenbreite. Stellen Sie sicher, dass Sie nach der ersten Instanz suchen. Wir gehen zurück zur ersten. Also kopieren wir die Rahmenbreite und fügen sie ein, um sicherzustellen, dass sie in der richtigen Reihenfolge ist. Dann ändern wir die beiden. Jetzt haben wir für jedes einzelne Element auf Ihrer Website, das einen Rand hat , eine Breite von zwei. Und wir haben immer noch eine Randbreite von zwei. Das Letzte, was wir tun müssen, ist, uns Farben anzusehen und wir werden uns mit wechselnden Farben befassen. verwenden keine Bootstraps, sondern Standardfarben, bevor wir die Primärfarbe auf Orange umgestellt haben Und dabei wurde ein eingebautes Orange verwendet. Es gibt zwei Möglichkeiten, wie wir das tun können. Zuallererst schauen wir uns an, Orange zu modifizieren. Wir werden das Standardflag im VS-Code entfernen. Es ist ganz einfach, du fährst einfach mit der Maus über das kleine Farbfeld , das es dir gibt Dann können wir einige Änderungen vornehmen. Also wollten wir etwas mehr Rot hineinbringen. Wir können es nach oben ziehen, es ist nicht mehr wirklich eine Orange , die sich verändert hat, dann ist es eher ein Sonnenbrand. Wir speichern das. Jetzt ist aus Orange eher ein Sunburst-Rot geworden die andere Art und Weise, wie wir es tun können, werde ich nur kommentieren, dass Orange es nicht auskommentieren wird, weil es später erforderlich sein könnte. Ich werde Ed einfach kontrollieren , damit er es zurückbringt. Die andere Sache, die wir tun können, ist, anstatt hier eine Variable zu verwenden, wir können tatsächlich einen Hash und dann eine Farbe eingeben. Wenn wir zum Beispiel einfach mit Weiß beginnen und dann den Mauszeiger darüber bewegen Wir können dann reinkommen und an jede Farbe anpassen Wo. Nachdem es ganz an uns liegt, denke ich, ich nehme vielleicht ein schönes tiefes Blau. Nun, seien Sie vorsichtig mit Blues, weil es auf so vielen Bootstrap-Websites gibt, wir werden das speichern Das ist unser primäres. Ich empfehle, sie nach Möglichkeit Farbvariablen zuzuordnen. Auf diese Weise können Sie sie weiter unten in Ihrem Code verwenden. Aber wie dem auch sei, das ist eine Möglichkeit, es zu tun . Dann werden wir es überprüfen. Da ist unser tiefes Blau, das überall auf der Website reproduziert wird . Wenn Sie es geschafft haben, Bootstrap-Variablen zu überschreiben und einige Komponenten der Site mithilfe der verschiedenen Methoden , die ich Ihnen gezeigt habe, erfolgreich geändert der Site mithilfe haben, können Sie mit der nächsten Lektion fortfahren 15. Lektion15: Jetzt schauen wir uns an , wie wir unsere eigenen Hilfsklassen erstellen . Das heißt, Klassen, genau wie die, die wir verwenden und die Teil von Bootstrap sind Aber wir werden unsere eigenen erstellen, weil Bootstrap manchmal einfach nicht genug ist Es gibt eine API, ein in Bootstrap integriertes System , mit dem wir ganz einfach unsere eigenen Klassen erstellen Wir werden diese Lektion erneut auf einer Bootstrap Do-Seite beginnen erneut auf einer Bootstrap Do-Seite Wir schauen uns jetzt die Utility-API an, die sich im Utility-Bereich unter API auf Bootstrap Five befindet Verwenden wir die Utility-API , um unsere eigenen Utility-Klassen zu generieren Hilfsklassen sind die Klassen , die wir mit Bootstrap verwenden Die beiden Dinge, die erforderlich sind , wenn Sie unsere eigenen Klassen erstellen, sind die Eigenschaft, auf die Sie abzielen und die Werte, die Sie ihr geben Wenn Sie nach unten scrollen, ist das erste Beispiel ziemlich einfach. Wir haben die Eigenschaft der Opazität. Wir haben Werte von 025507500 und wir haben Werte von 0,25 0,5 0,75 0,1 zugewiesen . Sie werden 100 wahrscheinlich nicht verwenden, es sei denn, Sie versuchen, etwas zu überschreiben und wir haben Werte von 0,25 0,5 0,75 0,1 zugewiesen. Sie werden 100 wahrscheinlich nicht verwenden, es sei denn, Sie versuchen, etwas zu überschreiben, das bereits transparent ist. Wenn wir zum Beispiel einen Wert von 25 verwenden, also Opazität 25 , wir Opazität von 0,25 Das ist ziemlich wir Opazität Jetzt denkst du vielleicht , dass das ein ziemlich langes Wort ist. Sie müssen jedes Mal tippen und das ist wahrscheinlich nicht notwendig. Und dann kannst du Klasse hinzufügen. Im nächsten Beispiel geben wir eine Klasse von O an und das ist der Buchstabe, die Zahl Null und wir haben dieselben Werte. Und dann gibt es 02550 aus und so weiter. Wir haben mit der benutzerdefinierten Klasse gekürzt. Wir zielen immer noch auf Opazität ab, aber jetzt haben wir eine benutzerdefinierte Klasse Diese sind etwas schwierig zu implementieren. Wir werden später durch die Staaten gehen. Wenn du unter Verwendung der API ganz nach unten scrollst , findest du hier ein Beispiel. Wir benötigen importierte Funktionen und Variablen sowie Hilfsprogramme. Nachdem Sie die Dienstprogramme importiert haben, können wir eine Map erstellen. Mit unserer eigenen Karte der Versorgungsunternehmen zusammenführen. Das wird die eine Karte sein. Letztlich werden wir dieses Beispiel für die Verwendung kopieren und einfügen. Nun, dann geh zu den Vermögenswerten und SCSS in Maine. Dann gehen wir unter die Stelle, wo wir Hilfsstoffe importiert haben. Wir werden das in einer Minute neu arrangieren. Wir werden einfach alles zum Laufen bringen. Wir fügen das ein. Dann kehren wir zu unseren Kapazitäten zurück. Wir werden es mit der benutzerdefinierten Klasse verwenden. Wir kopieren nur den Abschnitt mit der Deckkraft einschließlich der erforderlichen Klammern. Wir werden das kopieren Dann entfernen wir den Cursorbereich und stellen sicher, dass Sie dabei die richtigen Klammern auswählen . Wir werden das in O Shift einfügen, um es neu zu formatieren. Das werden wir speichern Wir fügen die Klasse dann dem Bild auf unserer Website hinzu. Wir werden wahrscheinlich eine Deckkraft von 0,75 verwenden. Gehen wir vorerst zu Layouts und indizieren HTML Wir suchen nach unserem Bild , gehen zum Unterricht und geben 75 Save Dann werden wir den Dev-Server ausführen. Unser Bild ist viel transparenter als früher. Wenn wir es untersuchen, können wir sehen dass die Klasse hier drüben sagt, dass die Klasse eine Opazität von 0,75 erzeugt . Aber wir können es besser machen, denn das nächste, was in unseren Bootstrap-Dokumenten steht, sind Zustände. Wir haben uns Eigenschaften und Klassen angesehen, jetzt schauen wir uns den Staat an, und zum Beispiel Hova, Wir werden dieses Beispiel kopieren und einfügen. Nur der Opazitäts-Teil. Wir könnten die Hova-Zeile sogar einfach kopieren und einfügen, wenn Sie möchten. Dann gehen wir zurück ins Hauptnetz und markieren den vorhandenen Code. Wir könnten wahrscheinlich einfach die zusätzliche Zeile hinzufügen, aber unser neues Codeformat einfügen. Es werden nun die ursprünglichen Opazitäts-Tags von 25, 50 usw. erstellt 50 usw. Wir werden auch eine Hova-State-Option haben. Wir werden das speichern Wir werden einen Blick in das CSS werfen und es überprüfen. Bevor wir das tun, gibt es hier ein Beispiel. Ich habe Opazität, aber du wirst auch diese Opazität bekommen, Opazität 25 sowie die Hova-Staaten, wir haben eine Ich denke, wir könnten Opazität als Klassennamen belassen. Ein bisschen leicht zu merken. Wenn Sie eine Website aufrufen, die Sie eine Weile nicht mehr gesehen haben, ist es wahrscheinlich ein bisschen einfacher, Ihr Gedächtnis auf Trab zu bringen Wir haben die Seite, wir werden sie inspizieren, in die Quellen gehen und den SCSS-Ordner öffnen Ich bin schon an dem Punkt, an dem du die Kontrolle übernehmen und die Opazität eingeben kannst Kontrolle übernehmen und die Opazität eingeben Dann werden Sie sehen, dass wir Opazität Null haben, was Opazität von Null ist Dann haben wir Opazität Null. Hob, nicht sehr nützlich, Null, aber zum Beispiel 25 und dann 25 Hoa Wir können ein Objekt so einstellen, dass es transparenter wird, wenn die Maus darüber fährt . Lassen Sie uns das versuchen. Wir gehen zurück zum Index Html. Dieses Mal machen wir Opazität 75, Hover. Und das speichern wir. Wenn Sie dann mit der Maus darüber fahren, erhalten wir den Opazitätseffekt Gehen wir zu unseren Karten und stellen sie so ein, dass alle Karten diesen Effekt haben Ich werde diesen Effekt einfach aus dem Heldenbild entfernen, weil ich denke, dass er nicht sehr angemessen ist. Machen Sie Steuerung X. Ich scrolle dann nach unten zu unseren Karten, zum Bild. Wir gehen zum Kurs und fügen das ein. Das wird auf alle Karten angewendet , weil wir die Karten anhand der Parameter variieren. Falls du meinen Einführungskurs noch nicht gemacht hast, zeige ich ihn dir ganz schnell. Wir werden zum Inhalt und dann zum Index übergehen. Sie werden die Karten hier sehen und wir haben eingerichtet, jeder Strich eine neue Karte ist, dass jeder Strich eine neue Karte ist, und diese Daten werden über die Karte geschleift, eine Karte zwei, Karte drei, sodass aus einer Karte drei Karten im HTML-Format entstehen aus einer Karte Wir speichern das, dann können Sie sehen, wenn Sie mit der Maus darüber fahren, wir den Hover-Effekt bekommen Wenn Sie in der Lage sind, Ihre eigenen Hilfsklassen zu erstellen, insbesondere wenn Sie einen Staat verwenden , der sich hervorragend eignet um das Reisen mit Boots auf ein neues Niveau zu heben, dann sind Sie mit dieser Lektion fertig 16. Lesson16 p1 Fazit: Herzlichen Glückwunsch, dass Sie es bis zum Ende von Projekt eins geschafft haben. A hat sicher viel zu verkraften. Denken Sie daran, im Projektbereich einen Link mit Ihrer Arbeit zu teilen , damit ich mir Ihre Arbeit in Projekt zwei ansehen kann. 17. Lektion17: Willkommen zu Projekt zwei. Projekt zwei ist ein kreatives Projekt. Sie müssen die Landing- oder Startseite und die Info-Seite mit den folgenden Techniken gestalten. Ändern Sie die Bootstrap-Variablen. Ich habe eine Videolektion zur Verfügung gestellt, wie das geht. Sie tun es über die SCSS-Datei. Sie müssen auch die Bootstrap-CSS-Hilfsklassen im HTML-Code des Singlets und in den HTML-Vorlagen mit Indexpunkten ändern Bootstrap-CSS-Hilfsklassen im HTML-Code des Singlets und in den HTML-Vorlagen mit Indexpunkten Die Singlet-HTML-Datei ist für die Info-Seite und die Index-HTML-Datei für die Start- oder Sie müssen auch Ihre eigenen neuen Dienstprogrammklassen mithilfe der Bootstrap-Utility-API erstellen mithilfe der Bootstrap-Utility-API Auf einem Hoa habe ich zum Beispiel eine Videolektion zur Verfügung gestellt, in der erklärt wird, wie das geht Ich habe auch einige Links zu einigen beispielhaften Styling-Ideen im Abschnitt Ressourcen unter Projekt zwei bereitgestellt einigen beispielhaften Styling-Ideen im Abschnitt Ressourcen unter Projekt zwei Ich freue mich sehr darauf, Ihre Arbeit in Ihrem eigenen Projekt zu sehen . Stellen Sie sicher, dass Sie den Link teilen. Sie können Dienste wie Cloud, Dropbox, One Drive oder Google Drive verwenden One Drive oder Google Drive und einen Link zu dem Ordner teilen , in dem sich Ihre Arbeit befindet. Ich kann es kaum erwarten, euch Feedback zu geben. 18. Fazit von Projekt 2: Herzlichen Glückwunsch, dass Sie es bis hierher und zum Ende von Projekt zwei geschafft haben. Denken Sie daran, falls Sie noch keinen Link zu Ihrer Arbeit im Projektbereich hochgeladen Ihrer Arbeit im Projektbereich damit ich Ihnen Feedback geben kann. Danke, dass du an diesem Kurs teilgenommen hast. Es war toll, mit dir zu arbeiten. Ich lade ständig neue Kurse statischem Webdesign, Hugo und Bootstrap Wir sehen uns in meinem nächsten Kurs.