Erstellen von schnellen Websites mit Hugo den statischen Site & Bootstrap 5 (Einführung)

1. Einführung: Hallo, mein Name ist Shawn und ich unterrichte seit über 10 Jahren Webdesign und entwickle Websites. Und in den letzten Jahren habe ich mich statisches Webdesign spezialisiert. Viele Menschen, die neu im Webdesign sind lernen selbst die Grundlagen von Content-Management-Systemen wie WordPress und Joomla kennen. Ich muss feststellen, dass sie für teure Plugins und Themes bezahlen müssen . diesen Weg gehen, werden Sie es auch schwer finden , Themen und Vorlagen zu entwickeln. Am Ende erhalten Sie auch eine langsame Website und viele potenzielle Sicherheitslücken. Dies führt zu einer schlechten Kundenerfahrung, bietet Ihnen aber auch Suchmaschinenrankings aufgrund der langsamen Seitenladegeschwindigkeiten. Statische Websites und Hugo bieten Ihnen schnelle, sichere Websites, die einfach zu erstellen, günstig zu hosten sind und das Potenzial für gute Suchmaschinen-Rankings bieten . Da die SEO-Algorithmen Websites bevorzugen, die schnell geladen werden, erleichtert dieser Kurs den Einstieg mit statischem Webdesign. Es führt Sie zum Einrichten Ihrer ersten US-Site und führt Sie auch mit Bootstrap in HTML und CSS ein. Sie sollten an dieser Klasse teilnehmen, wenn Sie mit statischem Webdesign neu sind. Wir werden uns auch die Grundlagen von Bootstrap ansehen. Sie müssen also nicht viel Erfahrung mit HTML oder CSS haben. Das Projekt für diese Klasse erstellt eine grundlegende statische Website mit Hugo und Bootstrap zusammen mit einigen grundlegenden JavaScript. Ich hoffe, Ihnen gefällt dieser Kurs genauso gut wie es mir gefallen hat, ihn zu kreieren. Wir sehen uns in der ersten Lektion. 2. Erste Schritte: Ich zeige Ihnen im nächsten Video die gesamte Software , die Sie für diesen Kurs benötigen. In diesem Video wird Ihnen gezeigt, wie Sie auf alle Dateien zugreifen können , die Sie benötigen. Das erste, was Sie für ein paar Lektionen benötigen einige Bilder, die Sie hier aus einer Zip-Datei im Ressourcenbereich herunterladen können . Das einzige, was Sie brauchen, ist eine Kopie der abgeschlossenen Dateien für jede Lektion. Ich habe hier einen Link zum GitHub-Repository hinterlassen. Und sobald Sie sich im GitHub-Repository befinden, müssen Sie den Zweig auswählen, den Sie für die bestimmte Lektion benötigen, an der Sie arbeiten. Und alle Lektionen haben Zweige mit ihnen verbunden. Nachdem Sie den Zweig ausgewählt haben, gibt es einen Code-Button und Sie können eine Zip-Datei herunterladen. Das ist der einfachste Weg, dies zu tun. Wenn Sie entweder mit einem Get CLI-Dienstprogramm oder GitHub-Desktop klonen möchten, löschen Sie den Dot-Git-Ordner. Aber ich empfehle Ihnen dringend, einfach auf Zip herunterladen zu klicken , sich diesen Ordner zu schnappen, und dann können Sie meine Version des Codes überprüfen , um Probleme zu lösen, die sonst auftreten können . Diskussionsbereich. 3. Installieren von HUGO und benötigte Software: Willkommen zur ersten Lektion. Wir werden nicht nur Hugo installieren, sondern die gesamte gelbe Software, die Sie benötigen, um Websites mit Hugo entwickeln zu können. Nach Abschluss dieser Lektion können Sie die folgende Software unter Windows, Mac oder Linux installieren die folgende Software unter Windows, . Erstens NodeJS. Und Sie installieren auch Schokolade gleichzeitig , wenn Sie Windows verwenden. Achten Sie also genau darauf. Die Git-Befehlszeilenschnittstelle. Sie installieren Homebrew wenn Sie Mac oder Linux verwenden, installieren Sie dann Hugo und Go Lang via Chocolate oder Homebrew, je nach verwendetem System. Visual Studio-Code. Und auch GitHub Desktop, eine optionale Software die Sie installieren können und für die sie nicht unter Linux verfügbar ist, macht es für die sie nicht unter Linux verfügbar ist, macht Anfängern viel einfacher . Alle Links für diese Softwarepakete finden Sie im Abschnitt Ressourcen unten. Das erste, was wir tun müssen, ist Visual Studio Code zu installieren. Und der Grund, warum wir das zuerst tun, ist, dass wir im nächsten Schritt Gate installieren werden. Und innerhalb des Git-Installationsprogramms wählen wir Visual Studio Code als bevorzugten Code-Editor. Wer hat diesen Link unten im Ressourcenbereich für die Downloadseite von Visual Studio Code gefunden Ressourcenbereich für die . Es gibt Downloads für Windows, Linux und Mac. Und Linux. Sie müssen sicherstellen, dass Sie den richtigen Installationsprogramm behandeln . Ich gehe jetzt die Schritte durch, die mit der Installation von Visual Studio Code unter Windows verbunden sind, aber die Optionen sind unter Linux und Mac sehr gleich. Ich möchte die Aktion „ Mit Code öffnen“ für das Verzeichniskontextmenü haben . So kann ich einen ganzen Codeordner öffnen und auch den offenen Breitencode für die Herbstkontextmenüs. Sie können einzelne Datei in VS-Code öffnen. Jetzt müssen wir die Git-Befehlszeilenschnittstelle installieren. Gehen Sie zum System zum Festlegen oder Hochladen Ihres Fortschritts, während Sie Code auf einen Remote-Server schreiben. Und es verfolgt jede einzelne Änderung, die Sie vornehmen, solange Sie Ihre Änderungen vornehmen, während Sie sie vornehmen. Wenn Sie Linux oder Mac ausführen, ist es wirklich wichtig, dass Sie zu diesem Zeitpunkt gut installieren da es für Homebrew oder Brew erforderlich ist. Link unten für die Download-Seite für die Git-Befehlszeilenschnittstelle, Fangen wir mit Linux an. Jetzt. Jede andere Linux-Distribution hat ein eigenes Paketinstallationsprogramm. Der gebräuchlichste ist der Debian-Ubuntu-Paketmanager. Wir haben den Code hier. Sie müssen wahrscheinlich vor diesen Befehlen Pseudo schreiben, dass Sie die Berechtigung haben, die Software zu installieren. Bei den meisten Benutzerkonten können Sie die Software nicht installieren. Es gibt hier eine ganze Reihe verschiedener Beispiele für verschiedene Systeme und den jeweiligen Code, damit Sie ihn mit ihrem Paketmanager installieren können. Wenn du auf dem Mac bist, ist es ein bisschen einfacher. Es heißt hier, um Gebräu, Brauen, Homebrew zu verwenden , hängt alles gebraut von Git selbst ab. Und wenn Sie nicht gespeichert werden, könnten Sie zu diesem Zeitpunkt Probleme bei der Installation von Homebrew haben . Also kann ich es empfehlen. Und ich habe den Link für diese Seite unten gelassen. Es ist jedoch ziemlich einfach. Wenn Sie unter Mac OS 10.9 oder höher sind , ist dies eine Ergänzung von Maverik. Wir müssten den Befehl GIT im Terminal ausführen. Wenn Sie nicht installiert wurden , wird es nach der Installation automatisch installiert , um zu überprüfen, ob es installiert wurde, indem Sie überprüfen, ob es installiert wurde GIT Space Dash, Dashversion eingeben. Und wenn es installiert wurde, wird es Ihnen sagen, welche Version Sie haben. Wenn Sie unter Windows sind, das Installationsprogramm herunterladen und den Prozess manuell ausführen. Links unten. Und jetzt werde ich den Windows-Installationsprozess durchlaufen . Ich werde das Häkchen aufheben, die GUI abrufen und eine schüchterne Windows Explorer-Integration erhalten. Wählen Sie Visual Studio-Code aus. Der Standardtexteditor. Ich lasse get, entscheide den Standardnamen für den Zweig. Ich werde erlauben, von der Befehlszeile aus zu laufen, aber auch von Software von Drittanbietern. Ich wähle die Option für die Verwendung von geets eigenen gebündelten OpenSSH. Wir verwenden die OpenSSL-Bibliothek. Ich werde als 0s auschecken und Rasenenden im einzigartigen Stil begehen. Manche Leute ziehen es vor, als Windows-Stil zu checken. Begehen Sie einen einzigartigen Stil. Ich bevorzuge es, so einfach zu checken, was normalerweise der einzigartige Stil ist. Ich hatte keine Konflikte in VSCode. Verwenden Sie die Windows-Standardkonsole, lassen Sie das Standardverhalten Git Pull und verwenden Sie den Kern des Git-Credential Managers. Und ich überlasse die Standardeinstellung für Herbstmode und symbolische Links auf dem Bildschirm. Um eine der Funktionen zu aktivieren. Wenn Sie ein Windows sind, können Sie diesen Schritt überspringen. Aber jetzt werden wir Homebrew installieren, und das ist für Mac oder Linux. Und Homebrew ist ein Paketmanager , mit dem Sie andere Software installieren können, die wir in diesem Tutorial verwenden werden . Lassen Sie uns für die Brauer-Website verlinken. Es ist brew.sh TSH. Sobald Sie auf der Homepage sind, haben sie hier ein Skript und es funktioniert sowohl unter Linux als auch unter Mac. Also musst du zuerst dieses Skript kopieren. Und dann zeige ich dir die Installation in Linux, wenn du ein Mac bist, es ist genau der gleiche Prozess. Mein Linux-Computer, ich füge diesen Befehl ein. Sie erinnern sich, dass Sie gespeichert werden müssen, was wir im vorherigen Schritt getan haben. Und dann drücken Sie Enter. Dann musst du es bestätigen. Vergewissern Sie sich, dass Brauer richtig installiert sind Sie können den Befehl brauen verwenden. Doktor. Wie Sie sehen können, sieht es so aus, als wäre das Gebräu nicht auf dem Weg. Ich repariere das. Ich kopiere und füge einen Befehl ein und lasse ihn im Ergebnisbereich unten für Sie. Und diese sollten brew zur Shells-Pfaddatei hinzufügen. Lasst uns ihm jetzt einen Kerl geben. Geh Bruce arbeiten. Jetzt, da Sie brew installiert haben, sind Sie bereit, Node.js zu installieren, wenn Sie Linux- oder Mac-Benutzer sind. Wenn Ihr Windows-Benutzer ist, brauchen Sie nicht brauen, aber Sie werden Trochlear als Teil dieses Prozesses installieren . Achten Sie also darauf, dass Sie die Schritte sehr sorgfältig beachten. Der Link unten zu dieser Adresse. Und es ist für die Installation von Node.js mit Paketmanagern. Wenn Sie zu macOS wechseln, gibt es zwei Optionen, mit denen Sie curl verwenden können, was ein ziemlich langes Skript ist. Du willst es kopieren und einfügen, das ist in Ordnung. Die andere Option ist jedoch die Verwendung von Homebrew, das Sie bereits hätten installieren sollen. Und wir müssen tun, ist Brew Install Node einzutippen . Und es wird Sie durch den Prozess führen. Wenn Sie unter Linux sind, gibt es viele verschiedene Optionen Je nach verwendeter Distribution müssen Sie sorgfältig zum richtigen Link gehen und ihn speziell für Ihre Distribution installieren. Ich werde jetzt den Prozess der Installation von Node.js mit Windows vom Haupt-Download-Bildschirm aus durchlaufen Installation von Node.js . Ich lade das Windows-Installationsprogramm herunter. Sie können auf die Windows-Schaltfläche klicken oder unter Windows Installer MSI können wir die 64-Bit-Version herunterladen. Es kann ein paar geben, die 32-Bit verwenden. Das EBIT, Sie benötigen eher die 64-Bit-Version. Aus diesem Grund können Sie einfach auf die Schaltfläche des Windows-Installationsprogramms klicken . Ich zeige Ihnen jetzt die Optionen Sie während des Installationsprozesses auswählen müssen . Alles klar. Stimmen Sie also der Lizenzvereinbarung zu. Ich wähle den Standardinstallationsordner, Standardkomponenten. Und dann muss ich dieses Kästchen hier ankreuzen, und das ist wirklich wichtig. Wir werden auch Chocolaty installieren. Wir klicken auf einen beliebigen Schlüssel, um mit diesem Installationsskript fortzufahren. Wann immer es noch Hugo ist und lege und das ist für Linux, Mac und Windows. Curling ist später erforderlich wenn Sie Hugo-Module verwenden. Und Hugo-Modelle werden tatsächlich von einigen Themen benötigt. Es ist wirklich wichtig, dass Sie im Moment installieren , während Sie Hugo installieren. Wenn Sie unter Mac OS sind, können Sie den Befehl brew install Linux verwenden , Sie können denselben Befehl verwenden da Sie auch brew hätten installieren sollen. Aber das Fenster ist etwas anders. Wir werden Schokolade verwenden und das ist etwas , das Sie zuerst in den Installationsschritten Node.js durch Windows hätten installieren sollen in den Installationsschritten Node.js , es wäre ziemlich schnell, und dann werde ich es tun laufen Sie danach durch die Linux- oder Mac-Option. Der Befehl für Schokoladentee ist also Schokolade. Und auf diese sofortige Weise installieren. Also führen wir install aus und die Anwendung ist Hugo erweitert. Du könntest ihn einfach wieder einbauen. Es gibt andere Funktionen, die Sie höchstwahrscheinlich später benötigen , die in Hugo erweitert sind, wie z. B. der SAS Support gibt Ihnen eine Bestätigung und Sie können eine für alle tun. Das nächste, was Sie zum Stillstand bringen müssen ist die Go-Sprache und dies ist nützlich für Hagen-Module. Also sind wir auf Chaco install go Lang. Auch hier müssen Sie eine 44 machen, außer gesamte Go-Zeile die Installation abgeschlossen hat. Es gibt eine Meldung, die erklärt, dass die Umgebungsvariablen einschließlich des Pfades geändert wurden, während wir Software installiert haben , und es gibt dort einen Befehl zum Aktualisieren, aber ich habe häufig Probleme gefunden damit. Also eröffne ich eine neue PowerShell. Dann die neue PowerShell, wir werden überprüfen , ob sowohl Hugo erweitert als auch die Goldverlegung installiert wurden. Wir haben erweitert mit dem Befehl ist immer noch Hugo installiert . Und wir können Hugo-Version machen , um nach der Version zu suchen. Wie Sie sehen können, haben wir Huo erweitert installiert und um den Befehl zu gürten gehen diese dann Version. Und wir können sehen, dass wir die leichteste Go-Sprache installiert haben. Linux oder Mac. Die folgenden Anweisungen sind für Sie identisch. Unter Linux und Mac ist der Befehl, den wir verwenden werden, brew install. Alles klar, ihr seid durch wuchs installiert. Lasst uns jetzt installieren los. Und der Befehl dafür ist brew install go. Und das ist die Go-Sprache, die wir zum Ausführen von Hugo-Modulen benötigen, die von Mengenthemen verwendet werden, und Sie werden sie wahrscheinlich auch selbst verwenden. Leute installiert. Jetzt werden wir unsere Installationen sowohl Hugo als auch los überprüfen. Wir können die Hugo-Version ausführen. Sie können dort standardmäßig sagen. Unter Linux und Mac wurde er diese installiert. Es unterscheidet sich also geringfügig von der Windows-Installation. Gehen Sie dann zur Version, um die Go-Sprache zu überprüfen. Wir haben, ab sofort habe ich die aktuelle Go-Sprache installiert. Der letzte Schritt ist die Installation von GitHub Desktop. Es ist optional, aber es wird dringend empfohlen, obwohl es nur für Mac und Windows verfügbar ist, erleichtert es die Verwendung erheblich. Und es ist etwas, worauf wir uns in zukünftigen Videos beziehen werden , in denen ich Gang als alle Softwarepakete verwende. In dieser Lektion habe ich den Link für die Website verlassen, die Download-Seite im Abschnitt Ressourcen unten. Nachdem GitHub Desktop installiert wurde, müssen Sie sich mit Ihrem GitHub.com-Konto anmelden. Sie werden zum Breiten-Browser weitergeleitet , um sich bei Ihrem GitHub-Konto anzumelden, für das Sie sich kostenlos anmelden können. Eine Sache, auf die Sie achten müssen, ist, dass Visual Studio-Code als Code-Editor konfiguriert ist, in Datei und dann Optionen wechseln. auf der Registerkarte Integrationen sicher, dass Sie Visual Studio Code als externen Editor ausgewählt haben und Ihre Shell Ihrer Wahl ausgewählt haben . Lasst uns die erste Lektion erteilen. Herzlichen Glückwunsch , dass du es so weit geschafft hast. Ich freue mich darauf, Sie in der nächsten Lektion zu sehen , in der wir uns mit Hugo beginnen und Ihr erstes Hugo-Projekt machen werden. Sie hatten Probleme mit den Schritten in dieser Lektion, bitte spulen Sie zurück und überprüfen Sie es noch einmal. Erfolgreich. Es gibt einen Diskussionsbereich unten und ich melde mich Ihnen und helfe Ihnen so schnell wie möglich. 4. HUGO Projekt im VS einrichten: In dieser Lektion werden wir uns mit der Einrichtung eines Hugo-Projekts von Grund auf befassen . Ihr Jungs sehr anpassbar, aber leider gibt es Ihnen nicht viel zu arbeiten. Nach Abschluss dieser Lektion können Sie ein Hugo-Projekt einrichten ohne sich auf ein Thema verlassen zu müssen. Und Sie können Grundtext ausgeben , Sie zu unserer HTML-Datei gehen. Das erste, was wir uns ansehen werden ist das Kommando Hugo neue Seite. Das erste, was Sie tun müssen, ist mit einem leeren Ordner zu beginnen . Und wenn Sie in diesem Ordner Visual Studio Code einrichten, wie ich es in der vorherigen Lektion angewiesen habe, können Sie mit der rechten Maustaste klicken und dann mit Code öffnen. Möglicherweise erhalten Sie eine Nachricht, in der Sie gefragt werden, ob Sie dem Autor der Fälle vertrauen , und Sie müssen auf Ja klicken, sonst erhalten Sie nicht alle Funktionen von Visual Studio Code. Wir werden dann ein neues Terminal in diesem Terminal betreiben . Zunächst werden wir überprüfen, ob Hugo korrekt installiert wurde. Und wir können Hugo-Version machen. Wie Sie sehen können, habe ich Version 0.89 unter Windows installiert. Um eine neue Site zu erstellen, müssen wir die neue Kingo Site verwenden und Sie müssen das Verzeichnis angeben , das ich im aktuellen Ordner oder Verzeichnis gutschreiben möchte . Also verwende ich einen Punktschrägstrich , um das anzugeben. Wir können jetzt sehen, dass wir bereit sind. Ihr fragt uns, ob wir das Theme herunterladen und in den Themes-Ordner legen oder Inhalte hinzufügen möchten. Und es gibt uns einen Hinweis darauf, dass wir einen neuen Hugo-Befehl verwenden können , um Inhalte zu erstellen. Und das zeige ich dir in Kürze. Als nächstes müssen wir einige Layoutvorlagen erstellen. Leider kommt er mit keinem davon aus dem Buch, unsere Layoutvorlagen zu erstellen. Was wir tun werden, wir machen es zu einem neuen Terminal und werden neuen Ruhm haben. Und wir nennen es einfach Temp, schließen das Terminal. Und wenn Sie in Ihren Themes-Ordner schauen, sehen Sie, dass wir einen temporären Ordner haben und ein grundlegendes Thema für uns erstellt hat. Sie können nicht alles im Ordner Layouts tun. Klicken Sie darauf und wir ziehen es in unseren Layouts-Ordner. Und dann werden wir gehen und wir löschen diesen Temp-Ordner. Werfen wir einen kurzen Blick darauf. Wir werden sehen, wie die funktionieren. Also beginne ich mit dem Basis-Off-Punkt-HTML. Das ist unser grundlegendes HTML-Layout. Das ist das höchste in der Hierarchie. Dort fängt alles an. An teilweiser Spitze. Was das bedeutet ist, dass wir uns die Partials anschauen. Es wird die header.html einziehen, diese Zähleinheit, nichts da drin, aber sie werden in unsere Basis gezogen. Wir ziehen dann unseren Header ein. Und dann haben wir Block Main, die wir tatsächlich in unserer Liste, Single oder Index, über den wir in einem Moment gesprochen haben, eingerichtet haben. Und dann haben wir jetzt unsere Fußzeile eingezogen um ein paar Änderungen daran vorzunehmen, um sie auf die Standards zu bringen. Wenn wir also ein Ausrufezeichen einsetzen, sagen wir, es ist ein m und Abkürzung, wir können Tab drücken. Sie werden feststellen, dass wir unsere Meta-Tags haben, wir haben unseren Zeichensatz UTF-8. Und das ist wirklich wichtig denn das bedeutet, dass Sie im Grunde auf jeden Charakter in einer Sprache zugreifen können . Du würdest niemanden Fehler erkennen lassen. Wir überlegen, was unser Internet Explorer - und Edge-Kompatibilitäts-Tag ist, was unser Standard-Ansichtsfenster-Breiten-Tag ist, das für reaktionsschnelle Websites sehr wichtig ist. Was wir tun werden, ist, dass wir uns all diese Meta-Tags schnappen. Wir werden sie in die Köpfe werfen, um uns voranzubringen. Dumm vom Antigen. Werde den Titel schnappen, den unten knallen. Sie werden feststellen, dass wir unsere Standardsprache haben. Wir schneiden das aus und fügen es vorerst in das HTML-Tag ein und wir werden später darauf zurückkommen. Dann löschen wir alle meine Kritiker. Werde es retten. Ich entferne diese Div um den Hauptblock herum. Dann schnappen wir uns den gesamten Inhalt, schneiden ihn aus und legen ihn in die header.html. Wir werden diesen Raum los. Wir können diese doppelte Einrückung entfernen. Spar dir das auf. Sie einen Blick darauf, wie unsere Homepage, unser HTML in den Hauptblock eingefügt wird. Öffnen Sie die index.html, setzen Sie doppelte geschweifte Klammern und wir definieren main erhalten doppelt invertierte Kommas. Dann legen wir ein End-Tag ein. Das erste, was wir anzeigen werden, ist eine Punktseite mit einem Kapital-S-Punkttitel. Und es wird den Titel der Website einziehen. Dann machen wir wieder ein paar doppelte geschweifte Klammern und wir machen Punktinhalt mit einem Kapital C. Was das tun wird ist, wenn wir in einem Moment Inhalte erstellen, es wird diesen Markdown einziehen und es wird es für uns in HTML umwandeln. Hugo new command erstellt Inhalte für uns und verwendet Vorlagen, damit neue Inhalte entstehen. Schauen wir uns also mal an, wie es funktioniert. Damals wir die neue Website erstellt haben. Sie geben uns die Hinweise , dass wir mit dem Befehl Hugo new neue Inhalte erstellen können . So wie das funktioniert, ist es. Sieht im Ordner „Archetypes“ aus, und es wird diese Datei, den Fault Dot MD, als Vorlage verwenden , um unseren neuen Inhalt zu erstellen. Bevor wir jetzt weitermachen, ich eine Sache ändern, und das ist, dass ich den Entwurf von „true “ auf falsch ändern muss , damit jede Seite, die wir erstellen, live sein wird. Andernfalls müssen Sie es manuell von Draft True in Draw ändern , false, damit es angezeigt wird. Also habe ich das in den Standardeinstellungen der Archetypen gespeichert. Aber md-Akte, ich werde rennen, Hugo wusste es. Ich werde folgen auf Kiste ist Slash Unterstrich index.html und das ist MD von Markdown. Also lass das laufen. Wir werfen dann einen Blick in unseren Inhaltsordner und Sie werden sehen, dass wir einen Indexpunkt MD haben. Da es die Indexdatei im Stammverzeichnis handelt, weiß nur wenige Typen nicht, wie der Titel lautet. Im Moment nennen wir es einfach zu Hause. Lasst uns ein paar Inhalte einbringen. Jetzt müssen wir etwas Inhalt machen. Ich gebe Ihnen etwas Platzhalterinhalt und eine sehr beliebte Version des Platzhaltertextinhalts. Er heißt Lorem Ipsum hat diese integrierte, aber leider die aktuelle Version von Visual Studio Code emit nicht für Markdown-Fälle aktiviert. Jetzt können wir das beheben. Wenn wir zum Menü Datei gehen, gelangen wir zu den Einstellungen und Einstellungen. Sie können also sehen, dass die Verknüpfung Control plus Komma ist oder auf Mac Command Post Komma wäre. Öffne das, gehe zu Extensions. Und das erste, was Sie tun müssen, ist, wenn Sie unter Ausschließen von Sprachen suchen , die standardmäßig Markdown ausschließen. Wir werden also die zusätzlichen Regeln wählen , mit denen wir ein paar weitere Optionen festlegen müssen, da wir einige Probleme haben werden . Scrolle einfach nach unten. Es heißt, zeige erweiterte Abkürzung. Wir müssen das in Mockup- und Stylesheets ändern. Ich sage nur dort, dass es nur erweiterte Abkürzungen in HTML, Hamel, Jade Slim XML, exzellent, CSS, SCSS, SCSS weniger Installationen zeigen Hamel, Jade Slim XML, exzellent, CSS, wird. Aber es wird keinen Markdown machen und das ist das Verhalten danach. Die andere Sache, die wir tun müssen, ist Erweiterung auf der Registerkarte auszulösen. Sparen wir sie medizinisch auf, damit wir das schließen können. Und jetzt können wir in der R Markdown-Datei das testen, wenn er auf Beiträge tippt, und dann werden Sie sehen, dass diese funktionieren. Was wir tun werden, ist, dass wir in Alarm geraten werden. Und dann 100. Und Tab. Sie werden sehen, dass uns 100 Wörter gutgeschrieben werden. Stattdessen könnten wir Lorem 50 versuchen und das zweimal ausführen. Setzen Sie ein Leerzeichen zwischen den beiden, um einen Absatz zu erstellen, würde das zusätzliche Leerzeichen am Ende löschen. Obwohl es eine gute Praxis ist, eine neue Zeile in der Datei zu haben . Das werden wir speichern. Jetzt schauen Sie sich an, wie Sie HTML-Inhalte in Markdown aktivieren können. Standardmäßig erlaubt er Ihnen nicht, HTML als Sicherheitsfunktion in den Mund zu legen , aber gelegentlich können Sie nicht erreichen, was Sie wollen , nur wir haben Markdown-Syntax, die wir schauen uns gleich an. Auf diese Weise können Sie auch HTML-Inhalte einfügen und Ihren Markdown mischen. Wenn Sie also unten in Ihr Projekt schauen, sehen Sie eine Konfigurationsdatei. Jetzt ist Oper FAT YAML. Für Anfänger ist es viel einfacher. Also benennen wir diese Datei in zwei Punkte YAML um. Dann müssen wir das Format ändern. Der einfachste Weg, dies zu tun, besteht darin, das Gleichheitszeichen und den Abstand davor hervorzuheben . Klicken Sie mit der rechten Maustaste darauf, ändern Sie alle Vorkommen. Rücktaste, und ändere das in einen Doppelpunkt. Jetzt müssen Sie in YAML keine Strings mit Anführungszeichen umgeben und automatisch erkannt werden , damit wir diese Anführungszeichen entfernen können. Dort ist der Typ, lass uns Markdown jetzt aktivieren. Es ist ein bisschen kompliziert. Der erste Eintrag, den wir einbringen müssen, ist Mockup. Drücken Sie dann die Eingabetaste und einen Tab eingerückt. Wir mussten es nicht in einen Eintrag für Goldmark schreiben. Goldmark ist der aktuelle Standard-Markdown-Renderer , den Hugo verwendet. Dann setzen wir den Renderer den Doppelpunkt und dann noch eine Einrückung. Und das ist das Wichtigste, unsicher. Stimmt. Okay, also speichere das, geh zurück zu deiner index.html und lass uns einen Markdown eingeben. Markdown ermöglicht es Ihnen, Überschriften zu erstellen und Ihre Texte zu ändern. Zum Beispiel fett, kursiv, Listen erstellen und so weiter wirklich einfach und ohne HTML. Ich gebe diesen Link an. Warum sollten die Kursressourcen? Wir werden uns jetzt ein paar davon anschauen. beispielsweise versuchen, einige Überschriften auszuführen, wird fett oder kursiv Abea-Inhalt verwendet . Und wir haben bereits den Titel für die Seite. Also machen wir eine Überschrift H drei, würzen T3-Hashes ab, und dann nennen wir es einfach Platzhaltertext. Sie müssen diesen Treffer unterbrechen. Was sehen wir uns dann fett und kursiv an . Du musst vorsichtig sein. Du darfst nicht fett für Überschriften verwenden. Ich persönlich habe ein Wörterbuch im VS-Code aktiviert und erstelle eine Überschrift mit Fett. Es wird mir sagen, dass das ein Problem ist. Wenn ich zum Beispiel fett Text fett mache , stoppe eine Zeile, das ist in Ordnung. Und dann machen wir für kursiv nur den einen Stern. Sei fett Text mit doppelten Sternchen. Dann schauen wir uns mal an. Sie können sagen, dass sie nur eine Inspektion durchführen werden. Wir können sehen, dass wir ein CH3 haben. Wir haben die 3.5 Songs gemacht und er hat automatisch IDs für deine Überschriften für dich erstellt. Es nimmt ein wenig ****** und Kleinbuchstaben für Sie heraus und Kleinbuchstaben für und setzt Bindestriche für den Fall des ******. Ihr habt automatisch einen Absatz für uns erstellt und es wird einen starken oder fetten Text gutgeschrieben und dann wird dem kursiven Text mit dem BEM-Tag gutgeschrieben. Es sind wieder unglaublich Absatz-Tags für uns, für alle Textabschnitte und das ist alles durch Markdown in Hugo. Jetzt, da wir das grundlegende Setup haben, lassen Sie uns den integrierten Live-Reloading-Server für wichtige Jungs ausführen , um zu überprüfen, ob alles so funktioniert , wie wir es beabsichtigt haben. Gehe in dein Terminal und tippst Hugo-Server und drücke Enter. Und schauen wir uns an, was es sagt. Wir können also sagen, dass es gebaut wurde, um es zu sehen. Es gibt vier Seiten , die es erstellt hat. Eine Sitemap, die wir in eine andere Lektion bekommen und auf Änderungen warten. Es ist also live neu geladen. Es gibt unsere Konfigurationsdatei , die wir gerade geändert haben. Möchten Sie eine Entwicklungsumgebung , die schnell randomisiert läuft. Und wenn Sie den Befehl verwenden, sind Sie mit dem deaktivierten Schnellrender-Flag. Es wird jede einzelne Datei neu erstellen , wenn es eine Änderung erkennt. Wenn Sie also steuern, klicken Sie auf diesen Link. Sie können die Seite in einem Browser öffnen. Hier ist unsere Seite im Browser hätte den Namen der Site gerendert . Wir haben unseren Text mit zwei Platzhaltern, verbeugt und verbeugt Lorem Ipsum. Wenn wir mit der rechten Maustaste klicken und uns ansehen, schauen wir uns den HTML-Code an , den ihr generiert habt. Also haben wir unsere Treffer zwei und ein h2-Tag. Und Sie haben automatisch IDs für uns generiert, damit wir sie mit Links ansprechen können. Es ist in Kreditabsätzen für jeden Teil des Markdowns und wird dort für diesen Satz verwendet. Ich werde ein paar Partials und einige semantische Tags einrichten , um sie zu verpacken. Zurück in entscheidender Bedeutung für das HTML. Unser Hauptblock oben in Maine und Hit Tab und das gibt Ihnen das wichtigste semantische Tag und was das tut, sagt Suchmaschinen und möglicherweise auch Drehbuchautoren , dass sie sich ansehen ISI Hauptinhalt auf der Seite. Wir werden es für unseren Header tun, wir setzen ein verstecktes Tag ein und das lässt die Suchmaschine feststellen , dass dies der Header ist und es völlig die Überschriften und möglicherweise einige Links im Mai sind. Dann legen wir für das Foto ein Fußzeilen-Tag ein. Wir ziehen das da rein. Dann öffne den Header und die footer.html. Im Moment werden wir nur ein bisschen Texte in die Nähe legen , die Kopfzeilentext in die Fußzeile legen , die besagt, dass er sich anpassen würde, um dies zu identifizieren. Ja, es funktioniert tatsächlich. Speichern Sie all das und gehen Sie zurück zu Ihrer Website. Werfen wir einen Blick darauf. Wie Sie sehen können, haben wir unseren Header , der eingezogen wird, und unsere Fußzeile Offensichtlich ist die Formatierung nicht dort, wo wir sie möchten, aber das ist für nachfolgende Videos. Zurück in der Basis von HTML werden wir dieses Sprach-Tag reparieren. Was wir tun werden, nehmen wir die EN heraus, setzen ein paar doppelte geschweifte Klammern ein und wir machen Punktsprache. Dot lang und das wird den Sprachcode einziehen , der so konfiguriert ist. Und um Ihre Sprachkonfiguration zu ändern, pumpe ich Ihre config.xml. Konfiguration ist Standardinhalte mit Capital C Sprache. Zum Beispiel muss EINE AU-Site in australischem Englisch in Kleinbuchstaben den Sprachcode enthalten, Sie können die letzten zwei Zeichen nicht in Großbuchstaben verwenden. Dann öffne die Hüftpartielle in Bezug auf den Titel. Wenn wir einen Punkttitel mit einem Kapital T erstellen, erhalten wir den Titel der angezeigten Seite. Werfen wir einen Blick darauf. Sie sehen dort oben im Tab, dass Home erscheint, jetzt können wir es viel besser machen. Wir machen Punkt, Punkt, Titel, dann einen Strich und dann den Titel. Du kannst andere sehen. Noch einen Schritt, den wir machen können, und wenn es die Homepage ist, werden wir das Strichhaus entfernen. Wenn der Punkt, Punkt, Punkttitel. Sie hat einen Platz da drin. Wir setzen unsere geschweiften Klammern ein und wir werden es tun, wenn nicht zu Hause ist. Dann haben wir, was angezeigt wird. Wenn wir nicht auf der Homepage sind und dann markieren wir. Ist Home-Retouren wahr? Wenn wir auf der Homepage sind. Da gehst du. Wir zeigen den Titel der Seite nicht an. Wenn wir auf der Homepage sind, schauen einfach unseren HTML an. Wird sagen, dass sie die Sprache sind ist die Standardeinstellung von US-Englisch, Englisch. Datei config.xml einhalten. Das kannst du ändern. Zum Beispiel bin ich in Australien, also werde ich das persönlich in E in AU ändern oder ENG be für Großbritannien verwenden. Sie können dort sehen, dass ihr den HTML-Code aktualisiert habt. Und es gibt noch eine letzte Sache, die wir tun müssen und das ist richtig. Einige externe CSS- und JavaScript-Dateien. Und der Grund, warum wir das tun, ist es viel einfacher, Ihren Code zu debuggen, wenn es sich um eine externe Datei handelt. Wenn Sie beispielsweise externe Dateien für CSS und JS verwenden, wenn Sie Chrome verwenden, wird Ihnen die genaue Zeile der Datei angezeigt, in der entweder Ihr CSS-Selektor befindet oder der Fehler in Ihrer JS-Datei gelöscht wird durch das. Jetzt gehen wir in den statischen Ordner. Dachte das statische Foto oder kann einen neuen Ordner namens JS erstellen. Darin erstellen wir eine Datei namens main.js. Wir gehen zurück zum statischen Ordner und erstellen einen weiteren Ordner mit dem Namen CSS. Darin nennen wir es Hauptpunkt CSS. Es könnte also falsch sein. Wir werden vorerst nichts in sie stecken. Wir müssen sie importieren, in Layouts, dann Partials und dann header.html gehen. Wir müssen das Link-Tag verwenden, um das Stylesheet zu importieren. Wenn wir Link eintippen und es wird seine Abkürzungen und die beste für uns finden, können wir Lincoln light verwenden. Wenn wir jedoch Link Colon CSS verwenden, wird automatisch die Schiene des Stylesheets enthalten und auch einen Standardnamen für das Stylesheet enthalten. Jetzt werden wir das nicht benutzen. Wir werden das zurücksetzen und Slash CSS verwenden , slash main.css. Und das ist der Ort, an dem unsere Datei gesetzt wird. Der statische Ordner wird auf der kompilierten Site nicht verfügbar gemacht. Ich brauche nur die Stürze im statischen Ordner. Danke. Danke. Wir müssen die JavaScript-Datei importieren . Du könntest es ins Foto legen. Aber das Problem ist, wenn Sie in die Basis dieses HTML schauen, sehen wir, dass unsere Fußzeile teilweise innerhalb der Fußzeilen-Tags sitzt. Wir möchten nicht, dass unser JavaScript-Import darin lebt. Was wir tun werden, wir machen einen neuen Teil, wir nennen das neue Teilskriptfoto. Und wir verwenden dieses Filmmaterial nur für Skripte. In diesem Skript für sie werden wir unser Skript wichtig machen. Wenn wir also Skript und dann Tab eingeben, müssen wir danach nicht ganz den Quelltyp definieren. Du hast eine Kolonie gelegt. Sie können jetzt sogar auf Tab klicken, da nur eine Option verfügbar ist, wir könnten SRC eingeben oder ein Teil davon wird eine Quelle für das Skript haben, das slash js slash main.js sein kann. Und das sparen wir uns. Jetzt müssen wir diesen Teil importieren, also gehe ich zu unserer Basis unter der Fußzeile zurück. Wir werden unsere doppelten geschweiften Klammern und Teilfunktion ausführen. Und dann Script-Footer. Sie müssen den vollständigen Stopp angeben, damit Sie auf die gesamten Site-Kontexte zugreifen können . Marshall. Lassen Sie uns den Server ausführen und prüfen, ob alles funktioniert. Also tippen wir auf den Server. Dann werden wir die Kontrolle haben. Klicken Sie auf den Link. Zurück zu einem wirklich einfachen Site-Layout. Rechtsklicken und inspizieren. Geh zuerst in den Kopf. Sie können das erste Skript ignorieren, da dies die Bibliothek ist, die den Hugo-Server lädt. Aber dann scrollen wir nach unten und Sie werden sehen, dass wir den Link zu unserer CSS-Datei haben. Und wenn wir weiter nach unten scrollen, sehen Sie unter der Fußzeile unsere JS-Datei. Wenn wir auf Quellen eingehen, sagen Sie die beiden Dateien, beide auf die Website gezogen werden , sie sind derzeit leer, aber wir werden ihnen in späteren Lektionen Inhalte hinzufügen. Wirklich wichtig. Sie waren bei jedem einzelnen Schritt dieses Projekts erfolgreich . Bevor Sie fortfahren, wenn Sie sich nicht sicher sind, spulen Sie bitte zurück und überprüfen Sie es erneut. Ansonsten gibt es unten einen Link. Bei den Diskussionen werde ich mein Bestes tun, um Ihnen zu helfen, sobald ich Sie in der nächsten Lektion sehen kann. 5. Hinzufügen von Bootstrap 5: Willkommen zur nächsten Lektion. In diesem Feld wird es viel kürzer sein als die letzte Klasse. Jetzt ist es wichtig, dass Sie alles in der letzten Klasse verstehen , wenn Sie noch Fragen haben und es nicht klären können. Unten gibt es einen Diskussionsbereich und ich werde mein Bestes tun, um mich so schnell wie möglich bei Ihnen zu melden. Nach Abschluss dieser Klasse können Sie Bootstrap's-, CSS- und JS-Importe zu Ihrem Hugo-Projekt hinzufügen . Das erste, was wir tun werden, ist auf die Bootstrap Five-Website zu gehen und die Informationen zu finden. Sie müssen sehr vorsichtig sein denn wenn Sie eine Google-Suche verwenden, landen Sie möglicherweise auf der Bootstrap vier- oder drei-Website. Und wenn Sie mit Bootstrap Five arbeiten , einem aktuellen Release, haben wir ein Docs und die Einführung, Sie werden sehen, dass es hier einen CSS-Code gibt , den Sie von ihrem CDN abrufen können was ist der einfachste Weg, es auszuführen. Das Gleiche gilt für das GIS. Sie können von ihrem CDN aus darauf zugreifen. Wenn wir nun weiter nach unten scrollen, sehen Sie dies als Vorlage und es erklärt, wie all diese Importe in die breitere HTML-Datei passen. Wir haben diese Datei bereits eingerichtet. Wir nehmen einfach die CSS-Komponente und stecken sie in den Kopf. Dann nehmen wir die GPS-Komponente und legen sie in die Fußzeile. Wir beginnen damit, dass die CSS-Komponente den Kommentar ebenfalls kopiert. Es ist eine Erinnerung daran, was es ist. Das werden wir kopieren. Dann gehen wir in den Layouts-Ordner und die Partials und gehen uns zu Kopf. Dann unter unserem Link zu unserem Stylesheet. Die benutzerdefinierten Stile fügen in den Link ein, in den die Bootstrap CSS Phi dort CD eingefügt wird . Und das werden wir uns aufheben. Kopiert dann den gesamten JavaScript-Code einschließlich der Kommentare. Dann gehen wir zu unserem Script-Food oder unter unserer benutzerdefinierten JavaScript-Datei. Wir fügen ihren Code ein und können ihn markieren und Umschalttaste diesen Einzug entfernen. Es gibt zwei Möglichkeiten. Wir werden vorerst einfach mit der ersten Option gehen. Ich entferne all das zusätzliche Gewürz. Und wenn Sie den Hugo-Server noch nicht vom letzten Video laufen lassen, pumpt das Terminal den Hago Server und führt dieses Steuerelement aus. Klicken Sie auf den Link. Dann prüfen wir, ob alles funktioniert. Also klicken wir mit der rechten Maustaste und inspizieren den Kopf. Sie können sehen, dass wir unseren Link zur CSS-Datei platzieren , und dann scrollen wir nach unten in die Fußzeile, und Sie werden sehen, dass wir auch die JS-Datei haben. Das war's für dieses Video. Ich habe versprochen, dass das kurz sein wird. Denken Sie daran, wenn Sie Fragen haben, gibt es unten einen Diskussionsbereich. Ansonsten sehe ich dich in der nächsten Lektion. 6. Homepage mit Gitter, Knöpfen und reaktionsfähigem Design: Willkommen zur nächsten Lektion. Hier fangen wir an, Inhalte mit Hugo und Bootstrap zu erstellen . Sie müssen die Dateien für diese Lektion im Ressourcenbereich herunterladen , Sie können auf das Bild zugreifen , das wir verwenden werden, über das statische Foto. gehe ich später weiter ein. Wenn Sie Probleme haben, können Sie sich meinen Code immer in den Dateien ansehen , die Sie herunterladen werden. Nachdem Sie dieses Video abgeschlossen haben, können Sie den folgenden Bootstrap, fünf Klassen, Raster, Schaltflächen, responsive Bildklassen und Abstände verwenden fünf Klassen, Raster, Schaltflächen, . Und Sie können diese Elemente kombinieren, um Inhalte für Websites zu erstellen. Sie können auch bedingte, wenn wir Anweisungen verwenden würden. Hier drin. Der erste Schritt, Bootstrap Five Grid. Bootstrap verwendet ein System aus Containern, Zeilen und Spalten, und Sie müssen diese Elemente in dieser Reihenfolge verwenden . Lasst uns also in unser Projekt einsteigen, wer wird diese drei Elemente einrichten ? Und wir fangen an. Öffnen Sie den Ordner Layouts und den Index oder HTML. Und Sie werden aus früheren Lektionen sehen dass wir stattdessen den Titel der Website und den Inhalt aus der Markdown-Datei sehen. Das lassen wir vorerst. Ich arbeite darunter. Wir fangen mit unserem Container an. Also geben wir div dot container ein und klicken auf die Tabulatortaste, und das wird das div für Sie erstellen , wobei diese Klasse automatisch die Eingabetaste dann div dot rho hineindrückt. Jetzt müssen wir sie anrufen. Wenn Sie also div dot col eingeben, können wir das bekommen, aber wir wollen nicht nur eine einzelne Spalte, wir wollen zwei Spalten, die gleichmäßig verteilt sind. zu schaffen, machen wir Col Dash Sechs. Auf kleinen Bildschirmen möchten wir den Bildschirm jedoch nicht in zwei Hälften teilen. Wir möchten es nur auf dem Bildschirm teilen, als groß oder größer definiert ist. Und ich zeige dir in einer Sekunde, was groß bedeutet. Also rufe ich Dash an, Dash Sechs. Wir wollen zwei davon. Du könntest dich wiederholen oder du kannst star t2 verwenden und das ist für das Bild. Dann wird es standardmäßig in Visual Studio Code installiert. Ich gehe auf Tab. Dann anti, und ich kann dann meinen Inhalt dort einfügen. Und dann dasselbe für den zweiten. Das Internet zu unseren Inhalten wird gehen. Jetzt haben wir eine Reihe und wir haben zwei Spalten und eine gleichmäßige Breite. Aber nur auf dem Bildschirm, dass die Klasse größer oder größer ist. Werfen wir einen Blick auf die Haltepunkte in Bootstrap bedeuten. Ich bin hier auf der Bootstrap-Breakpoints-Seite unter Layout. Wenn Sie nach unten scrollen, sehen Sie Haltepunkte von SAM für kleines, mittleres, großes und exzellentes XT Excel. Auf dem Bildschirm wird der nicht zeilige Bildschirm mit zwei Pixeln breit oder größer Bildschirm mit zwei Pixeln breit oder größer in zwei mit zwei Spalten geteilt. Wenn es kleiner ist. Wir haben nur eine Kolumne. Lassen Sie mich also vertikal stapeln. Das nächste, was wir tun werden , ist ein Bild zu platzieren. Du wolltest diese Kolumne. Dafür werden wir die Bootstrap Five Responsive Image-Klasse verwenden. Ich bin auf der Unterseite, unter dem Inhaltsbereich der Bootstrap-Dokumente, meine ich Bilder. Und es spart, wenn wir die Klasse der IMG Dash Fluid Unit verwenden , einen Punkt benötigt , der angibt, dass, wenn Sie eine CSS-CSS-Datei verwenden, automatisch 100% zuweist die Eigenschaften der Max-Breite automatisch 100% zuweist. Es ist Ihr Bild wird seine Breite abhängig von dem verfügbaren Speicherplatz ändern . Und die Höhe wird automatisch sein und das wird relativ zur Breite sein. Lass uns das mal ausprobieren. In der ersten Spalte tippe ich auf IMG. Und dann Tab. Sie geben uns eine Quelle, die wir in einem Moment machen werden, und in einem Moment einen Alt-Text. Zuallererst schauen wir uns die Klasse an. Klasse entspricht invertierten Kommas. Und wenn wir in IMG Dash Fluid unterrichten, wird das automatisch die Größe des Bildes für uns ändern. Jetzt können Sie in Bezug auf die Quelle unten die Dateien dazu in dieses Video herunterladen , aber abgeschlossen sind. Ansonsten gibt es den Link für das Bild selbst. In den statischen Ordner. Erstellen Sie einen neuen Ordner namens IMG. Dann müssen Sie in diesem Ordner das Bild einfügen, das Sie tatsächlich aus Ihrem Datei-Explorer oder Finder einzelnen Studio-Code einfügen können tatsächlich aus Ihrem Datei-Explorer oder Finder einzelnen Studio-Code einfügen . Sie müssen mit der rechten Maustaste auf das Bild klicken und in den Ordner suchen und dort einfügen. Ich habe mein Bild, füge es ein. Ich gehe nicht zurück in die Quelle. Wie wir im vorherigen Video mit CSS- und JS-Importen besprochen haben, verweisen wir nicht auf einen statischen Ordner. Es sind die Ordner in statischen, die auf Ihrer kompilierten Website angezeigt werden und den Schrägstrich rückgängig machen IMG Slash Bootstrap-Themes Punkt PNG. Für den Alt-Text nenne ich ihn Bootstrap-Themen. Ich füge noch ein paar Klassen hinzu. Zuallererst füge ich eine Klasse des Blocks hinzu, die für Anzeigeblock steht. Ich benutze die MX Dash Order. Was das tut, ist, dass es einen Rand auf beiden Seiten erzeugt, x, was die horizontale Ebene bedeutet. Stellen Sie sich auf beiden Seiten Ihres Bildes vor und es ist in gleichmäßigem Verhältnis als das zentriert Ihr Bild, aber Sie müssen auch die Display-Block-Klasse verwenden. All das wird nicht funktionieren. Jetzt können wir einige Treffer und Inhalte in unserer zweiten Spalte erstellen . Zweite Spalte. Ich gebe die erste Höhe ein. Und dann Tab. Und darin importiere ich den Titel dieser Seite. Innerhalb dieses Treffens, anstatt den Titel der Site oder den Titel der Seite zu importieren , werde ich versuchen, benutzerdefinierte Parameter zu erstellen, die wir für benutzerdefinierte Parameter punkten. Und es wird zuschlagen. Und dann schließe ich meine Klammern und zeige dir, wie du das in deine Seiten einfügst . Dann unter dem H1 erstelle ich einen Absatz mit P. Und darin werden wir unseren Inhalt einfügen , damit wir Inhalte einfach ausschneiden und in diesen Absatz einfügen können . Und ich lösche diesen Punkt-, Punkt - und Punkttitel von oben. Was wird hier passieren? Wir haben unsere Seite in zwei Hälften mit unseren beiden Spalten geteilt. Wir haben unser Bild auf der linken Seite und jetzt tickt rechts. Wenn wir auf einem Bildschirm sind , der klein und groß ist, sei es extra klein, klein, mittel. Wir werden das Bild oben haben, der Text unten in der Reihenfolge des HTML, der definiert, dass wir mit Bootstrap immer HTML und CSS ohne mobile Geräte zuerst ausschreiben müssen , so steht es hier in einer Reihe. Wir haben zuerst unser Foto und nehmen das zweite Mal. Dann können wir das Layout für größere Bildschirme anpassen, Licht auf Das hilft bei SEO, Suchmaschinenoptimierung und Sie erhalten einen viel besseren Rang bei Google, wenn Sie Ihre Website so gestalten, dass sie für Mobilgeräte geeignet sind Geräte zuerst, was ich möchte, dass die zweite Spalte zuerst auf Bildschirmen angezeigt wird , dass es LIGO größer ist. Und so wie wir das machen, seine Musikklasse von Bora, Dash, LG, Dash, zuerst, ein Bildschirm zum L-o-G oder größer. Diese Spalte wird zuerst angezeigt. Werfen wir einen Blick auf das Einfügen einiger Schaltflächen. Jetzt. Unter dem Absatz , den wir gerade eingefügt haben, erstellen wir ein Leerzeichen. Stephen wird das Licht abhalten, Enter drücken und dann machen wir einen Knopf. Jetzt. Dies muss nicht getan werden, aber es ist einfach, die ID abzufragen, um den Typ der Schaltfläche anzugeben , der eine Standardschaltfläche sein soll. Im Moment spielt es keine große Rolle. Aber wenn dies ein Formular wäre, das standardmäßig in meiner obersten Schaltfläche einreichen würde, wir los, dass diese Verhaltensweisen nicht obligatorisch sind, aber es hat den ganzen Tag geschrieben, um es zu tun. Jetzt wird diese Schaltfläche standardmäßig nicht so angezeigt, wie wir es möchten. Also müssen wir hinzufügen, dass die Klasse gleich der Bootstrap-Klasse für Button btn entspricht. Ich kopiere und füge alles ein, was wir gerade gemacht haben. Jetzt wird die erste Schaltfläche, wir zu einer primären Schaltfläche machen , standardmäßig blau sein, also mussten wir keinen BTN primär hinzufügen. Die unten stehende, ich werde es zu einer sekundären Schaltfläche machen, aber auch standardmäßig skizziert, dass es grau ist. Also haben wir den Btn Dash sekundär weil ich wollte, dass es ein Gliederungsknopf ist, kein solider. Ich muss das beschriebene Wort zuerst setzen. Das nächste, was ich mache, ist, dass ich diese großen Knöpfe mache . Halten Sie die Alt-Taste gedrückt und klicken Sie auf beide Schaltflächen und setzen Sie BT ein, Dash, LG und ein Gewürz. Für den Schaltflächentext und den Link. Ich werde auf einige benutzerdefinierte Parameter im Seiten-Markdown verweisen . Um das zu tun, genau wie wir es erwähnt haben, dot params dot Hitting, begann er, einige geschweifte Klammern einzulegen , und es wird Punktparams mit einem großen P-Punkt BTN eins für Button, ein Punkt txt sein. Ich zeige dir in einer Minute, wie wir es eingerichtet haben. Kopieren Sie es dann und fügen Sie es in die Schaltfläche unten ein. Und ich ändere es, um es zu schlagen. Dann kopiere es und füge es erneut ein. Und wir werden einen Link einsetzen, also entspricht HREF eingebetteten Kommentaren. Dann ändere ich es in URL. Ich kopiere und füge ein. Das ganze Los wird in einer Zwei-Punkt-URL geschlagen . Das sieht gut aus. Wir müssen jetzt die Schaltfläche zum Drücken des Inhalts einrichten, einen Punkt txt Button zum Punkt-TXT-Button, eine URL-Schaltfläche zu URL, in den Inhalt gehen und dann den Indexpunkt md öffnen. Ich habe hier schon ein paar Inhalte. Das werden wir in einer Sekunde ändern. Zuallererst setzen wir unsere Heilung ein und haben benutzerdefinierte Parameter. Alles was Sie tun müssen, ist einfach oben und markieren Sie diese Überschrift. Die Überschrift für diese Seite. Wir schaffen es zuerst Bootstrap. Und suchte. Dann entferne ich einen dieser Absätze, weil es ein bisschen zu viel Text für das ist, was wir tun. Und ich werde diese kühne Metallic-Partnerschaft los. Werde diese Marke auch dort unten los. Die Schaltflächen unter der Überschrift werden wir noch einige benutzerdefinierte Parameter einsetzen und wir machen BTN einen Doppelpunkt in dann eine Registerkarte. Und wir würden keine SMS schreiben, ich denke, dass der erste Button mit der Bootstrap-fünf Docs-URL verlinkt wird . Wir fügen das ein. Und um auch zu schlagen, geben wir Text heraus, der auf die Dokumente und die ARRA verlinkt wird . Wir fügen das ein. Lasst es uns retten. Wir werden diese zusätzliche Zeile unten zuerst loswerden, Sie sollten nur eine leere Zeile haben und innovieren, markieren und fallen. Und dann gehen wir zum Terminal, neues Terminal und Idiotenserver steuern das Klicken auf die Datei. Und wir reden über den Ego-Server, und dann steuern wir den Klick auf die URL. Sie können sehen, dass wir immer noch eine Dummy-Kopf- und Fußzeile haben, aber wir lassen sie für später. Und im Moment haben wir unseren Schlag nur inspizieren. Und wie Sie sehen können, hat die Seite jetzt, da die Seite eingeengt ist, oben das Bild, den Inhalt unten. Und wenn wir es bis zu dem Punkt erweitern, an dem es größer wird als der große Bruchpunkt können Sie sehen, dass es dann das Bild rechts ablegt, was die Rückseite des HTML ist und es gibt Ihnen einen Text und heben Sie an. Wenn wir also im HTML schauen, haben wir unser H1. Dann darunter der Absatz, den wir gemacht haben, hey Leute, stattdessen diesen Inhalt für uns aus der Markdown-Datei. Dann geh zu unserem div und wir haben unsere beiden Buttons. Der erste ist blau und solide, was der primäre BTN ist, ebenfalls groß, und das zweite ist ein hohles Grau und das heißt BTN, skizzieren Sie standardmäßig sekundär und sekundär, graue Farbe. Und es ist auch ein großer Knopf. Die nächsten Schritte, das Hinzufügen Padding und Rändern zu den Schaltflächen, kehren zur Index- oder HTML-Datei zurück und gehen zur ersten Schaltfläche. Und dann halten wir Alt gedrückt und klicken in Sekundenschnelle Kusto, um die gleiche Klasse auf beide anzuwenden . Und wir machen px für was das tun wird. P für das Auffüllen von x ist für die horizontale Achse, sowohl links als auch rechts. Und für ist der Betrag, den wir beantragen werden. Die Polsterung wird die Innenseite des Knopfes links und rechts neben den Tics sein. Dort noch mehr Platz. Die letzte Klasse, die ich hinzufügen werde, besteht darin, am Ende der ersten Schaltfläche einen Rand hinzuzufügen. Und das bedeutet, dass zwischen ihnen etwas Platz ist. das zu tun, machen wir MA für Marge End to. Das Gegenteil von Marge in dieser Marge ist MS für Margin Stop. Das hebe ich dir auf. Und dann werden wir uns die Seite ansehen. Wir klicken mit der rechten Maustaste auf den ersten Button und prüfen ihn. Sie können sehen, dass wir unser px haben, für das beide Seiten des Textes auffüllt. Und wenn Sie diesen Teil der Developer Tools nach unten scrollen, können Sie sehen, dass wir unsere Polsterung von 24 haben und die Seite, die die Größe des Buttons vergrößert. Wir haben auch geringfügig das Ende von acht und fügen dann ein bisschen zusätzlichen Platz zwischen ihnen hinzu. Ich überprüfe dann pro Sekunde Knopf. Sie werden auch sehen, wie hoch diese Marge von 24 ist, um den Button etwas länger zu machen. Dieser letzte Schritt ist ziemlich wichtig und das ist bedingt die Anzeige von Schaltflächen. Werfen wir einen Blick darauf. Innerhalb dieser beiden Tasten verlassen sie sich auf die PBT-Endpunkt-URL für Taste eins und Taste zwei und Punkt txt für Taste eins und Taste zwei. Lassen Sie uns nochmals in den Indexpunkt md gehen und versuchen wir, einen dieser Parameter zu deaktivieren und zu sehen, was passiert. Sie werden dies keinen Text in Button eins sehen und es sieht ziemlich hässlich aus. Es ist wirklich ein kleiner Fehler. Wir würden das nicht auf unserer Website wollen, wenn es keinen Text gäbe. Ich werde die URL für die zweite Schaltfläche hier nicht deaktivieren , die mit dem Hash-Schlüssel ist, weil wir in YAML arbeiten. Sie können auf der zweiten unter H ref sehen, es heißt unbekannt, das ist auch ein kleiner Fehler. Was wir also tun werden, ist, dass wir Hugo einrichten, dass, wenn einer dieser Parameter fehlt, die Schaltfläche nicht angezeigt wird oder wenn Sie das ganze Los deaktivieren, die Schaltfläche weiß angezeigt. Erstens verwende ich den Befehl width. Und wir dachten, das ist bedingt. Es sucht nach dem Parameter , den Sie eingefügt haben. Also werden wir Punktparams einsetzen, Punkt BTN eins. Also wenn einige Zecken dazwischen in einem vorgesehen sind. Dann heißt das wahr. Und es wird zeigen, was sich in den Klammern befindet. Also kommen wir auf einen Knopf und setzen ein End-Tag, wenn überhaupt etwas in BT und einem vorhanden ist. Und derzeit haben wir eine URL vorhanden, die true zurückgibt. Und es wird diese Daten jetzt einbringen und diese Informationen auch dem Kontext der Bedeutung zuweisen . Wir können diesen Text hier löschen, params dot BTN eins, weil wir ihn hier bereits in Weizen zur Verfügung gestellt haben. In der Tat wird dieser Teil nicht funktionieren, dass params btn einen Punkt txt , weil das nicht innerhalb von Punkt Params Punkt BTN eins existiert, aber Punkt txt existiert dort und Punkt-URL tut es. Lasst uns das aufheben. Und wir sollten eigentlich keine Veränderung sehen. Werfen wir einen Blick darauf. Nichts hat sich geändert, alles funktioniert, aber wir haben immer noch das Problem, keinen Text zu haben , und das liegt daran, dass wir den Text deaktiviert haben. Gehen wir zurück und geben wir eine bedingte Aussage ein. Und das ist wenn dot txt, wenn end. Wir haben also zwei Dinge passiert IV und dot txt, URL. Dann wird das passieren und wir müssen eine Aufnahme machen. Und wenn danach ein Punkt txt nicht vorhanden ist oder die Punkt-URL nicht vorhanden ist, wird diese Schaltfläche nicht angezeigt. Werfen wir einen Blick darauf. Wie Sie sehen können, ist dieser Button verschwunden. Lassen Sie uns über-Parameter wieder aktivieren und die Schaltfläche sollte wieder angezeigt werden. Gehe zurück in die Markdown-Datei und ich aktiviere den Text wieder. Ich aktiviere die Schaltfläche wieder auf URL. Das werden wir speichern. Jetzt haben wir beide Text und ihr seid anwesend. Das ist dazwischen. Ich schaue es mir mal an. Da gehst du. Wir haben unseren Button, reparieren unseren HTML-Code für den zweiten Button und machen dann einen weiteren Test. Ich kopiere diesen Code. Hier unten. Ich setze mein n-Tagging ein. Ich werde das ändern, um TM2 zu sein. Ich werde den Code entfernen , den wir bereits angegeben haben. Die Breite. Wir setzen eine N-Tagging für die if-Anweisung. Speichern wir das und überprüfen wir die Website. Wir haben beide Schaltflächen nur für den letzten Test, wir werden einen der Parameter für den zweiten Button deaktivieren . Und dann zeige ich dir, wie wir die Tasten einfach komplett ausschalten können . Wenn ich also zum Markdown gehe, deaktiviere ich einfach die URL für die zweite Schaltfläche. Du kannst sehen, dass es verschwindet. Und schauen wir uns an, wie Sie den Button richtig deaktivieren können. Deaktivieren Sie die Schaltfläche ordnungsgemäß. Alles was Sie tun müssen, wenn wir alle diese Primitive nur hervorheben , und das ist der richtige Weg. Die Verknüpfung und der Visual Studio-Code lautet Control K, C. Dann befehlen Sie alle drei Zeilen einmal für Sie. Wie Sie es sehen können, entfernen Sie den Knopf. Und das ist wahrscheinlich die absichtliche Möglichkeit, die Schaltflächen zu deaktivieren. Kontrolliere KU, um das Kommentieren Heben Sie den Kommentar auf. Es ist also wieder aktiviert, und wir speichern das und wir sind bereit für nächste Tutorial, in dem wir uns der Anpassung der Anzeige des Blocks befassen , den wir gerade in Burma erstellt haben. Sie hatten Probleme mit irgendeinem Teil dieser Lektion, spulen Sie zurück und versuchen Sie es erneut. Und wenn Sie immer noch Probleme haben, gibt es unten einen Link für Diskussionen, und ich werde mein Bestes tun um Ihnen so schnell wie möglich zu helfen, ist wirklich wichtig. Sie verstehen alles , was den Unterricht macht, bevor Sie mit dem nächsten fortfahren. Wir sehen uns in der nächsten Lektion. 7. Anpassen der Startseite mit Bootstrap 5: Willkommen zur nächsten Lektion. In dieser Lektion werden wir den Inhalt anpassen, den wir zuvor mit Bootstrap-Klassen gutgeschrieben haben. Nach Abschluss dieser Lektion können Sie die Bootstrap-Containerbreite von fünf einschränken . Lage sein, Rinnen-, Padding- und Margin-Bootstrap-Klassen zu verwenden . Um Online-Inhalte zu rechtfertigen, mussten wir die Grid- und GAP-Klassen verwenden. Der erste Schritt besteht darin, die Containerbreite einzuschränken , jedoch nur für sehr große Displays. Muss wieder in den Indexpunkt, die HTML-Datei aus der vorherigen Lektion, zurückkehren. Und innerhalb der Containerklasse werden wir die Klasse von Col Dash XX L Dash hinzufügen . Was das auf Bildschirmen mit einer Breite von XX L tun wird, wird der Container auf die Breite von acht beschränken . Jetzt verwendet Bootstrap 12 Einheiten. Wir benutzen acht von zwölf dieser Einheiten. Werfen wir einen Blick darauf, was XX L bedeutet. Wenn unser Bildschirm 1400 Essiggurken oder Wasser ist, beträgt die Breite 1 12. davon. Der nächste Schritt besteht darin, Inhalte zu rechtfertigen und zu lernen. Wir werden dies in unserer Reihe tun, damit beide Säulen auf den Weihnachtsmann ausgerichtet sind und die Zentren, die sie sowohl in horizontaler als auch in vertikaler Richtung zentriert haben, rechtfertigen . Wenn Sie sich die Bootstrap-Dokumente unter „Flicks“ in Dienstprogrammen ansehen, sehen Sie, dass Sie den d Flex- oder Display-Flex-Kurs aktivieren müssen, um Inhalte zu rechtfertigen . Und wenn Sie nach unten scrollen, um Elemente auszurichten, werden Sie ebenfalls sehen, dass Sie d flex aktiviert haben müssen. Kommen wir also zurück zum Projekt und schauen wir uns etwas Rechtfertigung und Futter an. Wir möchten, dass unser Bild, unsere Bildspalte, sowohl in der vertikalen als auch in der horizontalen Achse zentriert angezeigt wird. Jetzt müssen Sie nicht wirklich d flex einsetzen , da in der Zeile bereits Flex aktiviert ist. Was wir verwenden Align Items dash center und rechtfertigen. Content-Dash-Center. Ich lege das Salz auf einen größeren Bildschirm. Möglicherweise haben Sie Probleme, Lacey anzusehen, wenn Sie auf einem mobilen Gerät sind, da es eine ziemlich große Auflösung hat. Derzeit ist die Breite jedoch auf unter 1400 Pixel eingestellt. Und dies ist die ursprüngliche beabsichtigte Anzeige der Website. Sie können links und rechts ein bisschen Polsterung sehen wenn wir die Größe vergrößern und verringern. Aber das ist das standardmäßige Bootstrap-Verhalten , wenn Sie den Standardcontainer verwenden Wenn wir die Breite auf über 1400 Pixel erhöhen, werden Sie sehen, dass er plötzlich in diesem ziemlich viel Platz hier, auf der Seite, einrastet , und das schränkt unseren Container ein, damit der Inhalt nicht zu groß wird, weil wir nicht möchten, dass dieser Block hier die volle Breite der Seite hat, wenn es sich um einen großen Bildschirm handelt und wenn wir den Mauszeiger über den Container bewegen, Sie werden sehen , dass es eine große Menge an Polsterung auf beiden Seiten gibt. Wenn wir zum CSS gehen, werden Sie sehen, dass wir eine Mindestbreite von 1400 haben. Das ist die Medienabfrage und du bist über 1400 gegangen, benutzt Flicks, um die Breite auf 66% zu beschränken, was acht Zwölftel entspricht, würde ich von 12 Spalten hinzufügen. Städte seltsames Verhalten danach, weil wir nicht wollen dass dieser Block hier, den wir erstellt haben auf einem großen Bildschirm zu breit ist, wie Sie sehen können, sieht er auf einem großen Bildschirm ziemlich gut aus. Und wenn wir auf unter 4800 schrumpfen, sieht es auch auf einem kleineren Bildschirm ziemlich gut aus. Jetzt schauen wir uns an, ein paar Polster und Dachrinnen hinzuzufügen . Und das ist die Polsterung. Wir schaffen etwas Platz über und unter der Reihe und die Dachrinnen sind ein generischer Allround-Raum. Gehe zu deiner index.html Datei auf dem div für die Zeile am Ende füge P dash f5 hinzu. Dadurch wird über und unter der Zeile etwas Polsterung hinzugefügt, hat etwas Platz innerhalb der Zeile und möglicherweise der Navigationsleiste und etwas Platz unter der Zeile und möglicherweise jedem zukünftigen Inhalt. Wir werden auch g dash f5 hinzufügen , um rundum eine Rinne hinzuzufügen. Wenn wir uns unsere Reihe ansehen, sagen Sie, dass wir unsere P Y5-Polsterung oben und unten haben, und wir haben G5 angegeben. Wir gehen in die Kolumne, du wirst sehen, dass wir die Gatorade haben, die Seite in Grün. Das bedeutet Polsterwinde, die einfachste Art, mit Bootstrap zu arbeiten. Nun schauen Sie sich an, verschiedene Spaltengrößen an verschiedenen Breakpoints zu erstellen . Dies ist für unseren Bild angegebenen Aufruf LG G6 am großen Haltepunkt, die Spalte für das Bild wird sechs sein. Schauen wir uns die Anfangsgröße unter „Seek“ an. Also machen wir Col Dash Zinn. Das ist für den extra kleinen Haltepunkt. Wir geben nie Exzess an, wir lassen es einfach aus und das ist der Standard dessen Bootstrap, einfach mobile-first. Wenn es ein kleines Gerät ist, ruf an, SAM. Wir wollen, dass es landesweit acht von 1012 ist. Spalten breit auf einem kleinen Display. Dann für viel bis zu groß und dann für Lodge und größer werden es sechs von 12 sein, also die Hälfte des Bildschirms. Also lasst uns das aufheben. Schauen wir uns mal mit der rechten Maustaste an und prüfen Sie es. Wir bringen es bis auf die kleinste Größe. Und wir klicken auf die erste Spalte, die für unser Bild gedacht ist. Und Sie werden sehen, dass es Spalte zehn verwendet, was 83% der Breite des Bildschirms entspricht. Du hast diese grünen Balken auf beiden Seiten. Wir ziehen es dann größer und wir werden sehen, dass es sich geändert hat. Wir haben jetzt den kleinen Breakpoint erreicht und er zeigt ihn jetzt 66% an, weil wir das Bild an diesem großen Haltepunkt nicht zu groß haben wollen. Dann gehen wir zum großen Haltepunkt hoch. Sie werden sehen, dass es auf sechs geändert wurde, was der halben Breite des Bildschirms entspricht. Hast du in der Reihe geholfen? Sie werden sehen, dass wir den PY Five haben , der oben und unten grün gepolstert ist. Und wenn Sie zur Spalte gehen, werden Sie sehen, dass links und rechts eine Polsterung vorhanden ist, und das ist von der Rinne. Das nächste ABG verwendet Raster und Lücke zum Anzeigen der Schaltflächen auf einem mobilen Gerät. nun ursprünglich in Bootstrap Wenn Sie nun ursprünglich in Bootstrap eine Schaltfläche als volle Breite ihres Containers anzeigen möchten , also in Bootstrap vier, würden Sie eine Schaltfläche verwenden, eine Block-Button-Klasse. Aber in Bootstrap Five müssen wir das D-Gitter für das Anzeigeraster verwenden und dann die Lücke verwenden, um den Abstand zwischen ihnen festzulegen. Also lasst uns das mal ausmachen. Es gibt ein div, das die Schaltflächen anstelle von vorher im Inneren umschließt , das die Klasse angibt. Dann verwenden wir d Strichgitter für das Anzeigeraster. Und dann benutzen wir eine Lücke von zwei. Also Lücke Dash T2. Jetzt wird das von keinem Angebot aus bootstrap. Das ist also irgendwie ein Handy anzeigen, aber wir wollen nicht , dass das passiert. Die größeren Haltepunkte wird es ausreichen. Wie Sie sehen können, ändert es den Haltepunkt der Lodge. Also machen wir d Dash, LG, Strich, Flux. Am großen Bruchpunkt. Es wird sich vom Anzeigeraster zu einem Flex über dem großen Haltepunkt ändern einem Flex über dem , und alles wird wie gewohnt angezeigt, und das ist mit dem Fluss. Aber wenn wir dann unter den großen Wert gehen, werden Sie sehen, dass wir unser Rasterlayout mit einer Schaltfläche voller Breite haben, aber wir haben hier ein Problem und das ist der Rand am Ende dieser Schaltfläche. Wenn ich also den Mauszeiger über diesen Button fahre, werden Sie sehen , dass sich rechts auf der Schaltfläche dieser orangefarbene Rand befindet. Und das liegt daran, dass wir die Klasse in einem Strich T2 haben. Wir können das in Ordnung bringen. Wir können eine Vorschau von Carlo machen, wenn Sie möchten. Wir können ME Dash LG machen, Dash T2. Wie Sie unten sehen können, gibt es keine Marge, aber wenn wir über LJ steigen, haben wir diese Marge. Gehen wir zurück nach Hugo und lasst uns das in Ordnung bringen. Also gehen wir auf unseren ersten Knopf. Wir wollen unsere Marge haben, also machen wir ein Dash LG, das repariert ist. Jetzt ist es tatsächlich Platz auf diesem mittleren Haltepunkt, um die Tasten nebeneinander zu haben. Also werden wir es so einstellen, dass die Tasten nur bei einem kleineren unteren Bereich vertikal ausgerichtet sind. Geh zurück und wir stellen fest der Flex bei MD und höher auftritt. Und dann legen wir fest, dass unsere Marge nur bei MD oder höher gilt. Das werden wir speichern. Wie Sie sehen können, sind wir derzeit bei MD. Wir sind vertikal ohne Bild und unsere Texte, aber unsere Buttons sind nebeneinander. Wir gehen runter zum kleinen Haltepunkt. Sie werden sehen, dass sie vertikal sind, alles ist vertikal. Und dann gehen wir bis zum großen Bruchpunkt. Sie werden sehen, dass wir für alles das Side-by-Side-Layout haben. Das war's für dieses Video. Wenn Sie neue Probleme haben, spulen Sie es zurück und geben Sie Ihr Bestes. Ansonsten gibt es die Diskussion unten und ich werde versuchen, bald wie möglich wieder zu kommen. Andernfalls können Sie in den Ressourcenbereich gehen und den Code für diese Lektion herunterladen und Ihr Bestes tun , um das zu debuggen, was Sie getan haben. Und wir sehen uns in der nächsten Lektion. 8. Bootstrap 5 Karten und Iteration (Looping) mit Reichweite: Willkommen zur nächsten Lektion. Wir werden fünf Bootstrap-Karten erstellen, und wir werden Gliedmaßen erzeugen, indem wir Daten mit Hugos Bereichsfunktion iterieren Daten mit Hugos Bereichsfunktion Sie benötigen einige Bilder für diese Lektion. Wenn Sie in den Ressourcenbereich gehen, sehen Sie einen Zip-Ordner für diese Lektion. Wenn Sie es extrahieren, finden Sie die erforderlichen Bilder im statischen Ordner. Nach Abschluss dieser Lektion können Sie eine Karte mit Bootstrap-Dateien und Utility-Klassen erstellen . Sie könnten Daten für verschiedene Karten in der Titelseite erstellen . Und Sie könnten mehrere Karten generieren, indem Sie über die vorderen Metadaten der Seiten mithilfe der Range-Funktion der Jungs iterieren . Das erste, was wir tun werden, ist eine Karte mit Bootstrap-Fives Utility-Klassen zu erstellen . Das erste, was wir tun müssen, ist unsere Datei index.html zu öffnen . Wir werden einige Abschnitte und diese HTML, fünf semantische Tags erstellen . Also haben wir in Abschnitt und einem Tab gelehrt. Dann werden wir den gesamten Inhalt dessen, was wir in der letzten Lektion erstellt haben, ausschneiden und einfügen . Wir schneiden das mit Control oder Command X aus und fügen es ein. Und wir werden eine Klasse hinzufügen, nur den Fall, dass ich dies in Zukunft mit CSS anvisieren muss, möchten wir diesen bestimmten Abschnitt so ändern, dass es keine Klasse war, und wir nennen ihn Helden. Verwenden Sie dann die Verknüpfung Alt Shift F to Format Abschnitt. Die Formatierung sieht gut aus. Dann machen wir einen neuen Abschnitt für dieses Video. Wieder in einem anderen Abschnitt, Tags. Also geben wir Abschnitt und Tab ein. Dann müssen wir den Container, die Zeile und die Spalte erstellen . Mach diesen Container. Tab, Registerkarte div Punkt Tab. Diese spezielle Spalte. An dieser Stelle im Video teilen wir den Bildschirm in drei auf, damit wir drei Karten haben können. Wenn du jetzt 12 durch drei teilst, bekommst du vier. Wenn wir nur stattfinden wollten, wenn der Bildschirm das Medium, der mittlere Bruchpunkt oder größer ist , wollen wir nicht versuchen, drei in einen kleinen Bildschirm zu zerquetschen . Füge Strich, MD, Strich vier hinzu. Werfen wir einen Blick auf den Kartencode auf der Bootstrap-Docs-Website unter Komponenten, die wir haben Karte. Scrollen Sie einfach nach unten und vom ersten ersten Beispiel versuchen wir das zu erstellen. Wir kopieren diesen Code und fügen ihn in unsere Spalte ein. Und wir verwenden Shift Alt F, um die Formatierung zu korrigieren. Dieser Teil ist das Style-Tag. wollten wir nicht , weil wir mit reinen CSS-Klassen anfangen werden , anstatt Style-Overrides. Ich wünschte, du könntest auch Inline-Styles nennen. In der Klasse des Bildes werden wir IMG Dash Fluid hinzufügen , sagte , dass das Bild für uns basierend auf dem verfügbaren Speicherplatz ändern wird . Wir werden uns vorerst keine Sorgen um den Alt-Text machen. Wir werden die Quelle der Bildgebung angeben. Jetzt müssen Sie die Dateien für diese Lektion herunterladen und die vollständigen Platzhalterbilder aus dieser ZIP-Datei extrahieren. Und fügen Sie dann einen Raum ein, in dem Sie Visual Studio-Code nicht direkt einfügen können . Sie müssen den Bildordner mit dem Datei-Explorer öffnen, herausfinden und dort einfügen. Es gibt meine vier Platzhalterbilder. Ich werde die Quelle zurückziehen und den Schrägstrich IMG Slash Platzhalter einen Punkt JPEG setzen, um dieser Datei dort zu entsprechen. Ich belasse den gesamten Standardtext und den Standardlink für die Schaltfläche. Lassen Sie uns eine Überschrift an die erste Stelle setzen und wachten kopieren und fügen Sie diese dreimal ein, zwei weitere Male. Geben wir eine Überschrift ein und wir kopieren und fügen die Spalte noch zweimal ein. Wir hatten also insgesamt drei Spalten. Und dann über der Zeile und unter dem Container reden wir über dich bro, reden wir über dich bro, und div dot col wird unsere Überschrift machen, unser H2, aber wir verwenden eine Schriftgröße von eins, also verwenden wir die Größe unseres H1, aber wir werden die Größe unseres H1 verwenden, aber wir werden die Größe unseres H1 verwenden werde ein H2-Tag verwenden, weil es der zweitwichtigste Treffer auf der Seite ist. Um das zu tun, machen wir einen Punkt-FS-Strich. Das ist eine Bootstrap-Klasse für Schriftgröße eins, die eine Schriftgröße der Überschrift 1 ist die auch etwas Polsterung darunter legt. Also machen wir Punkt p, b Strich drei. Im Moment werden wir eine manuelle Überschrift einsetzen und das wird Out-Dienste sein. Lasst es uns speichern und schauen es uns mal an. Es sieht großartig aus, aber ich denke, wir sollten an die Überschrift schicken und wir sollten etwas Polsterung unter diese Reihe legen , damit es nicht mit dem Foto kollidiert, das wir in einer zukünftigen Lektion machen. Backup in unserer Spalte hier verwenden wir den Textstrich. Der Weihnachtsmann hat alles geschickt, den ganzen Text in dieser Spalte. Dann werden wir in unserer Reihe hier PB Dash drei machen. Das sieht viel besser aus. Der nächste Schritt ist, dass wir einige Daten erstellen , damit wir mehrere Karten generieren können. Öffnen Sie den Inhaltsordner und die index.html. Und unter den Button-Daten legen wir einen Eintrag für den Kartentitel ein. Wir nennen das unsere Dienste, wie wir es bereits genannt haben. Und dann legen wir den Karteneintrag und sie drücken Tab, drücken den Strich. Und dann geben wir den Titel ein. Wir rufen die Karte mit dem Titel uns aus, um es einfach zu halten, diese nicht stummgeschaltete Registerkarte. Und wir werden das Bild für diese bestimmte Karte angeben. Also wird es IMG sein, was wir benutzen werden. Und dann wird die Adresse Slash IMG Slash Platzhalter sein. Ein Punkt JPEG wird dann unsere Texte machen. Die Kolumne. Wir können Lorem Ipsum dafür verwenden, aber es wird nicht funktionieren im vorderen Metallbereich, den wir hatten, bis zu unserem Inhalt hier können wir Lorem eingeben und wir versuchen 20. Das ist wahrscheinlich ein gutes Bindeglied. Also schneiden wir das ab. Entferne die zusätzliche Zeile. Wir fügen das in unseren Text ein. Als nächstes müssen wir den Button machen, also machen wir diesen BTN Doppelpunkt. Sie geben ein und Tabbing würde Text machen. Wir ziehen diese Box und man nimmt und dann URL und wir machen das vorerst zu einem Hash. Lassen Sie uns all das hineinziehen und die Rücktaste verwenden, um an den Anfang dieser Zeile zu gelangen und sie einzufügen und dann erneut die Rücktaste zu betreten , fügen Sie sie erneut ein. Der zweite klickt auf die Nic auf den Treiber Nummer eins, wir halten Alt gedrückt und klicken rechts neben den anderen Zahlen und ändern sie in Zweien und Blau, dasselbe mit der Alt-Taste für die dritter Eintrag. Eine letzte Sache ist, dass Leute normalerweise einen Hash verwenden , wenn sie keine URL angeben möchten, was wir Markdown und in Markdown verwenden und die Hashes zum Kommentieren. Also müssen wir ein paar umgekehrte Kommas um diese Hashes legen ein paar umgekehrte Kommas um , um sie zur Arbeit zu bringen. Jetzt werden wir über den Dato iterieren, nur drei Karten mit der Bereichsfunktion gutschreiben. Wir legen unsere Daten zum ersten Gegenstand , der für uns wichtig ist, da die Karten insgesamt im Herbst in Reichweite sind. Karten fragen etwa drei Karten, die hier zu finden sind. Und sobald wir innerhalb der Karten liegen, haben Sie Zugriff auf Punkttitel, Punkt IMG, Dot TXT, Dot BTN Dot txt und Dot BTN Dot URL. Zunächst löschen Karten die EL-Dienste-Ticks, indem sie zwei geschweifte Klammern setzen, und da es nicht um Standard-Hugo-Seitenparameter handelt, müssen wir zunächst Punktparams verwenden. Und dann Kartentitel und schließen Sie dann die beiden geschweiften Klammern. Finde dann die drei verschiedenen Spalten für die Karten. Und wir werden die letzten beiden löschen. Dann oberhalb der Spalte. Neue Linie. Und wir benutzen Range. Und wir werden über Punktparams, Punktkarten reichen. Dann müssen Sie unter der Spalte ein intaktes einlegen. Gehen wir einen Schritt nach dem anderen durch. Das erste, was wir tun werden, ist das Bild. Das werden wir löschen. Und es wird Punkt sein. Img wird der Parameter sein, weil wir uns im Karten-Objekt befinden. Und dann setzen wir den Titel auf den HE-Punkttitel ein. Und wir kopieren den Titel und fügen ihn in den Alt-Text für das Bild ein. Und das ist fair, wenn der Benutzer die Maus über das Bild hält oder wenn der Benutzer über eine Bildschirmlesetechnologie verfügt, dann den Text im Absatz löscht und Punkt txt einfügt. Dann für den Button , weil wir diesen BTN Punkt txt geschlagen haben. Url verwendet eine width-Anweisung und es wird width dot btn sein. Dann wird er Punkt-URL, die Höhendrift, den Link haben . Und dann haben wir Punkt-Takes für den Button-Text. Dann müssen wir das tun. Wie Sie jetzt im vorherigen Video gesehen haben, werden Sie, wenn Sie keinen Text in die URL, alle Textfelder einfügen , ein Problem mit der Anzeige oder dem Tag haben . Jetzt repariere das. Wir können eine if-Anweisung verwenden. Wenn wir also sowohl URL als auch Ticks benötigen, sind drei vorhanden. Wenn also der Endpunkt-URL-Punkt ankreuzt, legen wir das Endtag darunter. Weil wir drei Karten zeigen und sie werden nur Seite an Seite sein. Am mittleren Haltepunkt, Ohio. Wir müssen einen Rand unter den Karten hinzufügen, damit, wenn sie vertikal in extra kleinen und kleinen Haltepunkten gestapelt sind , ein gewisser Abstand zwischen ihnen sein wird. Also machen wir sie, stell drei die Karte ab. Lasst es uns speichern und sehen, wie es aussieht. Es zeigt sich großartig. Wir haben unsere einzigartigen Bilder für jede Karte. Wir haben den Weg von der Markdown-Front-Angelegenheit hereingezogen . Wir haben auch einzigartige Knöpfe. Lassen Sie uns es untersuchen und sehen, was passiert , wenn wir die hellen Punkte nach unten bringen. Also sind wir jetzt an unserem kleinsten Lichtpunkt. Wie Sie sehen können, haben wir den Abstand zwischen den Karten und das werde ich einfach im CSS ansprechen. Wenn Sie den Mauszeiger über fahren, können Sie dies sagen, die orangefarbene Polsterung unter der Karte. Und wenn wir es herausbringen, bringen wir es zum MD-Haltepunkt und Sie werden sehen, wie er auf drei schnappt. Zerquetschen in drei da. Das war's für die Lektion. Probleme haben, überprüfen Sie das Video noch einmal und wenn Sie immer noch keine Dinge zum Laufen bringen können, gibt es unten eine Diskussion und ich werde versuchen, mich so schnell wie möglich bei Ihnen zu melden. Sie können die Dateien für diese Lektion auch im Bereich Ressourcen herunterladen . Dann kannst du deinen Code von dort aus debuggen. Danke fürs Zuschauen. Wir sehen uns in der nächsten Lektion. 9. Bootstrap 5 Navbar mit Hugo: In dieser Lektion versuchen wir, die Bootstrap-fünf Navbar in die Website zu integrieren und Menüelemente mit dem Menüsystem von euch zu generieren . Nach Abschluss dieses Videos können Sie ein Menü mit den fünf Navbar-Dienstprogrammen Bootstrap erstellen . Sie könnten Menüelemente mit den Menüparametern von euch generieren . Es wäre in der Lage, die Menüelemente zu konfigurieren, die mithilfe von Barrieren für die vordere Seite für jede einzelne Seite angezeigt werden mithilfe von Barrieren für die vordere Seite für jede einzelne Seite angezeigt und auch eine Konfigurationsdatei verwenden. Im ersten Teil dieses Videos werden wir die Bootstrap-fünf-Navbar mit den Utility-Klassen von Bootstrap erstellen . Ein Moment Navbar-Abschnitt des Komponenten-Teils der Bootstrap-Five Docs-Website. Wenn Sie zum ersten Beispiel nach unten scrollen, kopieren wir das und fügen das gesamte Projekt direkt ein. Wir gehen in den Layouts-Ordner und dann in Partials, und wir gehen zu header.html. Wir löschen den Kopfzeilentext und fügen das ein, was wir gerade von der Bootstrap-Website kopiert haben. Das werden wir speichern. Stellen Sie sicher, dass ihr als Laufen fungiert und wir schauen uns mal an. Nice und Navbar taucht jetzt auf, aber es gibt einen Unterschied in der Hintergrundfarbe. Wenn wir die Navbar untersuchen, stellen wir fest, dass sie BG-Licht als Hintergrundfarbe hat. Das ist also das erste , was wir reparieren werden. Das ist viel in Ordnung. Das bedeutet, dass die Textfarben zu viel Hintergrund passen. Wir werden das Hintergrundlicht ändern und das in BG-Körper umwandeln. Bg Körper ist es mit der Körperfarbe im Hintergrund? Ich befinde mich im Abschnitt „Dienstprogramme“ und „ Hintergrund“ der Bootstrap-Docs-Website. Und du wirst sehen, bevor wir bg light benutzt haben, das sehr hellweiß ist. Sie können auch bg white wählen, aber das nützlichste für uns, da wir speziell möchten, dass die Navbar mit der Hintergrundfarbe des Körpers übereinstimmt, wird sie in BG-Körper ändern. Bg-Körper kann modifiziert werden. Aber das ist nicht der Sinn dieses Tutorials. Wie Sie sehen können, fügt sich die Navbar jetzt in unseren Hintergrund ein. Bevor wir den Navbar-Text fortsetzen , der tatsächlich Navbar liest. Wir werden das durch einige geschweifte Klammern, Filmpunktseite, Punkttitel ersetzen , und das ist der Name der Website. Und dann gehen wir zur Suchleiste und löschen das, damit wir das gesamte Formular loswerden. Dann löschen wir den deaktivierten Nav-Link Herbst löscht das gesamte Dropdown-Element, bleibt nur den aktiven und Standardlink Shift Alt F2-Format. Und das speichern wir und wir werden es überprüfen. Ich glaube, wir sind bereit für den nächsten Schritt. Jetzt richten wir unsere Vorlage ein, um Menüelemente zu akzeptieren, die ihr generieren werdet. Unter der Menüvorlagenseite im Hugo Doxy ist ziemlich komplex. Wir werden Teile für dieses Beispiel verwenden. Wir werden entweder Punkt-, Punkt-, Punktmenü ist Dopamin. werden wir uns keine Sorgen machen. Hat Kinder. Wir werden den neuen aktuellen Parameter des Ehemanns verwenden , um eine aktive Klasse einzufügen. Wir werden auch den Namen und die URL einbeziehen. Das fanden wir in den Hugo Docs zu kompliziert. Folgen Sie also sehr genau und ich zeige Ihnen, wie es geht. Wir fangen mit diesem aktiven Link an. Er, der Listeneintrag mit dem aktiven Link darüber. Kredit einer beliebigen Linie. Und wir werden Range verwenden, wie wir es zuvor benutzt haben. Und es ist Punkt-Site mit einem Kapital-S-Punktmenüs und dann Domain. Und dann nach diesem Listenelement müssen wir es tun. Und dann haben wir die Nav-Link-Klasse und die aktive Klasse dauert immer t. Wir möchten nicht , dass dies angezeigt wird, wenn es nicht die aktuelle Seite ist. Was wir also tun werden, bevor wir aktiv sind, werden wir ein paar geschweifte Klammern einsetzen. Wir verwenden, wenn wir ein Dollarzeichen einsetzen müssen da sich ein Dollarzeichen auf die Seitenkontexte bezieht , die sich hier oben befinden, aber innerhalb des Bereichs sind es nicht die Seitenkontexte. Wir haben es mit den Menüpunkten zu tun, also verwenden wir ein Dollarzeichen und dann ein Punktmenü aktuell. Nun, bei den Hauptstädten gehört das Menü, auf das wir abzielen, meins. Dann musst du danach einen vollen Halt machen. Wir haben ein Leerzeichen, bevor wir aktiv sind, weil ich nicht möchte, dass aktiv mit dem Nav-Link kollidiert. Uns geht der Platz aus. Wenn Sie Control V oder Command B verwenden , wird der Dateibrowser auf der linken Seite entfernt. Dann müssen wir kurz zuvor zwischen einer On-Seite und den invertierten Kommentaren einer On-Seite und den invertierten Kommentaren ein Endtag einsetzen. So können Sie das herausfinden, ob es richtig ist oder nicht. Wenn Sie alles hervorheben, von diesen ersten geschweiften Klammern bis hin zur intakten und verzögerten, werden Sie sehen, dass es dem Beispiel unten entspricht . Ich werde Control Z ausführen, weil ich das behalten möchte. Ich muss jetzt meinen Link eingeben und wir verwenden die Variable, es ist alles Großbuchstaben-URL. Dann werde ich das für die SMS zurückbringen. Dann verwenden wir die variable Punktkapital N. Ich werde diesen zweiten Eintrag nicht löschen , da er nicht erforderlich ist. Alles wird durch die Reichweite generiert und speichert das. Werfen wir einen Blick darauf. Derzeit wird nichts angezeigt, da wir die Menüelemente konfigurieren müssen und das mit Frontmaterie und auch einer Konfigurationsdatei tun werden. mit Front-Meta konfigurieren, gehen wir auf jede einzelne Seite und teilen Hugo mit, in welchem Menü diese Seite angezeigt werden soll. Wir können auch das Weiß der Seite konfigurieren , in der es angezeigt wird. Control Beta öffnen Sie den Dateianzeige-Explorer oder klicken Sie auf die erste Schaltfläche, gehen Sie zum Inhalt. Und wir haben momentan nur eine Seite, und das ist Indexpunkt MD. Schlage die Spitze hoch. Ich werde es oben aufstellen, damit es leicht unter Entwurf zu finden ist, wir müssen einen Eintrag namens Menü setzen, und wir nennen das main und dann weiß. Und das werden wir jetzt in seine Zehn bringen, wobei der weiße Abschlag sie am besten in Zehnschritten macht. Und wenn Sie sich umziehen müssen, haben Sie neun Zahlen, um Platz zu spielen. Sie müssen nicht alles neu anordnen. Das werden wir speichern. Und wir schauen uns mal an. Home-Link ist aufgeschleuchtet. Wir klicken mit der rechten Maustaste darauf und prüfen es. Wir werden sehen, dass wir die aktive Klasse haben. Wir haben auch die aktuelle RA-Seite und die RA aktuell bis Drehbuchautoren, die für die aktuelle Seite verlinkt. Jetzt konfigurieren wir das Menü mit einer Konfigurationsdatei. Und wir informieren mich auch über die Vorlage , damit der Link auf einer neuen Seite geöffnet werden kann , wenn Sie dies in der Konfigurationsdatei angeben. Zunächst öffnen wir unsere Konfigurationsdatei. Und unten heißt es Config Dot YAML. Lassen Sie ein Leerzeichen in Ruhe diesen Hash für einen Kommentar ein und wir erklären, was wir tun. Und wir erstellen Menü-Links über die Konfigurationsdatei. Das erste Herbst-Leichtmenü mit einem Doppelpunkt und Anti- und Tab. Wir konfigurieren unser Hauptmenü, also setzen wir das zuerst ein. Dann ins Auto, habe Tab nicht getroffen, du hast einen Strich eingelegt. Was sind Benennen? Und der erste Link wird eingefügt, ist die GitHub-Website. Ich benutze viel und verwende dann eine Tab-URL, und es wird HTTP sein. Sie müssen das HTTP einlegen, sonst wird es nicht extern verlinkt. Es wird denken, dass es, ich denke es ist tatsächlich Teil der Website, http Semikolon Slash Slash www.github.com. Wir müssen ihm ein Weiß geben. Das ist die Reihenfolge, in der es angezeigt wird. Also geben wir die 90, damit wir wissen, dass es ganz rechts ist. Dann setzen wir noch eine ein und dieses Mal verlinken wir auf Google diese Registerkarten URL. Wir geben ihm ein Weiß von 100. Also speichern wir das. Und wir speichern es funktioniert. Das funktioniert. Und wenn wir uns die Github- und Google-Links ansehen, besitzen sie eine Schusswaffe, wie wir wollten, dass sie mit dem Weißen zusammen sind. Sie werden den Home-Link bemerken, er hat eine viel dunklere Farbe. Und das liegt daran, dass der Home-Link das aktive Tag hat. Wenn wir uns die beiden anderen Links ansehen, sagen Sie, dass sie kein aktives Tag erhalten haben. Und Sie werden feststellen, dass die Navigationslinks verschwinden, wenn er die Seite schmaler macht. Und dann jetzt in einem Dropdown-Herbst, und das ist das Standardverhalten. Wenn du gehst, kannst du das anpassen. Wenn du in deinen HTML-Code gehst. Wir haben navbar expandieren LG, wir können das in navbar expandieren md ändern, zum Beispiel, wenn Sie nicht viele Links in Tagen hatten, normalerweise in Ordnung. Jetzt können wir es viel schmal machen, bevor es kaputt geht und zu einem mobilen Menü wird. Als Nächstes erstellen wir etwas Code in unserer Vorlage , damit wir diese Links in neuen Fenstern öffnen können. Denn wenn wir diese Links anklicken, werden sie derzeit im selben Tab oder Fenster geladen , und das wollen wir nicht, weil sie leicht nie von unserer Seite wegkommen. Das erste, was wir tun werden, ist, dass wir in unsere Konfigurationsdatei zurückkehren . Ich definiere ein paar Parameter. Wenn wir uns nun Parameter in Markdown für eine Seite ansehen oder Sie es tun müssen, dann fangen Sie einfach an, auf den Mittelwert zu tippen. Aber wir schauen uns die Menükonfiguration an. Wir müssen dir tatsächlich sagen, dass wir es in einen Parameter einfügen wollen, benutzerdefinierten Parameter. Also machen wir Params mit einem Doppelpunkt und tippen dann auf und wir nennen diesen Parameter leer. Und wir machen es wahr, wenn wir diesen Link in einem neuen Fenster oder einer Registerkarte öffnen möchten . Und das werden wir auch für den nächsten einbringen. Wir speichern das und dann machen wir unseren Vorlagencode in unseren Header. Und wir erstellen den Code, der mit unserem leeren True-Parameter verknüpft ist. Eine ganze Weile Link. Bringen Sie unsere Höhenreise auf eine neue Linie. Und nachdem die Höhendrift einsetzt, als ob AQ und AQ für gleich stehen. Wenn also Punktparams gleich Punkt leer ist, wahr. Wenn also der Punkt params dot blank wahr ist, wird einige Texte eingegeben, und das ist Ziel gleich Unterstrich, leer. Grill ist gleich nein, öffnen Sie es Sicherheitsrisiken, die wir mit der Notiz kommunizieren wollen, öffnen Sie sich, und dann setzen wir unsere Antagonisten ein und wir werden das speichern. Wir schauen uns mal an. klicke auf meinen GitHub-Link und du wirst sehen, dass er auf einem neuen Tab geöffnet wird . Und das Gleiche gilt für Google. Wir klicken mit der rechten Maustaste darauf und prüfen es. Es wird sagen, dass wir ein Ziel haben gleich leere Schiene ist gleich bekannt, dass der Opener hereinkommt, und das ist großartig. Das ist das Ende der grundlegenden Bootstrap-Navbar-Lektion. Wenn Sie Fragen haben und etwas nicht klären können, bitte. Dieser Diskussionsabschnitt unten, und ich werde versuchen, bald wie möglich wieder zu kommen. Sie können auch die Quelldateien herunterladen, für ist kleiner als der Ressourcenbereich und debuggen von dort. Ansonsten sehe ich dich im nächsten Video. 10. Footer mit automatischem copyright: In dieser Lektion erstellen wir eine Fußzeile und generieren das Jahr für das Copyright automatisch mit Hugo, das statisch zur Laufzeit generiert und auch JavaScript, das dynamisch dynamisch aktualisiert das Jahr basierend auf dem Jahr , in dem der Benutzer auf der Website surft. Nach Abschluss dieses Videos können Sie eine Fußzeile mit einem soliden Hintergrund erstellen . Sie können das Copyright-Zeichen mit HTML-kompatiblem Code eingeben. Und Sie können die IBA statisch mit Hugo als nette Reise, ohne Skript-Fallback und auch dynamisch mit JavaScript generieren statisch mit Hugo als nette Reise, . Das erste, was wir tun werden, ist die Fußzeile zu erstellen. Öffnen Sie also das Projekt und gehen Sie in den Ordner Layouts und gehen Sie dann in Partials. Und das, woran wir während dieser Lektion arbeiten werden, ist die Fußzeile. Helfen Sie mit, diesen Text aufzunehmen. Das erste, was wir tun werden, ist ein div zu erstellen, den früheren Missbrauchscontainer, aber dieses Mal werden wir Containerflüssigkeiten verwenden. Also ist sein Behälter flüssig. Containerflüssigkeit nimmt die maximale Breite der Seite ein und ändert sich mit der Seite. Es ist immer die ganze Seite oder die Breite. Mit einer Hilfe in eine Reihe und eine Spalte zu legen. In dieser Kolumne werden wir einen dunklen Hintergrund verwenden. das zu tun, machen wir Doc, BG Dash Doc. Ich brauche auch ein paar weiße Texte. Also dot txt, Strich weiß. Ich werde etwas Polsterung oben, unten und links, rechts neben dem Text legen. Also benutzen wir Dot Py Dash drei. Es gibt viele Kurse. Sparen wir uns das auf und schauen uns mal an. Wir werden den Hey Leute Server laufen. Unten unten auf der Seite. Wir haben unseren schwarzen Balken. Wenn Sie sich nun über die verschiedenen Hintergrund - und Ticksfarben wundern , wenn Sie hier im Hintergrund schauen, sind dies die verschiedenen Hintergrundfarben , aus denen Sie wählen können. Standardmäßig können Sie Ihre eigenen angeben, entweder indem Sie die Bootstrap-Klassen überschreiben oder Ihre eigene Klasse erstellen oder indem Sie die Bootstrap-Variablen schreiben, aber für die Zwecke ist kleiner als, wir wählen nur eine dieser Farben und wir entscheiden uns für Dark. Bg ist dunkel geknackt. In Bezug auf die Ticks-Farben befinden wir uns jetzt im Farbbereich von Dienstprogrammen. Und das sind alles die Standard-Bootstrap-Farben. Und für einige von ihnen haben sie auf einen dunklen Hintergrund gebracht, aber das passiert nicht automatisch. Sie müssen die Hintergrundfarbe angeben. Diese Klassen ändern tatsächlich nur die Textfarbe und wir verwenden Ticks. Was wir versuchen könnten, braucht auch Leben. Ich denke, es braucht Weiß könnte die Wirkung bieten. Das tun wir oft. Erstellen wir den Text für die Fußzeile. Lasst es uns in meinen Grundtext schreiben. Wir werden das Urheberrecht übernehmen. Dann brauchen wir dafür das Copyright-Zeichen. Wir legen eine Endkopie ein. Sie werden sehen, dass der Name des Vorschlags dann nur eine grundlegende GIF-Analyse enthält, und wir machen 2022. Dann geben wir den Namen der Website ein. Also machen wir Punkt, Punkttitel. Sparen wir uns das auf und schauen uns mal an. Lassen Sie uns jetzt wirklich gut aussehen, sagen wir zum Beispiel, Sie möchten den Namen Ihrer Website nicht für den Copyright-Hinweis verwenden . Werfen wir einen Blick auf ein paar alternative SMS. Jetzt gibt es eine andere Variable, die wir verwenden können, diese Site Dot Copyright. Die Art und Weise, wie wir diese Arbeit machen, tun wir mit dem Copyright von Punkt, Dot Dot. Dann machen wir den Punkt , der diesen Inhalt anzeigt. Und dann können wir es sonst machen. Mal sehen, ob das Copyright nicht verfügbar ist. Sonst zeigt Punkt, Punkt, Punkttitel an und dann beenden wir das, speichert das. Und bevor wir gehen und überprüfen, wird es in unsere config.xml gehen. Und wir werden die Copyright-Ticks definieren. Setzen Sie ein wenig Hashing ein und geben Sie einen kleinen Kommentar ab, alternative Kopie, Unternehmenstext. Und dann kopieren wir, oder? Und wir machen Web Design, Inc. Und speichere das und speichere es funktioniert. Es gibt deinen alternativen Text. Ich heap ist nicht automatisiert, also lasst uns wieder durchgehen und das machen wir. Das bringt uns zu unserem nächsten Schritt und der wird in Hefe statisch mit Hugo erzeugt . Nun, das ist eine ziemlich komplexe Funktion, aber ich werde es Ihnen wirklich einfach machen alles, was Sie tun müssen, indem Sie die geschweiften Klammern setzen, jetzt Punktformat machen. Dann müssen Sie in Klammern 2006 nach unten das Jahr 2006 machen. Niemand wird arbeiten. Es gibt viele Möglichkeiten , Daten zu formatieren, aber ich werde es für dieses Tutorial einfach halten . Wir speichern das und wir inspizieren es. Drehjahre sind 2021. Sie können sehen, dass es einwandfrei funktioniert. Das bringt uns zum nächsten Abschnitt, der das dynamisch mit JavaScript generiert. Also dann meine ich tatsächlich, dass es passiert ist, wenn der Benutzer zur Site navigiert und in den Browser geladen , an diesem Punkt wird das E generiert. Im Moment bekomme ich diese Funktion, die Funktion, ich schneide das aus. Ich füge es unten ein. Ich werde ein paar Kommentare abgeben , Slash Star, den Stern. Und dann fange an, die Antwort zu zerkleinern. Das werde ich kommentieren. Aber ich werde eine Spanne einlegen, nur Spanne sprechen. Eine ID der Span-ID entspricht js. Jetzt stelle ich meinen IDs, die zu JavaScript-Zwecken dienen , immer die zu JavaScript-Zwecken dienen das Präfix J, S, Dash voran. Und so weiß ich , dass JavaScript, wenn ich das ändere, irgendwie nicht mehr funktioniert. Was ist Span? Und dann werden wir etwas JavaScript verwenden, um das Datum innerhalb dieser Spanne zu schreiben . Also werde ich das vorerst speichern und wir öffnen unsere JavaScript-Datei , die wir zuvor erstellt haben. Wir werden zunächst die Spanne anvisieren , die wir gerade erstellt haben, und wir verwenden diese mit Document Dot. Ruft Element nach ID ab. Stellen Sie sicher, dass Sie in jeder Hinsicht Großbuchstaben verwenden , außer für das erste. Dann öffnen wir die Klammer. Innerhalb dieser Klammer müssen wir die tatsächliche ID der Spanne angeben. Also musst du Apostrophe benutzen. Und dann werden wir, wir suchen nach JS STAT3, das ist die ID. Wir haben unser Element ins Visier genommen und es mit JavaScript ausgewählt. Und wir wollen das innere HTML ändern. Also werden wir Dot machen. Innen. Html ist der HTML ist alles Großbuchstaben. Wir benutzen ein Gleichheitszeichen, also ändere ich es jetzt. Worauf wir es ändern werden, und das ist wieder, dieses Zeug ist ziemlich komplex, aber wir werden es behalten. Die Erklärung ist für dieses Tutorial sehr einfach. Wir werden ein neues Datum erstellen und dann vollständig öffnen, Klammer schließen und mit einem Doppelpunkt beenden. Bevor Sie vergessen haben, was Sie geschrieben haben, erstellen wir einen Kommentar. Das Kommentieren des JavaScript unterscheidet sich geringfügig von Hugo oder YAML. Wir verwenden einen doppelten Schrägstrich für einen einzeiligen Kommentar. Alles klar, das speichern wir uns. Möglicherweise müssen Sie Ihren Server neu starten damit dies funktioniert, und wir werden uns ansehen , dass die Website uns nun statt dynamisch zum nächsten Schritt bringt, wir müssen ein neues Skript vollständig erstellen. Bei Swipe Mei Ti. Erklären Sie, was für ein nettes Skript für Becky's ist, wenn wir ins Inspect gehen und dann das Drei-Punkt-Menü ausführen und den Befehl ausführen, auch Control Shift P ist , Java anschließen und dann JavaScript deaktivieren. Es wird noch nichts passieren. Du musst die Seite aktualisieren. Sie können R steuern oder auf die Schaltfläche Aktualisieren klicken. Sie werden sehen, dass wir nichts neben dem Urheberrecht haben , da JavaScript nicht funktioniert. Ein nettes Script-Fallback einige Texte, die nur angezeigt werden wenn JavaScript entweder deaktiviert oder in diesem Browser nicht unterstützt wird. Es ist so einfach wie das Erstellen eines Tags namens nettes Skript. Sie können das automatisch mit emit emit machen. Und dann beginnen wir da drinnen mit einem schönen, einfachen Beispiel. Wir werden in das Jahr 2025 zum Beispiel sagen, wird es in der Vergangenheit, in der wir 2020 gehen. Werde es retten. Aktualisieren Sie unseren Browser. Sie werden sehen, dass das Jahr 2020 auftaucht. Wenn JavaScript TCC beschriftet ist, machen Sie sie besser, wir werden Hugo degeneriert verwenden, damit Sie die Kommentare aufnehmen werden. Dieser Code hier unten. Wir schneiden es aus und fügen es dann in den neuen Skriptbereich ein. Und jetzt wird er das aktuelle Jahr in dieses No Script-Tag einfügen . Aber hier ist der Haken. Er macht das nur, wenn du deine Website baust. Sie werden Ihre Website nicht jeden Tag erstellen. Du baust es wahrscheinlich jedes Jahr. Aber es begann um Januar, Februar, März hat eine hohe Chance , dass Sie das Vorjahr haben werden. Und so verwenden wir JavaScript um den Dydt dynamisch zu generieren. Wir haben unseren vollen Rücken, nur für den Fall, dass die Seite aktualisiert wird. Und es kommt auf 2021. Und dann aktivieren wir JavaScript, Java und aktivieren es und aktualisieren das andere rechte, aktivierte JavaScript, um einfach die Entwicklertools zu schließen und zu aktualisieren. Und es funktioniert sehr gut. Das war's für das Video. Es gibt viel zu tun. Es gibt sowohl eine dynamische die statische Generierung des Fotos. Sie haben Fragen im folgenden Diskussionsbereich. Andernfalls können Sie den Quellcode für diese abgeschlossene Lektion herunterladen. Wir sehen uns in der nächsten Lektion. 11. Eine einzelne Seite erstellen: Während dieses Projekts haben wir bisher nur an der Homepage gearbeitet. Jetzt schauen wir uns an, wie zusätzliche Seiten und Hugo-Bedingungen, die wir eine einzelne Seite nennen, gutschreiben zusätzliche Seiten und können. Nach Abschluss dieser Lektion können Sie eine einseitige Vorlage erstellen. Sie könnten einen Mock-Down-Fall für eine einzelne Seite erstellen . Und Sie könnten einen Menü-Link aus einer einzelnen Seite generieren . Das erste, was wir tun werden, ist eine einzelne Seitenvorlage zu korrigieren . Ihr Projekt muss in einen Layouts-Ordner gehen und dann standardmäßig, wir müssen genug single.php HTML haben und wir haben noch nicht wirklich gesehen. Als erstes müssen wir tun, es ist der index.html sehr ähnlich. Wir müssen den Block definieren, vollständig auf den Hauptblocky abzielte, nur Schleifblock. Wir haben tatsächlich genug für sich. Und dann lassen wir ein paar Zeilen und wir werden jetzt einsetzen und markieren, wir können eine Abschnittsmarkierung erstellen. Wir geben ihm eine Klasse von mir. Nur für den Fall, dass wir diesen Abschnitt mit etwas CSS auf der Strecke anvisieren müssen . Ich werde unseren Container hineinlegen. Tab erste Zeile, Zeile. Wir legen es in eine Kolumne. Es ist wirklich wichtig, wenn Sie Bootstrap richtig funktionieren möchten, müssen Sie diese Reihenfolge jedes Mal befolgen. Und dann legen wir eine Überschrift ein. H1 fügt den Titel der Seite ein. Also benutzen wir das mit Punkttitel Capital T. Dann legen wir es in einen Untertitel. Jetzt ist diese Zwischensumme möglicherweise nicht immer ein P. Wir müssen sie innerhalb eines bedingten Tags verwenden , dass der Code nicht ausgeführt wird, weil Sie keinen Pfeil generieren oder ein leeres Tag auf unserem haben möchten seite. Also verwenden wir mit Punktparams mit einem Kapital-P-Punkt-Untertitel. Dann führen wir ein H2 aus. Und das machen wir kursiv. Wir werden Dot FST für Schriftstil kursiv machen, und wir machen auch die Schriftgröße von drei. Stufe 3 wird auch Text stumm geschaltet, nur viel und mehr. Ich dachte, Zecken sind gedämpft. Dann setzen wir eine geschweifte Klammer mit einem Punkt ein. Dieser Punkt generiert die Daten aus dem Punktuntertitel „ dot params“. Darunter werden wir das Markieren einsetzen. Das nächste, was wir tun müssen, ist der Inhalt der Seite. Wir werden ein Div machen. Wir werden oben und unter dem von drei auffüllen. Also machen wir Dot Py, Dash drei, das ist oben und unten. Wir werden unsere geschweiften Klammern machen. Wir haben an Inhalt gedacht. Wenn ich jetzt unsere grundlegende Vorlage eingerichtet habe, muss ich einen Mock-Down-Fall für den Inhalt der Seite erstellen . dies besser zu tun, ist die Verwendung eines Befehls CEO-Befehl steuert , sagen wir, den Server zu schließen. Ich meine, Archetypen. Zu Beginn des Kurses. Wir haben es so eingerichtet, dass der Entwurf falsch war. Wenn wir eine neue Seite mit Guigo erstellen, handelt es sich standardmäßig nicht um einen Entwurf. Standardmäßig aus dem Feld alle Seiten, die Sie einen Entwurf erstellen und tatsächlich einen P.sit machen. Der Befehl ist, dass Hugo wusste, dass wir einen Schrägstrich über Schrägstrich, Indexpunkt, MD verwenden . Dann siehst du im Inhaltsordner dass wir unseren About Ordner und index.html haben. Sie können zum Beispiel Hugo es gewusst. Und dann könntest du den Prozess machen. Am Ende erhalten Sie hier eine Datei namens process. Sie arbeiten in Bezug auf die Navigation sehr ähnlich. Ich bevorzuge sie in ihrem eigenen Ordner, da Sie sich später Seitenressourcen und Bilder ansehen und Bilder mit den Dateien speichern. Und es ist viel einfacher, wenn Sie für jede Seite einen Unterordner erstellen . lösche ich dort. Werfen wir jetzt einen Blick auf den Scheinuntergang. Das erste, was wir erstellen werden , ist die Zwischensumme. Wir werden hier zum Beispiel der lokalen Gemeinschaft dienen. Seit 1999. Wir werden dann ein paar Texte erstellen. Wenn Sie den Anweisungen in der vorherigen Lektion folgen, können Sie Emmet innerhalb des Knockdown-Fehalalarms verwenden . Dann geben wir 100 pro Monat pro Zeile ein und ich führe das nochmal aus. Lauf Lorem 90 Tage Zeit. Jetzt, wenn wir den Hago Server schließen, um dann den Hugo new Befehl auszuführen, müssen Sie jemals wieder ausführen. Und dann schauen wir uns die Website an und sagen: Schau, wir haben die Menüpunkte noch nicht eingerichtet. Wir müssen manuell zum Schrägstrich über navigieren. Sie können sagen, dass wir die Vorlage verwenden, die wir gerade erstellt haben, ohne Untertitel. Zum Beispiel wurde der Untertitel deaktiviert. Ich stelle ein Hashing vor die Zwischensumme und sage, du willst nicht, dass es für diese Seite verschwindet. Aber wenn wir uns ansehen, werden Sie feststellen, dass die Tag-Rezepte auch. Und deshalb habe ich den Befehl width benutzt. Das bringt uns zum letzten Schritt und das schafft einen Menüpunkt und ein Weiß. Wir sind zurück zu unserem Indexpunkt m d, dem Hauptpunkt mit dem Unterstrich im Stammverzeichnis des Inhaltsordners. Sie werden feststellen, dass es dem Hauptmenü zugewiesen ist und ein Gewicht von Dosen hat oder diese kopiert. Sie werden unsere Zwischensumme wieder einschalten. Und dann fügen wir das ein, aber wir müssen das Weiß ändern und wir werden es dazu bringen, ihm ein Gewicht von 20 zu geben. Auf diese Weise ist es der zweite Punkt im Menü. Wenn wir uns die Konfigurationsdatei ansehen, werden Sie sehen, dass wir auch einen Herbst mit dem Gewicht von 1900 haben. Also haben wir Zinn 2019 Hunderte, die ich wissen sollte, in der richtigen Reihenfolge anzeigen. Werfen wir einen Blick darauf. Sie kämpfen immer in der richtigen Reihenfolge und der aktive Zustand funktioniert auch gut, weil unsere About-Seite, die die aktuellen Seiten sind, dot-com. Wenn wir ein Zuhause haben, werden Sie sehen , dass es auch Docker ist. Einige Leute verwenden JavaScript, um diese Funktion auszuführen, aber es ist viel einfacher da das Ego ein statischer Site-Generator ist. können wir automatisch machen. Das war's für diese Lektion. Sie können so viele einzelne Seiten erstellen, wie Sie möchten, und alle verwenden diese Vorlage. Wir werden uns in einem späteren Kurs benutzerdefinierte Vorlagen ansehen. Ich sehe die nächste Lektion. 12. Erstellen einer list: Willkommen zur nächsten Lektion. In dieser Lektion betrachten wir das Erstellen von Listenseiten. Diese Lektion wird etwas länger sein als die vorherige. Und das liegt daran, dass Listenseiten ziemlich komplex sind und wir auch die Paginierung betrachten. Nach Abschluss dieser Lektion können Sie ein Teil erstellen, um die Überschrift jeder Seite konsistent anzuzeigen . Sie können mindestens eine Seitenvorlage erstellen. Sie können eine Markdown-Datei für mindestens die Seite erstellen . Sie könnten in der Lage sein, einen Menü-Link für die Listenseite durch die vordere Angelegenheit zu generieren . Sie können einzelne Platzhalterseiten für das Zweig-Paket erstellen . Und das dient nur zu Demonstrationszwecken. In diesem Tutorial hatten Sie eine Paginate, die geringste Anzeige einzelner Seiten auf Ihrer Listenseite. Sie steuern besser die Anzahl der Seiten auf jeder paginierten Seite angezeigt werden, und Sie können die Länge der Seitenzusammenfassungsanzeige für jede Seite auf Ihrer Listenseite steuern . Schritt eins, machen wir einen Teil. Jede Seite hat also den Titel und wird konsequent angezeigt. Gehen Sie zurück in unser single.php HTML und holen Sie alle Texte heraus, die zur Anzeige des Titels verwendet werden. Wir werden das schneiden und an seiner Stelle werden wir zwei geschweifte Klammern einsetzen. Und wir führen einen Befehl namens partiell aus. Und wir nennen es Titel. Und dann müssen Sie einen vollständigen Stopp setzen, damit die gesamten Seiten zusammenhängen, diese zu diesem Teil übergehen. Wenn Sie auf Speichern klicken, wird ein Fehler generiert, und das liegt daran, dass wir diesen noch nicht teilweise gemacht haben. Ich gehe in Ihren Partials-Ordner und erstelle eine neue Datei namens Punkt-HTML in diesem Teil, indem ich den Code einfüge, den wir vor ein paar Augenblicken ausgeschnitten haben, und speichere ihn. Werfen wir einen Blick darauf, ob alles wie erwartet funktioniert. Ich habe es noch nie auf die About Seiten gebracht. Sie können sehen, dass die Summe weiterhin angezeigt wird, obwohl sie aus dem Teil gezogen wird. Jetzt im zweiten Schritt müssen wir eine Listenseitenvorlage erstellen, um die geringsten Seiten anzuzeigen. Wenn Sie nach weiteren Informationen zur Funktionsweise von Listenseiten suchen , verlinke ich die Hugo-Dokumentseite für Seitenpakete und Sie werden sehen, dass ein Zweigpaket einen Indexfall mit einem Unterstrich aufweist. Zuvor verwenden wir das Layout des geringsten Typs an dem in dieser Lektion gearbeitet wird. In der vorherigen Lektion wurde ein Indexpunkt MD mit dem Unterstrich verwendet und Sie verwenden den einzelnen Layouttyp. Lease-Vorlagen zeigen auch mindestens alle anderen Seiten diesem Ordner an, die in die list.html in unserem Standardordner innerhalb des Layouts gelangen . Und wie auf der Einzelseite müssen wir entweder meine Regel finden, einfach die ganze Datei kopieren. Lass es uns ändern. Das erste, was wir tun werden, ist unter dem Inhalt, wir werden Range verwenden. Und wir werden alle Seiten durchgehen. Wir müssen das End-Tag einsetzen , um diesen Ozean zu beenden. Und dann werden wir da drinnen den Treffer dieser Seite anzeigen. Also werden wir H2 benutzen. Wir haben H1 zuvor in diesem partiellen T2 und dann Tab gewöhnt . Dann benutzen wir einen Link in einem Strich. Und den Link werden wir geschweifte Klammern verwenden , von denen wir dachten, permalink mit einem Großbuchstaben P. Und dann fügen wir zwischen dem Öffnen und Schließen eines Tags den Titel dieser Seite ein, also benutze den Punkttitel mit einem T. Darunter werden wir eine Zusammenfassung des Textes auf dieser Seite anzeigen , die beiden geschweiften Klammern verwenden und es wird eine Punktzusammenfassung sein. alles werden wir in ein Artikel-Tag einpacken. Verspotten Sie den Herbst. Nun, die Listenseite, die wir anzeigen können , wird hier aufhören, Leute mit Control C oder Command C mit Hugo wusste, dass Slash-Produkte Slash-Unterstrich index.html unterstreichen. Wir sehen, was unser Produktordner und unsere index.html, was ich in irgendeinen Inhalt einfüge. Wir speichern es für, wir fahren fort, wir weisen es dem Hauptmenümenü und dann einem Doppelpunkt zu und werden nach Haupt gesucht. Und wir geben ihm ein Gewicht von 30. Es ist also rechts neben dem vorhandenen Menüpunkt, den wir haben, um den Hugo-Server neu zu starten und einen neuen Menüpunkt für Produkte zu sehen , da APEDE-Überschriften ordnungsgemäß eingezogen werden. Und so wie der Inhalt aber nichts anderes seine Flucht hat. Und das liegt daran, dass wir das einseitige Element noch nicht erstellt haben. Jetzt erstelle ich einen Platzhalter. Lasst uns einfach nur vorübergehend sein. Seiten werden einzelne Seiten sein und sie werden innerhalb des Zweigpakets leben, in dem unser Produktindex Blätter fällt , werden den Server wieder stoppen. Wir werden Hugo wusste, dass Slash-Produkte slash cars dot md laufen. zwei Arten, wie wir das schaffen können. Wir können Folgendes in cars dot MD haben, oder wenn wir später Fotos verwenden, können Sie einen Ordner namens cars erstellen und die Datei dann in Indexpunkt m d umbenennen . Empfehlen Sie diese Methode weil es später viel besser für die Expansion ist. Index.html. Wir werden etwas Inhalt hinzufügen. Wir werden Lorem leiten. Ich denke, es ist morgen einem 30-Wort-Absatz und alarmiert dann einen 50-Wort-Absatz. Und dann alarmieren Sie diesmal vielleicht Hunderte. Und dann hebe ich das auf. Wir brauchen mehrere Produkte, damit wir die Paginierung zum Laufen bringen können. Was ich tun werde, ist, dass ich kopiere und einfüge. Verursache ein paar Mal. Ich benenne es in Boote um. Und dann benenne ich die nächsten 12 Bikes um und lege sie in den richtigen Ordner. Und dann benenne ich den letzten gemischten in Motorbox um. Ich mache das weiter und wir sehen uns in einer Minute. Ich habe eine Reihe von Ordnern in ihrer Nähe oder welche Indexpunkt-MDT-Dateien und sag ihnen, was ich eingehen werde, und benenne den Titel jedes Einzelnen um, um dem Ordner zu entsprechen. Ihr Jungs durch neun Neunen und wir sehen uns in einer Minute. Okay, also werde ich sicherstellen, dass sie alle gerettet und geschlossen sind. Dann führen wir den Server erneut aus und sehen was passiert. Die Leute finden eine Zusammenfassung all dieser Seiten, die existieren. Wie denken Sie, dass wir ein bisschen Platz zwischen ihnen brauchen? Wir brauchen etwas Gewürz zwischen der Zusammenfassung und der Fußzeile unten. Gehe zurück in unseren Abschnitt list.html. Wir machen P B3 oder Polsterung unten drei. Und wir werden unsere Zusammenfassung in ein Div mit einer Polsterung untere drei einwickeln . Also wird Pb drei vorgefertigte F3 das sagen und schauen. Es ist ziemlich einfach, aber im Moment ist es funktional genug. Schreiben Sie eine lange Liste aller einzelnen Seiten, die im Produktordner vorhanden sind, zu. Jetzt müssen wir paginieren, das anzeigt , dass nur eine bestimmte Zahl pro Seite angezeigt wurde. So können wir das tun, arrangieren wir alle Seiten innerhalb von Add Dot Paginate oder an der Seite davon. Wenn wir das speichern, sind wir anders gegangen, weil Hugo standardmäßig zehn Seiten anzeigt , wenn es paginiert. Lassen Sie uns nun die Paginierungssteuerelemente unten auf der Seite erstellen die Paginierungssteuerelemente und wir werden zurückkommen und die Anzahl der Seiten ändern , die er pro Seite angezeigt hat. Um die Paginierungssteuerelemente anzuzeigen verfügt über eine integrierte Vorlage, die wir von dieser Seite aus kopieren und einfügen können . Und ich habe mit dieser Docs-Seite verlinkt. Im Bereich Ressourcen. Nach dem Tag erstelle ich ein div, weil wir es in einer Minute stylen werden. Es wird angenommen, dass Dave, ich werde die interne Vorlage für die Paginierung einfügen interne Vorlage für die Paginierung , damit die Paginierungssteuerelemente angezeigt werden. Wir müssen die Anzahl der Seiten begrenzen , die pro Seite angezeigt werden. Ich werde diese Pyramide kopieren. Dann öffnen wir unsere Konfigurationsdatei. Wir werden es in einen Kommentar schreiben, paginieren und setzen es auf fünf. Das sparen wir. Jetzt können Sie sehen, dass wir 12345 Produkte haben und dann haben wir unsere Steuerelemente unten. Und das sind standardmäßig Bootstrap-Klassen, wenn Sie gehen, können wir auf unsere zweite Seite gehen. Sie werden oben feststellen, dass sich die URL ändert. Wir sind auf Seite zwei. Und wenn wir zurückgehen, ist es nur auf der Indexseite. Wir können ein bisschen arbeiten, um diese Anzeige ein bisschen besser zu machen. Wir kehren zu der Listenseite zurück, die wir zuvor erstellt haben. Wir setzen es in Klassengleichheit ein. Zunächst werden wir drei streichen, um die Marge rundherum zu kreditieren , um andere Objekte davon fernzuhalten. Und um es dann durchzusenden, müssen wir den Strichfluss für die Display-Fix machen. Sobald Sie Flakes aktiviert haben, können wir das Inhaltscenter rechtfertigen. Lasst uns das aufheben. Wie Sie sehen können, sieht es großartig aus. Als Nächstes werden wir uns ansehen, wie die Länge der auf unserer Indexseite verwendeten Seitenzusammenfassung steuern können. Wir haben ein bisschen zu viel Text für jedes Produkt angezeigt. Lass uns zurückgehen und lasst uns das reparieren. Es gibt ein paar Möglichkeiten, dies zu tun. Der einfachste Weg , dies mit einer Konfiguration zu tun , die den Parameter für die Zusammenfassung verwendet . Also kopieren wir das. Gehe in den Konfigurationsfall. Wir geben einen Kommentar ein, den Pi eingegeben hat. Und das sind nicht nur Wörter, sondern Hugo rundet mit zwei Sätzen ab, da wir auf diese Weise sieben Wörter zum Beispiel, Guys, wir fügen das zum nächsten Satz hinzu. Also werde ich einfach den Satz ändern. Geh in Boote. Er hat seinen Satz herausgeholt, stellt die Startseite auf , auf der Sie sehen können, wie ihr Leute, obwohl wir nur sieben Wörter hatten, wird er auf den nächsten Satz gerundet, während er sieben bekommen hätte Wörter. Jetzt denken Sie zum Beispiel, dass das für Ihre Produkte schrecklich aussieht. Es gibt zwei, sonst können wir Zusammenfassungen manuell erstellen. Die erste Alternative zur automatischen Zusammenfassung ist das manuelle Aufteilen. Jetzt müssen Sie dies genau kopieren und einfügen. Diese Markierungen. Das kopieren wir. Dann gehen wir in R Markdown für unser Bootsprodukt. Es fügt das ein und speichert es. Sie können dort sehen, dass alle Texte über diesem Tag als Zusammenfassung für Boote angezeigt werden. Die nächste, die ich zur Zusammenfassung angekommen bin ist die Verwendung der Frontmatte und wir werden eine zusammenfassende Variable auf unserer vorderen Wiese verwenden. Also kopiere ich das. Ich geh in die Kiste. Das Produkt wird eine Zusammenfassung veröffentlichen und er wird ein oder zwei Sätze in diese Zusammenfassung kopieren . Und dann speichern wir es. Begann mit dem Wortfeld. Dann haben wir unsere zusammenfassende Überschreibung für Fahrräder, die das Frontmetall verwenden. Die drei Möglichkeiten, Zusammenfassungen zu generieren, Hugo TID für Lektion zehn. Herzlichen Glückwunsch, Sie haben es bis zum Ende des Hauptteils des Kurses geschafft. Wir sehen uns in der nächsten Lektion. Denken Sie daran, wenn Sie Fragen haben, können Sie diese unten stellen und ich werde versuchen so schnell wie möglich zurückzukehren. 13. Erstellen und hochladen der Website: In dieser Lektion geht es um den Aufbau der Website. Bisher haben Sie in diesem Kurs mit euch Entwicklungsserver zusammengearbeitet. Jetzt erstellen wir die Website tatsächlich, generieren einige HTML-Dateien, testen sie und laden sie dann per FTP hoch. Nach Abschluss dieses Videos können Sie eine Website für den öffentlichen Ordner erstellen. Sie können auch HTML ändern, um seine Größe zu reduzieren. Sie können die Website-App testen bevor Sie sie per FTP hochladen. Und Sie können die Site-Dateien per FTP hochladen. Das erste, was wir uns ansehen werden, ist, wie man mit Hugo-Header-Ausgabedateien baut. Bevor wir die Website mit Hugo erstellen, müssen wir ihrem Ego mitteilen, dem Domainnamen, an den wir das senden werden. Auf diese Weise kann Hugo die URLs richtig erstellen. Wenn Sie in Ihre Konfigurationsdatei gehen, sehen Sie, dass es ein Element namens Bias-URL gibt. Bevor Sie nun in die Umfrage einsteigen, müssen Sie den Domainnamen überprüfen. Im Moment werden wir localhost verwenden. Sie hat einen Schrägstrich danach gemacht. Es gibt noch eine weitere Einstellung, die wir machen müssen, bevor wir die Site erstellen. Und das heißt, wir müssen die Generierung des Kategorieordners und des Tags-Ordners deaktivieren . Das können wir mit behinderten Arten machen. Gib den genauen Code ein und dann bin ich hier, ich habe meinen Kommentar darüber gelegt. Selbst wenn wir keine Taxonomien oder Kategorien oder Tags haben , werden diese Ordner ohnehin generiert. Heben Sie diesen Link nun im Ressourcenbereich auf, es gibt einen Befehl namens Hugo, und Sie müssen ihm einige Flags angeben. Optional. Wir führen einfach den Hugo-Befehl aus. Es wird tatsächlich sofort gebaut . Also lasst uns das mal ausprobieren. Zurück in unserem Projekt. Wir reden in Hugo. Und ich werde diesen Begriff nur ein bisschen größer machen. Es ist sehr ähnlich dem, was Sie normalerweise bekommen außer dass es tatsächlich Dateien für Sie ausgibt. Ich habe Hugo ohne die deaktivierte Konfiguration , nur um dir zu zeigen, was du bekommst. Wie Sie sehen können, haben wir den Ordner einer Kategorie und einen Tags-Ordner. Und da drin haben wir unsere index.html. Das wollen wir nicht für diese Website. Ich werde es mit dieser Konfiguration erneut ausführen, wie ich gerade gezeigt habe, dass Sie einen Blick auf den Unterschied werfen werden . Jetzt verwende ich einen Befehl namens clean destination DIR. Sie müssen dies verwenden, besagt, dass die Elemente im Ordner gelöscht wurden. Wenn Sie Änderungen an Ihrer Website vornehmen, löschen Sie beispielsweise eine Seite und bauen dann sein Ego neu auf. Diese gelöschte Seite wird weiterhin vorhanden sein, es sei denn, Sie löschen alles auf dem Foto manuell oder führen Sie diesen Befehl aus. Jetzt hatten wir diese unnötigen Dateien nicht und wenn Sie eine Weile verwenden, um zu ihnen zu navigieren, würde das wahrscheinlich keinen Sinn ergeben. Und es würde aussehen, als ob ein Seitenfehler wäre, Werfen wir einen Blick in eine der Dateien und sehen, was ihr ausgegeben habt. Wie Sie sehen können, ist in der gesamten Datei viel Speicherplatz vorhanden. Wir können diesen Raum entfernen. Wir werden die Datei nicht um viel reduzieren, aber sie wird sich auf die Ladezeiten für die Verwendung auswirken. die Vergrößerung werden alle zusätzlichen Leerzeichen und neuen Zeilenzeichen entfernt , um die Dateigröße zu reduzieren. Dies führt wiederum zu einem schnelleren Download für den Benutzer. Sie können sich die Docs-Seite ansehen. Es gibt eine Option, die wir verwenden können, genannt minify. Wir müssen nach dem Hugo-Befehl Strich, Dash minify eingeben. Es wird jedes unterstützte Ausgabeformat vergrößern, das im Grunde nur HTML ist. Es unterstützt kein JavaScript oder CSS. Werfen wir einen Blick darauf. Also öffnen wir die Datei index.html. Wie Sie sehen können, werden alle Leerzeichen, wenn sie Bone entfernen, leider die Zeilenumbrüche nicht entfernt. Bevor Sie sich die Mühe machen , Ihre Dateien mit einer FTP-Software auf einen Remote-Server hochzuladen . Ich empfehle Ihnen, es lokal zu testen und es ist ziemlich einfach zu machen. Das Softwarepaket, das wir zum Ausführen eines Testservers verwenden werden, ist XAMPP. Es ist eine kostenlose Software-Suite , die Sie für eine Vielzahl von Zwecken verwenden können. Ich werde es auch verwenden, um einen FTP-Upload zu testen. Sie können das auch selbst versuchen, wenn Sie keinen FTP-Server zum Hochladen der Dateien haben. Zu. Zu Beginn dieses Kurses habe ich Ihnen gezeigt, wie Sie Hugo und die gesamte dazugehörige Software installieren . Es ist super einfach , XAMPP zu installieren. Ich werde diesen Prozess nicht durchlaufen. Es sind Versionen für Windows, Linux und Mac verfügbar. Es ist also gut für alle. Ich habe die Probe x m double p.stance geöffnet. Wir starten den Apache-Server. Wir brauchen MySQL nicht, weil wir eine statische Site machen. Sie müssen dann zum Ordner navigieren und er teilt Ihnen hier unten in den Protokollen mit, dass er in C Slash x und altem Stück installiert ist. Navigieren wir zu diesem Ordner. Und wenn Sie sich in diesem Ordner befinden, müssen Sie in HT-Dokumente gehen. Mccartney hat eine Beispielwebsite bekommen. Gehen wir also zurück zu Chrome und wir werden sehen, ob wir das finden können. In Chrome. Ich spreche jetzt in einem lokalen Gastgeber, sei vorsichtig bei Tag, Foto es wird einhundertdreiunddreißigdreißig diesen Kerl in den Hafen gehen wollen einhundertdreiunddreißigdreißig diesen Kerl in den Hafen gehen , aber das wollen wir nicht. Wir wollen nur den Standardport von 80. Es gibt die Seite, die wir uns nur ansehen werden. Wir werden diese Seite löschen, weil wir sie nicht brauchen. Wir werden unsere eigenen hochladen. Hey Leute haben es gesehen. Sie können Plato als falsch, wenden Sie sich an Sie oder hugo public folder benötigt Control I, oder Sie können alle Dateien hervorheben. Steuere C. Und dann klicke in den Docs-Ordner, füge sie mit Control V oder Command V ein. Dann gehen wir zurück zu unserem Browser und checken es uns an. Also werden wir die Seite aktualisieren. Werden Sie diese Dashboard-Seite los. Wie Sie sehen können, haben wir unsere Hugo-Seite und das emuliert Ihre Website einen FTP-Server hochgeladen wurde, und unsere Paginierung funktioniert. Wir haben unsere Single-Seite funktioniert. Wir sind bereit, dies per FTP auf eine Sieben hochzuladen. Das bringt uns zum letzten Schritt im gesamten Tutorial und das Hochladen Ihrer neuen Website per FTP. Jetzt werde ich essen, wenn SEP für FTP-Hochladen verwendet wird, aber es ist nur unter Windows verfügbar wenn Sie einen Mac oder Linux verwenden. Ein Beispiel für eine gute Software, die Sie verwenden können. Das fällt sehr. Ich habe eine Multi-Plattform-Unterstützung, aber alle FTP-Programme sind ziemlich ähnlich. Möchten Sie das Hochladen auf FTP auf Ihrem eigenen Computer emulieren , ohne einen Webserver zu verwenden. Xampp beinhaltet die Wasserfälle sehr. FTP-Server, wenn Sie das starten und dann zur Admin-Schaltfläche wechseln, richten wir den Server auf einen bis 7 Punkt 0 Nr.1 ein, das ist localhost. dann in der Konfiguration zur Schaltfläche „Benutzer“ gehen, zur Schaltfläche „Benutzer“ gehen, erstellen Sie einen Benutzer, geben ihm ein einfaches Passwort und stellen sicher, dass Sie einige Ordner freigegeben haben. Ich teile die Folien, Prüfungen slash HT-Dokumente. Ich werde alle Berechtigungen erteilen, weil wir dazu in der Lage sein müssen. Violett FTP. Stellen Sie das als Home-Verzeichnis ein. Das werden wir speichern. Jetzt könnten wir FTP-Software sein. Ich erstelle eine neue Sitzung. Ich verbinde mich mit einem bis sieben Punkt 0 Punkt eins. Das kann sich ändern je nachdem, wo Sie Ihre falschen Zeugen hochladen. Dies ist nur für den Localhost-Test. Ich gebe den Benutzernamen und das Passwort für meinen Testserver ein, der auf Login klickt. Jetzt sind dies die alten Fälle, die wir zuvor in den HT-Dokumentordner kopiert haben. Ich markiere diese und klicke auf „Löschen“. Lösche diese „false“. Das ist der Remote-Server. Und dies ist unser öffentlicher Ordner , in dem wir die Dateien erstellt haben , um alle Dateien in unserem öffentlichen Ordner hervorzuheben. Wir ziehen sie rüber. Wenn es sich um einen Remote-Server handelte, wird es wahrscheinlich eine Weile dauern, bis sie hochgeladen wurden, und dann können wir zur Seite navigieren und sehen, ob es funktioniert. Es sieht so aus, als würde es funktionieren, nachdem wir per FTP hochgeladen haben. Herzlichen Glückwunsch an diejenigen, die es bis zum Ende des Tutorials geschafft haben. Du hast großartige Arbeit geleistet. Sie haben viele Fähigkeiten erlernt und ich freue mich darauf, Sie in meinen anderen Hugo-Tutorials zu sehen denen wir all diese Konzepte und vieles mehr viel genauer untersuchen in denen wir all diese Konzepte und vieles mehr viel genauer untersuchen. 14. Zusammenfassung: Ich hoffe, dass Ihnen der Kurs gefallen hat und viel rausgeholt hat. Nun, viele der Themen waren nicht so ausführlich obwohl sie eine gründliche Einführung sein sollten. Aber keine Sorge, mois, veröffentlichen Sie mehr Kurse, die alle Aspekte des statischen Webdesigns abdecken . Wir sehen uns im nächsten Kurs. 15. Bonus – - mit -: Dies ist eine Bonusstunde. Ich hatte eine Menge Feedback. Leute, die nach zusätzlichen Funktionen wie dieser fragen , die wir ausführen werden, erstellen eine Liste von Skripten , die mit dem NPM-Paketmanager ausgeführt werden , damit wir die Aufgaben automatisieren können , die ausgeführt werden müssen mit Hugo. Also lasst uns anfangen. Wir gehen zu einem neuen Terminal und das erste, was wir laufen, ist npm. Darin. Sie müssen npm installiert haben. Wenn Sie Node.js herunterladen, ist NPM für Sie enthalten. Als erstes werden wir nach dem Namen des Projekts fragen. In diesem speziellen Fall ist der Name des Ordners vollkommen in Ordnung. Es neigt dazu, es nur auf 0.1 für ein Projekt zu setzen , mit dem ich gerade beginne. Der letzte ist für Patches. Die mittlere Ziffer ist vier Features, die so festgelegt sind wie Änderung. Und die erste Hauptziffer besteht darin, Änderungen zu brechen. Und Sie kennzeichnen es im Allgemeinen nicht als Version eins bis es sich um eine stabile Produktionsversion handelt. Also bleibe ich vorerst bei 0.1. Beschreibung. Sie können optional eine Beschreibung für Ihr Projekt eingeben. Dies ist hauptsächlich der Fall, wenn Sie Ihr Projekt im NPM-Repository veröffentlichen und im Allgemeinen keine Websites im npm-Repository veröffentlichen. Aber es muss dort keine Beschreibung schreiben , nur um sich daran zu erinnern , worum es bei diesem Projekt geht. Wir haben eigentlich keinen Einstiegspunkt, da wir Qie Gei verwenden, um die Website zu kompilieren. Aber was Sie dort hineinlegen könnten ist der öffentliche Schrägstrich index.html, aber es spielt keine Rolle. Wir haben keinen Testbefehl. Und ich habe Git init in diesem Projekt bereits ausgeführt Git init in diesem Projekt weil ich es auf GitHub hochlade. Es ist also schon zu nehmen und es hat dort die Adresse des Git-Repositorys. Es ist ziemlich praktisch , diese Adresse in Ihrer package.json-Datei zu haben , um momentan Schlüsselwörter zu erstellen. Du willst es nicht. Und das ist hauptsächlich, wenn Sie auf NPM hochladen. So können Leute nach Ihrem Projekt suchen. Autor. Auch hier ist es eine Unstable, Ihren Projekten suchen kann, also spielt es keine Rolle. Und Zeit, dass wir eine Lizenz geben würden. Und dann müssen wir die linke Seite bestätigen. Sie werden sehen, dass package.json das Terminal schließt, damit wir es uns ansehen können. Sie können also Dinge löschen , die Sie nicht benötigen. Ich werde mir vorerst keine Sorgen um das Haupt-Olivia-Testskript machen. Ich werde den Autor los. Glycine Bugs auf der Homepage. Denken Sie daran, dass Sie keine nachfolgenden Kommas in Jasons haben müssen, um dieses nachfolgende Komma loszuwerden . Dann sind wir bereit, mit den Skripten zu beginnen. Zuerst werden wir uns ansehen ist div. Ich werde das alles zurückziehen. Lassen Sie uns den Entwicklungsserver betreiben. Wie Sie wissen, waren wir auf dem Hugo-Server, aber es gibt noch ein paar Dinge, die wir tun können, um ein Bild von allen Optionen zu machen, die Ihnen zur Verfügung stehen. Server. Wenn wir ein neues Terminal eröffnen und Hugo sprechen, Server, Space, Dash, Dash, Hilfe. Es listet alle Flaggen auf, die wir anwenden können. Woran wir wirklich interessiert sind, er ist Dash, Dash G, C. Und das führt einige Aufräumaufgaben nach dem Build aus, was großartig ist, um die Dinge sauber zu halten , um zum Beispiel hochzuladen um deinen Fortschritt zu speichern. Und der nächste, um den wir uns Sorgen machen ist das deaktivierte schnelle Rendern. Und was das bewirkt, ist, dass es vollständige Renders bei Änderungen ermöglicht Ihren Entwicklerserver verlangsamt. Leider ist Rhomboeder extrem schnell. Und wenn Sie schneller deaktiviert wurden und aktiviert sind, erhalten Sie immer die aktuellste Version der Website. Im Allgemeinen werden wir tun , dass wir Dash, Dash G, C ausführen . Dann dash, dash, deaktiviere ein Fasten mit Capital F und rendern mit Kapital R Und das ist für mich der optimale Weg, um das Dev-Skript auszuführen. Der nächste Teil davon dient zur Vorschau von Dateien. Es gibt zwei Möglichkeiten, das zu tun. Der erste ist Build-Entwürfe, und zwar für das Erstellen Inhalten, die als Entwurf wahr gekennzeichnet sind. Und der andere ist Build Future. Und das ist für Inhalte , die ein Datum haben, das in der Zukunft liegt , verglichen mit dem Datum, an dem Sie die Builds ausführen, wie heute. Also kombiniere ich sie normalerweise zu einer namens Vorschau. Lass uns weitermachen und lass uns das machen. Und es ist eigentlich eine Abkürzung. Was wir tun werden, setzen wir ein Komma nach diesem Skript und dann machen wir die Vorschau des Dev Colon. Die Art und Weise, wie wir die Verknüpfung verwenden, ist npm. Führen Sie dev aus. Und dann Dash, Dash, Leerzeichen, Strich, Strich. Baue Entwürfe mit Kapital D, Dash, Dash, Build Future. Sie müssen einen Doppelpunkt nach dem Namen des Skripts setzen, damit es gültig ist. Json wird das sagen und bevor wir fortfahren, werden wir es ausprobieren. Anstatt jetzt Cue-Guys Server zu tippen, können Sie jedes Mal nach unten links gehen, wo NPM-Skripte stehen, und sie werden dort für Sie erscheinen. Dies ist der automatische Weg. Ich zeige dir das zuerst und dann zeige ich dir , wie es manuell geht. Also müssen wir den Play-Button drücken. Dies ist in Visual Studio-Code standardmäßig nicht aktiviert. Und wenn Sie dann weiter nach oben schauen, werden Sie sehen, dass der eigentliche Befehl, aber das schnelle Rendern und die Garbage Collection deaktiviert hat. Und die Seite wurde gebaut. Sie können dann Control C zum Anhalten verwenden, oder Sie können einfach das Papierkorb-Symbol klicken, um das Terminal zu beenden. Wir haben dann unsere Vorschau bekommen. Es führt auch eine Aufgabe aus. Du merkst, dass es zwei Schritte ist. Wir haben unseren ersten Befehl und dann haben wir unsere Optionen hinzugefügt. Nun, die manuelle Art , die Aufgaben auszuführen, wenn wir ein neues Terminal bekommen, ich das normalerweise nicht, aber Sie müssen es gelegentlich tun, insbesondere für die Installation von NPM Run. Und wenn du dann in dein paket.json schaust, siehst du Dev. Er tippt div, genau wie wir hier eingetippt haben. Npm run dev, das ist der genaue Befehl oder verwendet , um den ersten auszuführen. Wenn Sie den zweiten machen möchten, wäre es Dev Colon, Vorschau. Und das wird dasselbe Skript ausführen , aber Sie können im Allgemeinen einfach die Option auf der linken Seite von Visual Studio Code verwenden . Machen wir noch ein paar Skripte. Einige werden tun, um Q goes zu bauen, ich werde ein Komma einsetzen. Und dann führen wir Build a Doppelpunkt aus, um über die Kommentare abgestimmt zu werden. Also sind wir hier, du musst damit anfangen. Dann zeige ich dir die Optionen. Also führen wir Hugo, Dash, Dash, Hilfe aus. Der erste, um den ich mir Sorgen mache, ist ausführlich. Und was das bedeutet ist, dass es dir alles zeigt, was vor sich geht , denn gelegentlich ist alles in Ordnung, wenn du den Server betreibst. Aber wenn Sie dann die gesamte Site erstellen möchten , haben Sie ein Problem. Dort benutze ich Dash, Dash, ausführlich. Du könntest dash v verwenden Dash v ist wirklich praktisch, wenn du es eintippst und du willst Enter drücken. Aber wenn Sie es in eine Datei einfügen, müssen wir es jedes Mal eingeben. Ich empfehle dringend, die Vollversion zu verwenden. Auf diese Weise ist es viel einfacher zu verstehen. Also mit Hugo Dash, Dash, ausführlich, dann benutzen wir Garbage Collection. Also dash, dash G, C. Dann benutzen wir minify. Und dass wir alle HTML-XML-Dateien minimieren, jedes der JavaScript-HTML-CSS für die Minify ändern , weil es für die Produktion bestimmt ist. Und das letzte tun wir, weil wir es in den öffentlichen Ordner ausgeben. Wir werden Dash, Dash Clean Ziel verwenden. Dir wird sagen, dass X1 eine ist, die ich für die Entwicklung sehr hilfreich finde. Das ist „Rendern auf Festplatte“. Und das hab ich CamelCase. Was wir jedoch tun, um zu beginnen ist, dass wir den Hugo-Server-Befehl kopieren und einfügen. Füge das ein. Wir gehen zurück zum Eingabeaufforderungsterminal und schauen uns die Optionen an. Und eine Option, auf Festplatte rendern, und die alle Dateien von der Festplatte bereitstellt. Standardmäßig werden alle Dateien in den Speicher des Computers abgelegt und in den Browser bereitgestellt. Es gibt keine Aufzeichnungen von ihnen die du dir ansehen kannst, während es passiert, es passiert alles sofort. Wenn wir Spüldiskette verwenden, alle Dateien, die wir in das öffentliche Verzeichnis abgelegt haben, und Sie können tatsächlich dort hineingehen. Sie können die Größe der Dateien überprüfen. Du kannst sie öffnen , während es läuft. So müssen Sie mehrmals auf die Schaltfläche „Erstellen“ klicken. Also würde ich es auf die Festplatte vermieten, eigentlich CamelCase, also ist es Capital T, Capital D. Und weil wir dann das öffentliche Verzeichnis verwenden, die Dateien, die von Hugo hochgeladen werden, kopieren und Einfügen des sauberen Ziel-DIR auch. Und damit verwende ich einen anderen Befehl , der sehr ähnlich ist. Und das ist Brenda für diese Art von Doppelpunkt. Und wir machen eine Vorschau. Und das wird unserem vorherigen Skript etwas ähnlich sein . Für div. Wir können das einfügen, außer dass wir den Befehl dieses Mal nicht ausführen, führen wir Render auf Festplatte aus. Der nächste, den ich verwende, ist wahrscheinlich am häufigsten das Rendern für diese Produktion und dies ist die wichtigste, die ich verwende. Kopieren und Einfügen. Außer dieses Mal. Wir werden keine Gesetzesentwürfe machen und Zukunft aufbauen. Wir werden die Umgebung benutzen. Wir werden das auf Produktion setzen. Also in Brand auf Minze Produktion und verkleinern sich auch , weil wir versuchen, den Produktionsaufbau nachzuahmen , der weiter nach oben gestiegen ist. Wir benutzen minify. Wir müssen uns keine Sorgen um sauberes Ziel-DIR machen, da ich das bereits im Hauptraum-Studiendisk-Skript gemacht habe. Und die letzte ist nicht ganz obligatorisch zur Hand zu haben, sondern Hugo-Version. Das ist ganz einfach ehrlich. Es ist eine kleine Erinnerung. Hugo-Version. Und das lässt dich wissen, welche Version von Hugo du betreibst. So können wir zum Beispiel runtergehen und den Play-Button drücken. Und es wird dir sofort sagen, welche Version von Hugo. Und ich benutze Hugo extended immer, weil dort die Funktionalität für CSS- und JavaScript-Building integriert ist dort die Funktionalität für . Aber es sagt mir, welche Version ich verwende, 1.11010. Das ist ein Bonus. Feiertag nützlich. Empfehlen Sie dringend, dies einzurichten und es an das anzupassen, was zu Ihnen passt. Ich würde mich freuen, dass Sie ein paar Screenshots machen und im Projektbereich auftauchen und mir zeigen können, wie Sie persönlich Ihre eigene Hugo-Entwicklungsumgebung eingerichtet haben . 16. Bonus – Konfigurationsdatei aufgeteilte Dateien: Dies ist eine weitere Bonusstunde, die ich basierend auf dem Feedback von Schülern veröffentliche , die dies tun werden , wenn ich die Konfigurationspunkt-YAML-Datei in mehrere Dateien aufteilen möchte, um es einfacher zu machen finde den Abschnitt der Konfigurationsdatei, nach der du suchst. Wir machen das ist, dass wir einen Dateiordner im Stammverzeichnis Ihres Projekts namens config erstellen . Wir haben keinen Ordner namens Underscore default erstellt. Dann ziehen wir unseren Config-Punkt YAML in diesen Ordner. Jetzt wird das sofort einwandfrei funktionieren. Aber was wir tun werden, ist, dass wir den Menübereich aufteilen. Wir werden dies tun, um all das hervorzuheben, und wir schneiden es ab. Es wird eine Datei namens Menüpunkt YAML erstellen und wir fügen sie ein. Aber was jetzt passieren muss, ist, dass wir den Menüpunkt entfernen und die gesamte Konfiguration markieren und mit der Umschalttaste eine Ebene zurückbringen müssen, da wir sie nicht mehr in Ihrem I20 benötigen weil sie in menu.html waren. Das wird automatisch für uns erledigt. Es gibt eine weitere Datei, die Sie häufig verwenden , und das ist params dot YAML. Normalerweise hätten Sie zum Beispiel ein Params-Item. Hier drüben könntest du gehen, Params könnten beispielsweise etwas wie Website-Autor machen. Aber das brauchten wir nicht. Sie haben einfach den Website-Autor in die neue Datei eingefügt. Das gibt es nur zu einem schnellen. Das wird dir viel Zeit sparen. Es wird Ihre Seiten viel kürzer halten.