Squarespace Entwickler-Modus: Erstelle und bearbeite deine eigenen Squarespace-Vorlagen

1. Einführung: Squarespace ist eine einfach zu bedienende Plattform für den Aufbau schöner Websites, in der Regel auf diejenigen ausgerichtet, die keine Programmierkenntnisse haben. Aber was ist, wenn Sie die volle Kontrolle über Ihre Website haben können? Was wäre, wenn Sie Ihre eigene Squarespace-Vorlage bearbeiten oder erstellen könnten? Hallo, ich bin Christopher Dodd und ich bin ein Top-Lehrer hier auf Skillshare.com, die Themen wie Webentwicklung und Online-Freelancing abdecken. In dieser Klasse werden wir lernen, wie man etwas namens Entwicklermodus in Squarespace verwendet . Es ist eine Funktion in Squarespace, die es uns ermöglicht, unseren Template-Code herunterzuladen und genauere Updates auf unserer Website zu machen, sowie Funktionen hinzuzufügen, die möglicherweise nicht bereits in unserer Vorlage vorhanden sind. Das Ergebnis ist die gleiche großartige Benutzererfahrung beim Aufbau einer beliebigen Squarespace-Website. Es ist gerade jetzt haben Sie die volle Kontrolle über die Vorlage. In dieser Klasse werden wir mit einer grundlegenden Vorlage beginnen Entwicklermodus aktivieren, und beginnen, unsere Website zu bauen sowohl die Admin-Schnittstelle als auch die Sprachen, die die Squarespace-Vorlage bilden, einschließlich HTML, CSS, JavaScript und Squarespace eigenen Jason. T Sprache. Am Ende der Klasse werden Sie die Struktur der Vorlage sowie die meisten Funktionen verstehen, die durch die Verwendung von Code angepasst werden können. Soweit ich weiß, gibt es keinen solchen Kurs. Ich freue mich, dass du dich mir im Inneren anschließen kannst. 2. Notwendige Tools und Wissen: Bevor wir mit dieser Klasse beginnen, wollte ich einige der erforderlichen Kenntnisse oder Werkzeuge abdecken, die Sie benötigen, um tatsächlich der Klasse folgen zu können. Natürlich ist dies eher eine Zwischenklasse, daher geht es davon aus, dass Sie bereits einige Front-End-Web-Entwickler-Fähigkeiten haben. Ich habe eine Liste von einigen Dingen hier auf meinem Computer, einschließlich der Befehlszeile, der Verwendung von DevTools in Google Chrome oder dem Browser, den Sie verwenden möchten. Sie müssen etwas CSS kennen, und wir werden über lokale und Live-Versionen einer Website sprechen , so dass Sie auch wissen müssen. Basic Git und natürlich JSON. Ich wollte diese Dinge nur im Vorfeld in dieser Lektion ansprechen. Wenn Sie all diese Dinge wissen, sich keine Sorgen um diese Lektion, überspringen Sie sie einfach, aber für diejenigen von Ihnen, die ein wenig mehr auf der Anfängerseite, wollte ich diese nur abdecken, weil sie Sie in der Klasse stolpern wenn Sie keine Ahnung haben, was diese sind. Zunächst einmal Kommandozeile, ein sehr wichtiges Werkzeug für alle Programmierung. Zum Beispiel verwende ich iTerm für meine Terminalanwendung, aber auf Mac ist das Standardprogramm, das mit jedem Computer geliefert wird, Terminal. Hier können Sie sehen, dass es nur ein bisschen eine App ist, in die Sie Befehle schreiben können, wie eine Grundzeile, in den Code-Ordner wechseln, den Code-Ordner auflisten, löschen. Sie sollten ein wenig über die Befehlszeile wissen, aber wenn Sie die Befehle genau so befolgen, wie ich im Video sage, sollten Sie nicht mit vielen Problemen aufkommen, selbst wenn Sie neu sind, Befehle in der Befehlszeile zu schreiben. Wie ich schon sagte, die, die ich in dieser Klasse verwenden werde, ist iTerm. Es ist ein spezielles, auf dem ich bestimmte Funktionen eingerichtet habe, wie zum Beispiel, ich muss nicht cd eingeben, wenn ich in ein Verzeichnis wechseln möchte. Wenn ich tun wollte, was ich vorher getan habe, kann ich einfach Code eingeben, und wenn es keinen Befehl gibt, wird es verstehen, dass ich versuche, Verzeichnisse zu ändern. Unter Windows wird das Programm wahrscheinlich als Eingabeaufforderung bezeichnet. Ich bin mir ziemlich sicher, dass dies das Standard-Befehlszeilentool ist, das mit Windows geliefert wird. Nur um bewusst zu sein, werden wir die Befehlszeile verwenden, aber wir werden nicht schwer in der Befehlszeile sein, also müssen Sie kein Experte darin sein. Die andere Sache, die ich brauche, um vertraut zu sein, ist Chrome DevTools oder was auch immer Software, die Sie verwenden. Der Browser, den ich gerne verwende, ist Google Chrome, aber Sie können Firefox oder Safari verwenden. Die DevTools für mich, Ich kann durch Drücken von Optionsbefehl öffnen „I“ auf meinem Mac, und Sie erhalten dieses Panel hier, das Elemente und Konsole hat. Diese hier, Konsole ist diejenige, die wir in dieser Klasse betrachten werden , wie es hier heißt, JS Console. Was wir tun werden, ist, dass wir tun, was eine console.log genannt wird, die Daten nimmt und sie im Grunde in diese Konsole hier ausgibt. Was wir tun werden, ist Objekte zu nehmen, sie in diese Konsole zu legen, und dann werden wir durch sie navigieren. Wenn Sie das noch nie gesehen haben , könnte Ihnen dieser Teil der Klasse ein wenig unbekannt sein. Aber auch hier ist dies eine Fähigkeit, die Sie als Front-End-Webentwickler mit der Konsole haben sollten. In der Tat, wenn Sie eine Klasse rein auf DevTools wollen, lassen Sie es mich wissen, aber es sollte ziemlich einfach sein, mit trotzdem zu folgen. CSS, ich werde etwas CSS schreiben, aber das ist keine CSS-Klasse. Ich möchte nicht, dass Sie CSS sehen und dann davon überwältigt werden. Wenn Sie CSS nicht verstehen, empfehle ich Ihnen, CSS zu lernen. Ich habe schon Kurse hier auf Skillshare, die du nehmen kannst. Aber wenn du es nicht verstehst und nicht daran interessiert bist, es zu lernen, natürlich keine Sorgen. Es ist nicht wichtig für diese Klasse, aber als Front-End-Webentwickler, der Squarespace-Vorlagen oder irgendetwas am Front-End erstellt, werden Sie auf jeden Fall wissen wollen, wie man CSS verwendet. Wie ich hier erwähnt habe, wird Less diskutiert werden, ist aber kein erforderliches Wissen. Wie wir später in dieser Klasse herausfinden werden, verwenden wir Less Dateien, die Sie einfach mit CSS austauschen können. Weniger ist CSS Pre-Compiler. Sie müssen nicht unbedingt wissen, was das ist, aber wissen Sie nur, dass, wenn Sie die.less im Dateinamen sehen, es bedeutet, dass Sie einen CSS-Code darin schreiben können, oder Sie können einen Weniger Code schreiben, sich etwas von CSS unterscheidet. Aber mach dir keine Sorgen, wenn du nichts über Less oder sein Gegenstück Sass weißt, auf dem ich auch eine Klasse hier auf Skillshare habe, brauchst du keine Less zu wissen, um den Nutzen aus dieser Klasse zu bekommen. Wenn Sie.less sehen, nur think.CSS, wenn Sie mit Less überhaupt nicht vertraut sind. Eine andere Sache, über die ich konsequent während der gesamten Klasse spreche, die Sie verwirren könnte, ist, dass ich über die lokale Version der Website spreche. Wenn wir unseren Code herunterladen und einen Server auf unserem eigenen Computer ausführen, um den Code auszuführen, heißt das, was lokal läuft. Lokal bedeutet nur auf Ihrem Computer. Während der gesamten Klasse, was wir tun werden, ist die Bearbeitung von Code auf unserem eigenen Computer und das wird die Version ändern oder ändern, was auf dem Bildschirm vor Ort geschieht, so auf unserem eigenen Computer. Aber damit das tatsächlich auf die Website geht, müssen wir diese Änderungen schieben, was ich Ihnen später in der Klasse zeigen werde. Ich wollte das nur kurz erwähnen, denn wenn Sie mich lokal sagen hören, lokale Version, lokale Website, das ist, was ich meine, ich meine, die Website, die wir auf unserem eigenen Computer laufen. Es wird nicht dasselbe sein wie die Website auf Squarespace selbst. Ich brauche Sie auch, um grundlegende Git zu verstehen, sehr grundlegende Git. Git ist ein Versionskontrollsystem. Es ist das beliebteste Versionskontrollsystem, eine sehr wichtige Fähigkeit, als Entwickler zu haben. Es ist wichtig, Git für diese Klasse zu kennen, weil wir es verwenden, um die Live-Version zu aktualisieren. Wir werden lokale Änderungen vornehmen und dann werden wir es auf die Live-Squarespace-Website schieben. Wir werden das im Grunde nur mit drei Befehlen tun. Eigentlich denke ich, es gibt insgesamt vier Befehle, die wir für Git in der ganzen Klasse verwenden. Nicht viel, aber wieder, wenn du Git siehst und noch keine Erfahrung damit hattest, will ich nicht, dass du ausflippst. Wir verwenden nur vier Befehle. Einer, um den Git-Code auf Ihren eigenen Computer herunterzuladen, und dann einen, um den Code zu Ihrem Commit hinzuzufügen, dann um den Code zu übergeben und dann den Code zu drücken. Es ist sehr einfach. Nur flippen Sie nicht aus, wenn Sie nicht mit Git vertraut sind. Wieder, viele Ressourcen online, wenn Sie Git lernen möchten. Dann ist die letzte Sache JSON. JSON ist nur ein einfaches Datenstrukturformat. Wenn wir jetzt in unseren Browser gehen und nach JSON suchen, ging es zu JSONLint. Es steht für JavaScript Object Notation. Es ist ein leichtgewichtiges Format für die Speicherung und den Transport von Daten. Sobald Sie Ihren Kopf um ihn herum haben, ist es sehr einfach. Ich empfehle definitiv, wenn Sie keine Ahnung haben, was JSON ist, zuerst etwas darüber zu recherchieren, aber im Grunde haben Sie nur diese Schlüssel-Wert-Paare. In diesem Fall ist der Wert tatsächlich ein Array und dann haben Sie innerhalb dieses Arrays mehrere Objekte mit zwei verschiedenen Schlüssel-Wert-Paaren. Das ist ein bisschen komplexer, aber hier sehen Sie dieses Beispiel hier ist ein typisches Beispiel. Sie haben den Schlüssel, der der Vorname und der Wert, der John ist. Die einzige Fähigkeit, die Sie wirklich mit JSON in dieser Klasse benötigen, ist zu wissen, wie Sie durch ein JSON-Objekt navigieren. Zum Beispiel, wenn ich John von dieser Datenstruktur hier bekommen wollte, müsste ich das erste Element des Arrays, Mitarbeiter finden und dann den Vornamen dieses Elements im Array entfernen. Auch hier ist das kein komplexes Zeug, aber wenn Sie den JSON-Teil dieser Klasse erfahren, empfehle ich definitiv, eine Pause zu machen und ein wenig über JSON zu forschen, weil JSON im Grunde im Herzen von Squarespace-Vorlagen. Es ist nicht etwas, das besonders kompliziert ist, aber gleichzeitig wird es Sie stolpern, wenn Sie keine Ahnung haben, was mit dem JSON los ist. Das ist eine gute Empfehlung für all diese Dinge. Wenn eines dieser Dinge, von denen Sie keine Ahnung haben, auf jeden Fall etwas recherchieren. Ich würde empfehlen, bevor ich überhaupt zu diesem Punkt in der Klasse komme. Ich wollte nur dieses erforderliche Wissen abdecken weil es manchmal einige Fragen gibt, die in den Klassen auftauchen. Sie auf kleinen Dingen stecken, die ich für einen Anfänger nicht wirklich in Betracht gezogen habe, dies ist eher eine Zwischenklasse, also denken Sie daran. Dies sind einige der Dinge, zusätzlich zu dem, was wir in der heutigen Klasse lernen werden, mit denen Sie etwas Vertrautheit haben müssen. Ich wollte nur dieses Video hier reinbringen. Offensichtlich, benötigte Tools, genau wie jede andere meiner Web-Entwicklungsklassen, benötigen Sie einen Webbrowser, also für mich ist es Google Chrome. Sie können Firefox oder Safari und dann einen Code-Editor verwenden. Wie Sie hier sehen können, verwende ich Atom gerne, wenn ich mit nur einzelnen Dateien arbeite. Das ist A-T-O-M. Wenn ich mit vollständigen Projekten arbeite, verwende ich jetzt gerne VS Code , der kurz für Visual Studio Code ist. Offensichtlich werden Sie ein Kommandozeilenprogramm benötigen, aber das kommt standardmäßig mit jedem Computer. Wir werden einige andere Software in der Klasse installieren, so dass Sie das noch nicht unbedingt haben müssen. Wir werden durchlaufen, welche Pakete Sie in dieser Klasse installieren müssen, während wir weitergehen. Aber das war's, Leute. Ich wollte nur sicherstellen, dass Sie sich dieser Dinge bewusst sind, die Sie wirklich wissen müssen. Stellen Sie sicher, dass Sie wie immer einen Code-Editor und einen Webbrowser haben. Das ist alles. Ich werde Sie im nächsten Video sehen. 3. Was ist eine Squarespace-Vorlage: Bevor wir anfangen, unsere Squarespace-Vorlage zu bearbeiten und zu erstellen, müssen wir uns darüber im Klaren sein, was eine Vorlage tatsächlich ist. Wenn wir die squarespace.com Website aufrufen und auf den Menüpunkt für Vorlagen klicken, können wir ein Portfolio der verschiedenen Vorlagen sehen , die standardmäßig in Squarespace verfügbar sind. Sie haben diese, die am beliebtesten sind und dann haben Sie sie auch nach Kategorie organisiert. Dies sind diejenigen, die Sie vielleicht verwenden möchten, wenn Sie eine Fotoportfolio-Website hatten oder vielleicht haben Sie eine ganze Website nur für Ihre Hochzeit erstellt. Diese Vorlagen werden wahrscheinlich diejenigen sein, die Sie zuerst betrachten möchten. Aber natürlich spielt es keine Rolle. Sie können die gewünschte Vorlage in Squarespace verwenden. Die coole Sache über diese Vorlagen ist jedoch, dass sie auf jeder Squarespace-Website arbeiten. Die Back-End-Architektur und alle Seiten und Fotos, die Sie hinzugefügt haben , sollten immer noch mit all diesen Vorlagen funktionieren. Es ist im Grunde nur die Anpassung des Layouts, Präsentation und des Stils Ihrer Website. Um dies zu demonstrieren, was meiner Meinung nach am besten ist, Ihnen eine meiner Websites zu zeigen und zu sehen, was passiert, wenn wir die Vorlage ändern. Da ich gerade eingeloggt bin, kann ich hier rüber gehen und auf „Konto-Dashboard“ klicken. Hier sehen Sie meine Liste der Websites. Dieses ist derjenige, den wir in dieser Klasse bauen werden, dieses ist ein anderes Projekt, das ich habe, und der Grund, warum sie hier sitzen, ist, weil es Testseiten mit eingeschaltetem Entwicklermodus und eines der Features von Entwicklermodus ist, dass die Testversion nie abläuft. Sie können sie so lange im Entwicklermodus haben , wie Sie möchten, bis Sie bereit sind, zu veröffentlichen, und dann können Sie einen Plan erstellen. Aber genau hier unten ist eine Website, die derzeit live ist und ich habe einen Plan auf. Es ist meine Foto- und Videografie-Portfolio-Website. Wenn ich auf „Seite bearbeiten“ klicke, komme ich zum Squarespace-Administrator für diese Website. Nun, wenn Sie mit diesem Admin nicht vertraut sind, werden wir in einer zukünftigen Lektion auf die Grundlagen eingehen, aber für dieses Video möchte ich Ihnen die Vorlage zeigen. Werfen wir einen kurzen Blick auf meine Website. Ich kann entweder auf die Menüpunkte hier klicken oder in das Seitenverzeichnis gehen, und Sie können hier in „Secondary Navigation“ sehen, Ich habe „Events“, und hier ist eine Galerie von eingebetteten Videos. Das sind Vimeo-Links von einigen der Ereignisse, die ich gedreht habe. Wenn wir hier zurück gehen, habe ich ein paar Videos in der Modenische, die ich gedreht habe, und Sie können das Layout für all diese Seiten sehen, es ist das gleiche. Es ist nur eine Galerie von Videos, und wenn ich auf die „Fotos“ -Seite gehe, ist es nur eine Galerie mit verschiedenen Fotos. Ich kann sie hier in meinem Admin hochladen und sie werden auf der Seite basierend auf der Vorlage angezeigt , die ich verwende. Gehen wir hier rückwärts, gehen wir „Home“, klicken Sie auf „Design“, klicken Sie auf „Vorlage“, und Sie können sehen, dass wir die Jaspis-Vorlage ausführen, das ist unsere Live-Vorlage. Aber was wir tun können, ist jederzeit zu wechseln Templates und wir können auch eine Vorlage installieren, ohne sofort wechseln zu müssen. Wir können tatsächlich eine Vorschau sehen. Ich werde auf „Neue Vorlage installieren“ klicken, und wie hier steht, wirkt sich die Installation einer Vorlage nicht auf Ihre Live-Website aus. Was ich tun werde, ist wählen Sie eine Vorlage, die ich denke, wird auch gut mit einer Website wie meins von Fotografie und Videografie Portfolio funktionieren . Genau hier werde ich auf „Preview Avenue“ klicken , und das zeigt Ihnen tatsächlich nur eine größere Vorschau, nicht tatsächlich Vorschau auf Ihrem Shop. Was wir tun müssen, ist auf „Start With This Design“ zu klicken, und es wird diese Vorlage auf unserer Website installieren. Hier haben wir es, wir können es deinstallieren oder wir können klicken, um eine Vorschau. Ich werde eine Vorschau, und jetzt, was Sie sehen werden, ist unsere Website wird jetzt in diese Vorlage geladen. Nun, das Problem mit meiner Website, glaube ich, war, dass ich die ganze Navigation in einer sekundären Navigation hatte. Da dies die primäre Navigation verwendet, ist es ein eigenes Navigationsgerät eingefügt, aber wenn wir zurück zu „Home “ gehen und dann gehen wir zurück zu „Seiten“, und wir scrollen vorbei an dieser oberen Navigation hier, können wir alle Seiten sehen, die existieren auf meiner Website im Moment. Ich kann zu dieser „Events“ Seite gehen, die wir uns vorher angesehen haben, und Sie können den gleichen Inhalt dort sehen, alle die gleichen Vimeo bettet, aber anstatt es als Raster zu präsentieren, was diese Vorlage getan hat, hat es als Diashow. Jetzt müssen wir durch diese Diashow klicken und so spielen Sie ein Video ab. Dann mit der Foto-Seite, wenn ich auf meine „Fotos“ -Seite gehe, können Sie sehen, dass die Fotos auch in einer Diashow angezeigt werden. Der Punkt, den ich hier mache, ist, dass der gesamte Inhalt immer noch da ist und wir den Inhalt immer noch sehen können, aber der Unterschied ist, dass das Aussehen und die Präsentation anders ist. Für alle Galerien haben wir diese Diashow statt dem, was wir vorher hatten, die ein Raster war. Offensichtlich gibt es Schriftarten, die unterschiedlich sind, da ist der Titel meiner Website, der anders positioniert ist, aber das ist alles bestimmt, wie wir gerade von der Vorlage diskutiert haben. Deshalb, weil die Vorlage effektiv nur die Inhalte, die Sie auf Ihrer Website haben, nicht den Inhalt ändern oder etwas löschen, können wir unsere Vorlage so weit wie möglich ändern, so viel wie wir wollen und wir können leicht zurückwechseln. Nun, ich habe meine alte Website zurück. Ich habe es nie wirklich verloren. Ich werde auf „Deinstallieren“ klicken, weil ich mit diesem Thema oder mit dieser Vorlage zufrieden bin. Das war eine Vorlage, die auf einer tatsächlichen Live-Website geändert wurde, aber was wir für diese Klasse tun werden, ist, dass wir mit einer Basisvorlage beginnen werden. Die Art und Weise, wie wir dies tun können, ist, indem Sie zu base-template.squarespace.com gehen, also ist es Basis-Strichvorlage dot squarespace dot com, und Sie können diese Basisvorlage sehen. Hier unten können Sie auf „Erstellen Sie eine Site wie diese“ klicken, was ich tun werde, und was das tun wird, ist eine neue Entwicklungstür oder eine neue Testtür für Sie zu erstellen, die Sie schnell in einen Entwicklungsspeicher verwandeln können, indem Sie den Entwicklermodus aktivieren. Wir werden in einem späteren Video darauf eingehen, aber ich wollte diese Vorlage starten, weil dies der Ausgangspunkt sein wird , auf dem wir weiterhin über die Klasse aufbauen werden, und es ist auch der, den ich vorschlage, mit dem Sie beginnen gut, wenn Sie lernen, wie Sie Ihre eigene Vorlage erstellen weil es viele grundlegende Dinge hat , die Sie brauchen, die Sie wirklich nicht von Grund auf neu programmieren möchten, aber gleichzeitig ist es nicht sehr meinungsvoll in dem Sinne, dass es ist nicht sehr stilisiert und es hat nicht viel drinnen, also gibt es nicht viel, was Sie brechen müssen, um das Ergebnis zu erhalten, das Sie wollen. Im nächsten Video werden wir lernen, wie man den Admin hier benutzt. Wir werden einige Inhalte erstellen und danach werden wir untersuchen, wie man den Template-Code tatsächlich bearbeiten kann. 4. Squarespace Grundlagen: Also jetzt haben wir unsere neue Website mit der Basisvorlage. Bevor wir tatsächlich gehen und diese Vorlage bearbeiten, ist es wichtig, dass wir alle ein Verständnis davon haben, wie Squarespace tatsächlich vom Administrator, Benutzer, jeweiligen. Die meisten Verwendungen von Squarespace, die überwiegende Mehrheit von ihnen wird nur ihre Website von diesem Admin bearbeiten. Es ist also wichtig, dass wir verstehen, was wir hier eigentlich tun. Für diejenigen unter Ihnen, die mit Squarespace erfahren sind und eine Weile eine Squarespace-Website verwaltet haben oder Ihre eigene Squarespace-Website mit dieser Schnittstelle erstellt haben. Dann vielleicht ist dies eine Lektion, die Sie überspringen können, aber für den Rest von uns möchte ich Ihnen tatsächlich zeigen, wie Sie den Inhalt und das Design Ihrer Website nur mit dem Admin steuern können . Dann gehen wir zu, wie man die Vorlage tatsächlich mit Code bearbeitet. Der Admin, den Sie hier betrachten, ist die einzige Kontrolle, die Sie über das Back-End Ihrer Website haben und es bildet die Struktur Ihrer Website-Inhalte. Dieses Zeug zu kennen ist sehr wichtig, bevor Sie Code bearbeiten. Das erste, was ich tun möchte, ist, auf Seiten zu gehen und diesen Demo-Inhalt zu entfernen. Also diese Seite, dieses Blog. Jetzt, wenn der Demo-Inhalt entfernt wird, können wir unsere eigenen Seiten erstellen. Wenn wir möchten, dass die Seite nicht in der Navigation verlinkt wird, können wir hier klicken. Oder wenn wir möchten, dass es automatisch in der Website-Navigation angezeigt wird, können wir dieses Symbol hier klicken. Ich werde auf dieses Symbol klicken und wir haben unsere Optionen hier. In diesem Layout-Abschnitt können wir eine Seite mit einem vordefinierten Layout erstellen. Hier in diesem Sammlungsabschnitt können wir hinzufügen, was eine Sammlung in Squarespace genannt wird. Eine Sammlung ist im Grunde so etwas wie ein Blog, eine Galerie, eine Sammlung von Produkten ist im Grunde eine Liste von etwas. Also, wenn wir darauf klicken, sollten wir eine Auflistung sehen. Dann haben Sie innerhalb einer Sammlung verschiedene Artikel. Das perfekte Beispiel ist natürlich ein Blog, den wir in einer Sekunde erreichen werden. Ein Blog, können Sie auf den Blog klicken und Sie werden eine Liste aller Blog-Beiträge zu sehen. Aber dann kannst du auch auf den einzelnen Blogbeitrag klicken und diese lesen. Aber das ist ein perfektes Beispiel für eine Sammlung. Es ist im Grunde eine Liste von Inhalten mit scheinbaren Seiten und untergeordneten Seiten. Der andere Inhalt, den wir hier hinzufügen können, ist eine Titelseite, die, soweit ich weiß, eine Seite ist, die den gesamten Bildschirm abdeckt und einen oder zwei Links hat. So klicken Sie auf den Link und dann werden Sie auf eine bestimmte Seite auf dem Rest der Website weitergeleitet. Die andere Möglichkeit hier ist, einen externen Link zu öffnen. Was ich tun werde, ist eine Über Seite zu erstellen. Also werde ich hier für das über Layout klicken. Wir haben drei verschiedene Layouts, aus denen wir wählen können. Ich werde nur auf die Banner-Version klicken. Wenn es diese Box hier öffnet, werde ich die Seite über uns aufrufen. Nachdem wir es so genannt haben, wird es hier auftauchen. Sie können auch sehen, dass es in unserer Website-Navigation angezeigt wird. Hier können Sie den Inhalt der Website bearbeiten. Wenn ich den Mauszeiger über den Seiteninhalt führe, wird der Seiteninhalt angezeigt, und es gibt zwei Optionen: Bearbeiten oder Einstellungen. Wenn ich auf Einstellungen klicke, erhalte ich hier eine Reihe von verschiedenen Einstellungen, die ich ändern kann. Aber wenn ich auf Bearbeiten klicke, habe ich Zugriff auf diesen Seitengenerator, der in Squarespace kommt. Also hier habe ich einen Textblock. Ich kann die Platzierung des Titels bearbeiten. Wenn ich hier zu diesem Bildblock gehe, kann ich entweder ein Bild von meinem Desktop hinzufügen oder auf Bearbeiten klicken und ich kann hier klicken, um nach einem Bild zu suchen. Dies ist eine coole Funktion von Squarespace ist, dass es automatisch auf Splash sucht, die eine Website ist, wo Sie kostenlose Stockfotos finden können. Sagen wir einfach, ich will das benutzen. Klicken Sie auf Zur Website hinzufügen. Es wird verarbeitet und in der Größe geändert. Da haben wir es. Ich klicke auf Übernehmen. Vielleicht schreibe ich eine Beschriftung. Mädchen, das Sit-ups macht. Ich werde nur den Inhalt hier lassen, weil er irrelevant ist. Hier können Sie die Seite nach Belieben bearbeiten. Sie können hier auf diese kleinen Symbole klicken und Sie können verschiedene Blöcke hinzufügen , die im Squarespace-Seitengenerator verfügbar sind. Es ist wichtig, hier zu beachten, dass dies nicht anpassbar ist. Diese Blöcke kommen in Squarespace und soweit ich weiß, können wir hier keine eigenen Blöcke hinzufügen. Das ist in Ordnung, hier gibt es viele Möglichkeiten. Wie Sie bald mit der Vorlage erfahren werden, sind wir tatsächlich in der Lage, ziemlich viel mit Code anzupassen. Also, um sich dort keine Sorgen zu machen. Wenn ich auf Speichern klicke. Jetzt wird diese Seite gespeichert. Wenn ich auf die Willkommensseite zurückgehe, können Sie sehen, wie ich schon sagte, es ist in dieser Website-Navigation hier. Als nächstes möchte ich Ihnen eine Sammlung zeigen. Also erwähnten wir Blog vorher. Wenn ich auf New Blog klicke, Ich werde nur nennen dies den Blog. Wenn ich hier für den Blog gehe, kann ich tatsächlich in einem neuen Blog-Beitrag hinzufügen. Es wird mich bitten, hier einen Titel und eine Beschreibung einzugeben. Ich werde nur einige Inhalte kopieren und einfügen, einige sehr grundlegende Inhalte. Da gehen wir. Ich kann Tags und Kategorien hinzufügen, genau wie Sie es in jeder Blogging-Plattform, die zu Hause setzen würde . Sie trennen sie einfach durch ein Komma und sie werden automatisch voneinander getrennt. Verriegeln. Ich werde eine Kategorie der Übung auswählen. Cool. Also gerade jetzt ist dieser Beitrag im Entwurfsmodus, aber ich kann Speichern und veröffentlichen drücken. Jetzt können Sie sehen, dass es hier in dieser Liste ist. Also, wenn ich es auf einen Entwurf setzen. Ich kann alle meine Entwürfe hier sehen. Ich kann sie auch planen oder sie in Überprüfung, aber im Grunde hier auf der Blog-Seite oder lassen Sie mich einfach überprüfen, Ich bin auf der Blog-Seite. Wenn ich hier auf die Blog-Seite klicke, werden Sie sehen, dass ich eine Liste der abgekürzten Blogbeiträge bekomme, die im Moment nur einer ist. Wenn ich tatsächlich auf den Blog-Beitrag klicke, können Sie sehen, dass es das gleiche ist, aber das liegt daran, dass ich nur einen von ihnen habe. Lassen Sie uns tatsächlich einen zweiten Blogbeitrag erstellen, damit ich beweisen kann, was ich hier sage. Nennen wir das hier, nochmal, ich finde hier nur Zeug aus. Achten Sie nicht zu sehr auf die tatsächlichen Inhalte dieser Seiten. Gehen Sie, um diese Kategorien als Ernährung zu erstellen, drücken Sie Speichern und Veröffentlichen. Drücken Sie Fertig. Jetzt können Sie sehen, dies ist der Blog-Beitrag für Top-Dinge zu essen, um gesund zu bleiben. Wenn ich zurück zum Blog gehe, können Sie sehen, dass wir beide Beiträge hier drin haben, also ist es wie ein Eintrag. Dies sollte die Idee einer Sammlung nach Hause bringen. Mit einer Sammlung haben Sie eine Sammlung von einzelnen Beiträgen, Bildern, Videos, in diesem Fall Blog-Posts. Wenn Sie zu der Sammlung gehen, können Sie die Liste sehen und dann können Sie auf die einzelnen Elemente klicken. Dieses Konzept ist sehr wichtig zu verstehen, da wir tatsächlich den Code für die Liste bearbeiten und den Code für die Elemente im Squarespace-Entwicklermodus bearbeiten können. Schließlich möchte ich Ihnen eine Option aus der letzten Kategorie zeigen, die die andere Kategorie ist. Ich werde nur einen externen Link hinzufügen. So können Sie einen Link zu etwas hinzufügen, das nicht auf Ihrer Website ist. Ich werde nur in setzen und Links zu sagen, finden Sie uns auf Google. Wenn ich hier reingehe, das örtliche Fitnessstudio, und lass uns das in einem neuen Fenster öffnen. Ich werde sparen auf, dass. Sie werden sehen, dass wir dieses externe Link-Symbol haben. Wir können die Links in unserer Navigation neu anordnen. Wir können die About Seite verschieben , um nicht zu verknüpfen, und daher wird es in keiner Navigation angezeigt. Aber im Grunde haben wir hier die drei Haupttypen , die uns jetzt in unserer Vorlage zur Verfügung stehen, die diese grundlegenden dynamischen Seiten mit dem Page Builder sind, die Sammlung, sagen in diesem Fall ein Blog und ein externer Link. Offensichtlich haben wir auch eine Titelseite. Aber du kannst damit herumspielen, wenn du willst. Eine Sache, die ich vergessen habe, tatsächlich zu tun, ist, in unseren Designbereich zu gehen und den Titel der Website zu aktualisieren. Also anstelle von Your Site Title, werde ich es Your Local Gym nennen. Der Slogan kommen Sie uns besuchen. Es ist nicht wirklich relevant. Aber jetzt wird es zu aktualisieren, wo immer wir in den Website-Titel ziehen, es wird in Ihrem lokalen Fitnessstudio ziehen. Cool. Es gibt also mehr Funktionen und wir werden darauf eingehen, wie wir unsere Vorlage hier erstellen. Aber das sind die Kernkonzepte. Sie erstellen im Grunde nur Seiten in diesem Seitenteil hier. Sie können wählen, ob Sie diese entweder in eine Navigation einfügen oder sie in den Abschnitt „Nicht Link“ einfügen möchten. Wir können hier tatsächlich einige Optionen aufbauen. Wir können unsere eigenen Kollektionen erstellen. Wir können auch statische Seiten erstellen, die ich Ihnen zeigen werde, wie es geht. Wir können tatsächlich haben, was man Ordner und Indizes nennt, die es uns ermöglichen, bei der Navigation zu verschachteln. Das ist alles in dieser Klasse, aber das sind die Grundlagen von Squarespace. Es gibt nicht wirklich viel anderes in Bezug auf die Struktur. Sie bauen nur verschiedene Seiten und Sammlungen. Ihre Vorlage bestimmt, wie das aussieht, wenn Sie es tatsächlich auf Ihrer Website anzeigen. Alles klar, cool. Also im nächsten Video werden wir tatsächlich mit der Bearbeitung unserer Vorlage beginnen und wir werden den Entwicklermodus aktivieren. Also sehe ich dich in diesem Video. 5. So bearbeitest du deine Squarespace-Vorlage: In dieser Lektion werden wir endlich diesen Squarespace-Entwicklermodus vorstellen und über die zwei Möglichkeiten sprechen, wie Sie Ihre Vorlage aktualisieren können. Ich möchte, dass Sie hier zum Einstellungsbereich gehen und zu Erweitert gehen und dann zum Entwicklermodus gehen. Wenn wir hier auf diesen Schalter klicken, wird mit einer Warnung konfrontiert werden und dann klicken wir auf Weiter und plötzlich wird unsere Entwickler-Modus aktivieren. Wenn wir zu den Konnektivitätsdetails scrollen, können wir alle Details sehen, die wir benötigen, um sich mit unserer Squarespace-Website zu verbinden und die Vorlage tatsächlich zu bearbeiten. Sie haben den Benutzernamen und das Passwort, das Ihrem Squarespace-Konto, Benutzernamen und Passwort entspricht , also gibt es keine neuen Informationen. Aber hier haben wir den SFTP-Hostnamen und Port und wir haben ein Git-Repository. Der SFTP-Hostname wird, soweit ich weiß, immer dev.squarespace.com sein. Der Port, den ich denke, ändert sich auch nicht wirklich und die Git-Repository-Adresse, wird dies die Entwicklungsadresse Ihres Stores mit template.git am Ende sein. Dies kann sich ändern, aber im Moment funktioniert es so. Wie Sie hier sehen können, ist dies die Entwicklungsadresse meines Stores und das Git-Repository setzt nur als template.git darauf. Nun, die Art und Weise, wie wir es in dieser Klasse tun und die Art, wie ich empfehle, ist die Verwendung von Git. Der Grund dafür liegt darin, dass Sie den Code lokal herunterladen und auf Ihrem eigenen Computer bearbeiten können. Sie können es mit SFTP tun, was wir in nur einer Sekunde sehen werden. Aber dann bearbeiten Sie einzelne Dateien und warten darauf, dass sie hochgeladen werden. Während Sie mit Git einen lokalen Server ausführen, Änderungen vornehmen, ihn auf dem lokalen Server ausführen können , und wenn Sie bereit sind, können Sie diese Änderungen auf Ihre Squarespace-Website übertragen. Push ist ein bisschen Git-Terminologie. Nicht sicher, ob Sie mit Git vertraut sind, aber es ist eine sehr wichtige Fähigkeit zu lernen, wenn Sie Web-Entwicklung machen. Also hoffentlich alles über Git wissen. Wenn nicht, werden wir einige grundlegende Git abdecken. Es wird nicht zu schwer werden. Aber bevor wir in Git kommen, was ich Ihnen zeigen möchte, ist SFTP, und dies ermöglicht es uns, die Dateien direkt auf der Website zu bearbeiten. SFTP steht für sicheres Dateiübertragungsprotokoll. Sie können mit FTP vertraut sein, wenn Sie zuvor eine andere Website bearbeitet haben, ich habe meine WordPress-Website durch eine Verbindung über FTP bearbeitet, und das ermöglicht es mir, die Vorlagen direkt zu bearbeiten. Es ist ein ähnliches Konzept. Was wir tun müssen, ist ein FTP-Client zu installieren. Die, die ich installiert habe, ist Cyberduck, aber es gibt andere, die Sie verwenden können, wie FileZilla, es gibt wahrscheinlich einen ganzen Haufen von ihnen da draußen. Aber für diese Klasse, was ich verwenden werde, ist Cyberduck. Wenn Sie genau mitverfolgen wollen, wie ich es mache, können Sie Cyberduck auch herunterladen. Es ist völlig kostenlos. Lassen Sie mich einfach nachschlagen für Sie jetzt Cyberduck, es sollte wirklich als erste Option kommen. Da gehst du. Der erste, wenn Sie nach ihm auf Google suchen, in Ordnung. Ich habe es bereits installiert, also was ich tun werde, ist Cyberduck zu öffnen, und lass uns einen neuen Browser öffnen. Ich werde auf „Verbindung öffnen“ klicken. Hier oben wollen wir Dateiübertragungsprotokoll ändern, um Dateiübertragungsprotokoll oder SSH-Dateiübertragungsprotokoll zu sichern. Für den Server müssen wir den Hostnamen eingeben. Es ist dev.squarespace.com und der Port ist, was hier geschrieben wird, 2030. Dann für den Benutzernamen, es sagt es schon dort, es ist nur Ihr Squarespace-Benutzername , der höchstwahrscheinlich eine E-Mail-Adresse sein wird, und dann für das Passwort habe ich in meiner Passwort-Verwaltung gespeichert, eingefügt in dort. Und lass uns treffen, ich werde keinen Schlüsselanhänger hinzufügen und lass uns „Verbinden“ drücken. Es könnte mit ein paar Fehlern wie unbekannter Fingerabdruck kommen. Nicht unbedingt Fehler, sondern mehr Warnungen. Sie können einfach auf Zulassen klicken. Im Moment versucht es sich anzumelden. Es ist erfolgreich eingeloggt. Hier sehen Sie, dass es bei meinem Squarespace-Server angemeldet ist. Nun, wie Sie hier sehen können, gibt es hier eine Sammlung von drei verschiedenen Ordnern, weil ich jetzt drei Websites im Entwicklermodus betreibe, ich habe die Ordner für jeden von ihnen. Schauen wir uns an, was es sonst noch ist. Es ist Dahlien-Lime-sh9g, das ist das erste hier. Ich werde doppelklicken, um mich darauf zu konzentrieren. Sie können dies direkt hier sehen ist unsere Vorlage. Nun, um die Bearbeitung Ihrer Vorlage mit SFTP zu demonstrieren, was ich tun werde, ist eine einfache Änderung, die eine Funktion hinzufügen wird, die wir heute in der Klasse verwenden werden und das ist, Fotos zu erlauben. Um Fotos zuzulassen, öffne ich hier den Sammlungsordner. Was ich tun muss, ist eine neue Datei namens folders.conf zu erstellen und sie direkt hier in diese Sammlung hochzuladen. Wenn ich eine vorhandene Datei bearbeiten sollte, kann ich einfach mit der rechten Maustaste auf die Datei klicken und mit meinem Lieblings-Code-Editor bearbeiten. Ich benutze Atom gerne, um einzelne Dateien zu bearbeiten und zum Beispiel zu sagen, ich wollte eine Bearbeitung vornehmen, ich könnte meine Bearbeitung auf „Speichern“ setzen und es wird automatisch auf den Server direkt hier hochgeladen. Sehr cool. Aber weil wir eine neue Datei erstellen, werde ich Atom wieder öffnen. Lassen Sie uns diese Ordners.config erstellen. Jetzt erwarte ich nicht, dass Sie wissen, wie das geht, also lassen Sie uns tatsächlich nachschlagen und die Anweisungen in der Squarespace-Dokumentation finden. SquareSpaceFoldres.conf, hoffentlich funktioniert das. Wenn wir hier auf diesen ersten Link klicken, können Sie hier Ordnerkonfiguration sehen, um Ordner auf Ihrer Website hinzuzufügen, erstellen Sie eine Datei folders.com in Ihrem Sammlungsordner. Die Standardeinstellungen für eine Ordner.com-Datei sind unten aufgeführt. Einfach. Ich werde das packen, ich werde das jetzt in unsere unbenannte Datei einfügen. Ich möchte nicht, dass es mein Ordner genannt wird. Ich werde es nur Ordner nennen und ich werde „Speichern“ drücken. Sie können das überall speichern. Ich werde es nur auf meinem Desktop speichern. Natürlich muss es folders.conf genannt werden. Drücken Sie „Speichern“ darauf. Jetzt werde ich eher ein Browserfenster oder ein Finder-Fenster öffnen, navigieren Sie zum Desktop, wo ich diese Folders.config-Datei abgelegt habe, gehen Sie zu Cyberduck und ziehen Sie dies hinein. Jetzt können Sie sehen, dass es hochgeladen wird. Es warnt mich vor dem unbekannten Fingerabdruck. Ich werde auf erlauben und kein großes Risiko dort klicken. Jetzt ist es hochgeladen. Um zu sehen, ob das jetzt tatsächlich funktioniert, gehe ich zurück auf meine Squarespace-Website. Eigentlich müssen Sie die Seite aktualisieren, um sicherzustellen, dass die neuesten Änderungen übernommen werden. Jetzt, wenn ich auf Seiten gehe und auf dieses Plus hier klicke, werden Sie sehen, dass der Ordner unten unten hier erschienen ist. Indem ich diese Datei folders.com zu unserem Sammlungsordner hinzufüge, habe ich tatsächlich meinen Administrator innerhalb der neuen Option aktualisiert. Das habe ich früher mit dem gemeint, was ich über das Hinzufügen von Features zu Ihrer Vorlage durch die Verwendung von Code gesagt habe . Indem wir diese COM-Datei hinzufügen, fügen wir unserem Admin tatsächlich eine neue Funktion hinzu. Ich kann jetzt auf „Ordner“ klicken. Was mir das erlaubt, wird das keine permanente Veränderung sein, aber ich kann Dinge verschachteln. Ich habe einen neuen Ordner. Leider unterstützt unsere Vorlage derzeit keine Dropdown-Menüs, aber wie Sie hier sehen können, ist es zumindest im Admin verschachtelt und wir werden sehen, wie das in nur einer Sekunde funktioniert. Aber das ist ein perfektes Beispiel für das Hinzufügen von etwas zu unserer Squarespace-Website mit SFTP. Es wird sofort passieren, weil dies der eigentliche Code ist , der jetzt auf unserer Vorlage läuft. Aber so cool das ist, ich empfehle Ihnen nicht, SFTP zu verwenden , wenn Sie viele Änderungen an Ihrer Website vornehmen, was ich stattdessen empfehle, ist die Verwendung von Git. Ich werde Cyberduck schließen. Gehen wir zurück zu den Einstellungen, erweiterten Entwicklermodus. Was wir tun werden, ist dieses Repository zu klonen. Jetzt wird dies leider keine Klasse über Git sein. Also gehe ich entweder davon aus, dass Sie Kenntnisse von Git haben oder davon ausgehen, dass Sie, wenn Sie etwas nicht verstehen, das Sie hier sehen, nachschlagen und verstehen, was es bedeutet weil es von Wissen angenommen wird, dass Sie wissen, ein wenig von einem Git oder dem Sie immer noch folgen können, auch ohne genau zu wissen, was alle Befehle in Git sind. Aber im Grunde ist das Konzept hier, dass wir dieses Repository in unseren Computer klonen. Das heißt, wir nehmen nur den Code in diesem Repository und kopieren ihn auf unseren Computer. Ich werde diese Adresse kopieren. Was ich tun werde, ist meine Terminal-Anwendung zu öffnen. Öffnen Sie Ihre bevorzugte Befehlszeilenanwendung. Ich benutze iTerm. Die Standard-App auf einem Mac ist Terminal, und die App auf einem Windows-Computer, glaube ich, heißt Eingabeaufforderung. Aber Git sollte genau gleich funktionieren. Was ich tun werde, ist, dass ich in mein Code-Verzeichnis gehe. Hier können Sie es einfach auf Ihrem Desktop ausführen, wenn Sie möchten. Es liegt an dir. Aber für mich werde ich in meinen persönlichen Code-Ordner gehen, in aktuelle, und tatsächlich werde ich einen Blick dort werfen. Ich habe bereits eine Datei namens Vorlage. Also muss ich nur schnell in meinen Code-Ordner gehen und das umbenennen. Dies wirkt sich wahrscheinlich nicht auf Sie aus, nur diese Vorlage 1 aufrufen, denn wenn Sie klonen, wird es kalte Vorlage sein, wie es hier geschrieben wird. In Ordnung, so kann das jetzt klar werden. Was ich tun werde, ist Git Clone laufen. Git klonen, fügen Sie diese Adresse ein und drücken Sie dann „Enter“. Jetzt wird es sagen, Klonen in Vorlage. Es ist wichtig, Jungs, dass dies nicht funktionieren wird, es sei denn, Sie haben Git installiert. Stellen Sie also sicher, dass Sie einfach auf die Website für Git gehen. Wenn Sie es noch nicht haben und installieren, sollte es ziemlich einfach sein. Wie auch immer, zurück zur Lektion jetzt wird es uns nach dem Benutzernamen und Passwort fragen, und das ist gleich unserem Squarespace-Benutzernamen und Passwort. Das ist einfach. Verwenden Sie einfach den gleichen Prozess wie zuvor. Jetzt wird es nach dem Passwort fragen. Ich bin hier oben, meine Passwortverwaltung hat „Enter“ geklickt. Wenn der Zugriff nicht verweigert wird, wird es tatsächlich herunterladen. Was passieren wird, ist, dass wir jetzt tatsächlich in das Template-Verzeichnis wechseln können. Nun, was ich tun werde, ist meinen Lieblings-Code-Editor zu öffnen, sich jetzt geändert hat, verwende ich VS-Code. Ich werde das Terminal verlassen. Öffnen Sie den VS-Code. Sie müssen nicht genau die gleichen Code-Editoren verwenden, dass VS-Code ziemlich gut ist. Es hat ein früheres Projekt von mir geöffnet, aber was ich tun möchte, ist auf Öffnen zu klicken. Eigentlich lädt es die Vorlage weil sie den gleichen Namen hat wie der, den ich zuvor geladen habe. Aber nur um sicher zu sein, dass Sie auf „Vorlage“ klicken möchten. Jetzt sitzt der Vorlagencode lokal auf Ihrem Computer. Sie können dies so viel bearbeiten, wie Sie möchten, aber die Änderungen werden noch nicht live auf Ihre Website gehen. Ich habe gerade das Gefühl, dass dieses Video ein bisschen lang wird. Für den nächsten Teil, wo wir Squarespace Live-Server installieren und starten, werde ich das in das nächste Video zu trennen. Im nächsten Video werden wir tatsächlich einen lokalen Server betreiben, es uns ermöglicht , viele Teile unserer Squarespace-Website lokal zu betreiben. Es wird immer noch eine Verbindung zu Squarespace-Servern herstellen, um die Daten einzubinden. Aber wir können tatsächlich ausführen, welchen Code wir hier auf einem lokalen Server haben. Das wird im nächsten Video sein. Ich sehe dich in diesem. 6. Squarespace Live-Server: Im letzten Video haben wir unsere Squarespace-Vorlage auf unseren eigenen Computer heruntergeladen, und das ermöglicht es uns, sie in einem Code-Editor unserer Wahl zu öffnen und in die Ordner zu graben, auf verschiedene Dateien zu klicken und sie zu bearbeiten. Ich verwende natürlich Visual Studio Code, verwende natürlich Visual Studio Code, aber Sie können jede Codierungssoftware oder Codierungs-Editor verwenden, die Sie gerne verwenden. Es gibt einen Tipp, den ich Ihnen geben werde, ist, dass unabhängig davon, welchen Code-Editor Sie verwenden, Sie eine Erweiterung aktivieren sollten, die die Formatierung dieses Codes direkt hier ermöglicht, nämlich JSON-T. Wir werden später in dieser Klasse mehr über JSON-T erfahren. Aber wenn Sie VS Code verwenden, heißt die Erweiterung, die ich verwende, JSON-Template by stormwarning. Ohne dies wird die Hervorhebung der Syntax von JSON-T nicht geschehen. Es wird immer noch funktionieren, aber es wird nur schwieriger sein, damit zu arbeiten weil Sie diese schöne Farbcodierung nicht haben werden. Der Workflow zum Bearbeiten Ihrer Vorlage besteht darin dass Sie Ihre Änderungen hier lokal vornehmen, wie sie bekannt ist. Dann müssen Sie diesen Code festschreiben und ihn dann auf die eigentliche Squarespace-Website schieben. An diesem Punkt ist der Code, den Sie hier haben, der gleiche wie der Code, den Sie auf Ihrer Squarespace-Website haben. Nun, wenn wir keinen lokalen Server betreiben würden und wir Code mit git jedes Mal wir eine Änderung auf unserer Website sehen wollten, die ziemlich ermüdend werden würde , und wir könnten genauso gut SFTP verwenden, was wir sahen in der letzten Lektion. Was ich stattdessen vorschlage, ist, dass wir einen lokalen Server verwenden, und einer wird uns von Squarespace namens Squarespace Live Server zur Verfügung gestellt. Ein großer Haftungsausschluss, bevor wir in Squarespace Live Server gelangen, ist es nicht so gut von Squarespace gepflegt. Ich werde Ihnen eine E-Mail in einer Sekunde zeigen, wo ich Squarespace Live Server installiert habe. Es funktionierte nicht und ich habe tatsächlich den Support kontaktiert und sie gaben zu, dass es einen bestimmten Bereich gibt , den ich neu installieren musste, der standardmäßig nicht korrekt installiert wurde. Bestätigen Sie hier, dass es Probleme mit der Ausführung von Squarespace Live Server geben kann, und das liegt an Squarespace, ob sie die korrekteste und aktuellste Version auf GitHub und auf ihrer eigenen Website veröffentlichen möchten . Aber was ich sagen werde, ist, wenn Sie irgendwelche Probleme hier mit Squarespace Live Server haben, würde ich definitiv zuerst den Squarespace-Support kontaktieren, bevor ich in die Kommentare eintauche. Es sei denn, es ist etwas Bestimmtes, das ich getan habe, worüber du dich fragst. Aber wenn sich Squarespace Live Server in der Zukunft ändert, was es wahrscheinlich tun wird, und es einen Fehler bekommt, den Sie in dieser Klasse nicht sehen, dann ist es wahrscheinlich am besten für Sie, zu Squarespace zu fragen, was ist los? Genau wie das, was ich getan habe. In Ordnung, also wenn das aus dem Weg ist, müssen wir sicherstellen, dass wir etwas namens npm installiert haben. Ich werde ein Browserfenster öffnen und ich werde npm eingeben. Npm steht für Node Paketmanager. Es ist eine Software, die es uns erlaubt, Pakete im Grunde zu installieren. Sie müssen nicht unbedingt alles darüber wissen, was ein Paket ist, aber Sie müssen npm installiert haben, um Squarespace Live Server ausführen zu können. Ich habe bereits npm installiert und wenn Sie es nicht tun, bin ich mir sicher, dass es ziemlich einfach ist. Gehen wir zur Dokumentation. Ich bin sicher, wenn Sie in die ersten Schritte gehen, nicht die benutzerfreundliche Website, aber wenn wir zu Google gehen, installieren npm, dann können Sie sehen, bekommen npm ist die Adresse, die Sie suchen, in Ordnung. Sie können Node.js und dann npm herunterladen und alle diese Anweisungen befolgen, um sicherzustellen, dass npm installiert ist. Ich habe schon npm installiert, wie ich schon sagte. Im Moment werde ich ein Terminal öffnen , weil ich meinen Code-Editor bereits geöffnet habe. Ich werde das Terminal in meinem Code-Editor öffnen und auf diese Weise ist es bereits auf das richtige Verzeichnis eingestellt. Jetzt werde ich den Befehl ausführen, um den Squarespace Live Server zu installieren, der npm install -g @squarespace /server ist. Woher weiß ich nun, dass dies der richtige Befehl ist? Nun, ich habe das aus der offiziellen Squarespace-Dokumentation. Dies ist freibleibend. Ich empfehle, dass, wenn Sie an dieser Stelle verloren gehen, zu developers.squarespace gehen und die Seite im Moment lokale Entwicklung ist und wie Sie hier für die Installation des Dev-Servers sehen können, ist dies der Befehl. Das werden wir treffen. Ich habe es bereits installiert. Aber das ist, was Sie tun müssen, wenn Sie es nicht bereits installiert haben. Wir müssen die Nutzungsbedingungen des Entwicklers akzeptieren. Ich habe dieses Dokument bereits gelesen, also werde ich die Eingabetaste drücken und dann Ja drücken. Es wird ein wenig Zeit dauern, um kompatible JRE zu installieren und zu bündeln. Du musst nicht wissen, was das bedeutet. Es dauert nur einige Zeit, um zu installieren. Ich muss nur geduldig sein und sobald es installiert ist, wird es hoffentlich funktionieren. Da gehst du. Der Grund, warum ich sage, dass es hoffentlich funktionieren wird, ist, dass ich es früher ausgeführt habe und es nicht funktionierte und ich musste mich tatsächlich an den Squarespace-Support wenden. Ich werde dir jetzt nur die E-Mail zeigen. Wenn ich in diese Support-E-Mail gehe, sehen Sie, dass ein Problem aufgetreten ist und das Engineering-Team eine Korrektur für den lokalen Entwicklungsservercode anwenden musste . Sie haben mich gerade gebeten, die Installation erneut mit der neuesten Version auszuführen. Der Grund, warum ich Ihnen dies zeige, ist, dass dies Änderungen unterliegen und dies hängt davon ab wie Squarespace das Projekt beibehalten möchte. Wenn Sie Probleme haben, müssen Sie sich möglicherweise an den Support wenden. Ich fand sie sehr ansprechbar. Sie waren in der Lage, mir zu helfen und sie haben das Problem offensichtlich ziemlich schnell behoben. Wenn Sie danach irgendwelche Fehler erhalten, empfehlen Sie definitiv, sich an den Squarespace-Support zu wenden. In Ordnung, wenn das aus dem Weg ist, können wir tatsächlich anfangen, unseren Squarespace-Server zu betreiben. Die Art und Weise, wie wir das tun, ist, dass wir Squarespace-server eingeben. Dann setzen wir unsere Website-Adresse danach. Ich habe es momentan geschlossen. Aber wenn ich zurück zu account.squarespace.com gehe, finde diese Website, können Sie sehen, dass das die Website-Adresse ist. Ich werde das kopieren, das direkt nach dem Squarespace-Server setzen und danach möchten Sie das Flag - -auth verwenden, und das wird Sie davon abhalten, Fehler mit Erlaubnis verweigert zu bekommen. In Ordnung, also schlagen Sie das. Jetzt werden Sie möglicherweise erneut nach Ihrem Benutzernamen und Passwort gefragt, in diesem Fall geben Sie es einfach ein. Aber für mich bin ich bereits eingeloggt und was es sagt, ist, dass es auf Port 9.000 hört. Das bedeutet, dass wir zu unserem Browser gehen können, eine neue Registerkarte oder ein neues Fenster öffnen und localhost ausführen: 9000. Es ist nur localhost: gefolgt von der Portnummer, die normalerweise 9.000 ist. Jetzt, wenn Sie das erste Mal starten, nimmt Squarespace Live Server normalerweise ein wenig Zeit, um loszugehen. Wieder, wir müssen hier etwas Geduld haben. Sie werden nach einer Zeit sehen, die wir jetzt unsere Website laufen, aber auf unserem eigenen Computer, was ziemlich cool ist. Wenn ich auf Blog klicke, sehen Sie, dass wir die Blog-Seite haben und dann können wir auf die einzelnen Blog-Beiträge klicken, klicken Sie auf Über uns Seite. Der externe Link sollte funktionieren. Wir haben die Website direkt hier auf unserem Computer. Jetzt ist es wichtig, hier zu beachten, dass, wenn Sie Änderungen an Ihrem Administrator vornehmen möchten, Sie definitiv Ihren Code verschieben müssen. Dieser Live-Server wird aktualisiert, sobald wir einen Code in diesem Ordner direkt hier bearbeiten. Wie Sie sehen können, greift es auf alle Dateien zu. Wenn wir etwas ändern würden, würde es sofort auftauchen. Aber wenn wir etwas auf unserem Admin ändern wollen. Genau hier, zum Beispiel, wo wir die Möglichkeit hinzugefügt haben, Ordner zu haben, müssen wir diesen Code schieben. In Ordnung. Wir werden sehen, wie das in einem späteren Video funktioniert. Aber im Moment haben Sie Ihren Squarespace Live Server laufen und Sie können Änderungen am Vorlagencode vornehmen, der größtenteils sofort auf dieser lokalen Version betroffen ist. Wieder, wie ich schon sagte, wenn Sie möchten, dass es zu dieser Version geht, die auf der tatsächlichen Squarespace-Website ist , müssen Sie drücken, was wir später bekommen. Aber wenn ich zum Beispiel den Ort hier ändern wollte, an dem der Titel etwas ganz anderes ist. Wir kommen in nur einer Sekunde dahin, wo alles sitzt. Aber zum Beispiel hier, wo der Website-Titel ist, wenn ich das in nur Site-Titel ändern, drücken Sie Speichern auf, dass, und dann aktualisiert meine Website hier drüben, können Sie sehen, es aktualisiert sofort. Aber hier oben auf dem eigentlichen Squarespace-Server haben Sie nichts geändert, bis Sie diesen Code drücken, was bedeutet, dass Sie ihn auf Squarespace hochladen. In Ordnung, also werde ich das wieder in das dynamische Feld ändern. Das wird es für diese Lektion sein. In der nächsten Lektion werden wir eigentlich über die wichtigsten Konzepte der Template-Entwicklung sprechen , weil wir konzeptionell verstehen müssen , wie alles funktioniert, bevor Sie tatsächlich dort eingraben und Code bearbeiten können. Ich freue mich darauf. Ich werde Sie im nächsten Video sehen. 7. Vorlagenstruktur und die JSON Datei-Ebene: In diesem Video werden wir über die Template-Struktur sprechen, und wenn wir Zeit haben, werden wir über das andere Konzept sprechen, das wir für die Template-Entwicklung verstehen müssen, einschließlich Jason Tochter und Jason T. Ich habe meine Website oder meine Vorlage läuft bei localhost: 9000 mit dem Befehl, den wir zuvor gesehen haben, squarespace-server, gefolgt von Ihrer Website-Adresse, dann dash, dash auth. In einem anderen Browser habe ich dieses Diagramm. Was Sie hier sehen, ist ein konzeptionelles Diagramm, das ich vorbereitet habe, das erklärt, wie die Vorlage eingerichtet ist. Also ohne weiteres werde ich direkt reinspringen. Ganz oben haben Sie also Ihre Vorlage, die durch die Datei template.conf konfiguriert wird. Also, wenn wir hier wieder in unseren Ordner gehen, können wir diese Datei hier sehen, template.conf es ist eine Konfigurationsdatei, die im Herzen Ihrer Vorlage sitzt. Es gibt den Namen der Vorlage, es stellt dem Autor zur Verfügung, und wir können Layouts, Navigationen und auch die Stylesheets definieren , damit wir sie laden wollen. Wenn wir zurück zum Diagramm gehen, können Sie sehen, dass diese template.conf-Datei ist, wo Sie Layouts und Navigationen definieren. Wenn ich also zum Code zurückgehe, können Sie sehen, dass wir hier ein Objekt für Layouts haben, und wir haben ein Objekt oder ein Array mit einem Objekt für Navigationen. Wenn ich hier zurück zu Layouts gehe, sehen Sie, dass Layouts direkt mit Regionen verknüpft sind. Also hier in Layouts haben wir ein Standardlayout zu finden. Es wird nur Standard genannt, und die Regionen, die es verwendet, sind nur eine und es ist die Datei site.region. Auf einer einfachen Website gibt es also nur eine site.region-Datei, und das ist das Layout. Grundsätzlich gibt es eine Eins-zu-Eins-Beziehung zwischen diesem und dem Layout. Aber wie Sie in einem späteren Video sehen werden, können wir unsere Regionsdateien trennen und ein Layout erstellen, das mehrere Regionsdateien kombiniert hat, und das wird viel mehr Sinn machen, wenn wir in einem späteren Video darauf zugreifen. ist dieses Array von Navigationen. Wie Sie auf unserer Website sehen können, haben wir diesen Navigationsblock hier, wir in unserem Code als Website-Navigation mit dem Namen innerhalb des Codes der Website nav sehen können . Wir können tatsächlich Navigationen zu unserer Vorlage hinzufügen, indem wir zu diesem Array direkt hier hinzufügen. Also wollen wir das vielleicht öffnen und eine andere Navigation für, ich weiß nicht, sekundäre Navigation vielleicht einwerfen . Da gehst du. Wir werden das in dieser Klasse nicht wirklich tun, also werde ich das entfernen. Aber theoretisch können wir so viele Navigationen haben, wie wir wollen, ich bin mir nicht sicher, ob es eine Grenze für sie gibt, aber wir können definitiv mehr als eine haben. Gleiches gilt für Layouts, wir können so viele Layouts erstellen, wie wir wollen, und wir können Regionsdateien kombinieren, um diese Layouts zu erstellen. also auf das Diagramm für diese Struktur zurückgehen, können Sie hier sehen, dass Regionen die Layouts bilden und ein Block direkt mit einer Navigation verknüpft ist. Also, wenn wir zurück zu unserem Code gehen hier, in diesem Block Ordner, können wir diese site-navigation.block sehen. Dies ist, was den Code für unsere Website-Navigation bestimmt. Also genau hier bestimmt das genau hier, diese Navigationselemente und wie sie funktionieren, wird genau hier definiert. Die Sache, die tatsächlich die Navigation verknüpft, werden wir später in dieser Klasse näher eingehen. Aber wir können die Navigation tatsächlich mit dem Namen des nav verknüpfen, wie es in der template.conf-Datei gesetzt ist , indem wir dieses Squarespace-Navigations-Tag verwenden. Wenn wir also dieses Tag verwenden, bringen wir diesen spezifischen Block ein. Wie ich schon erwähnt habe, werden wir das schon bald in der Praxis sehen. Aber genau als eine hohe konzeptionelle Übersicht sprechen wir darüber, wie die Struktur alle zusammen arbeitet, um die Vorlage zu erzeugen . Die andere Sache, die ich hier geschrieben habe, ist, dass Blöcke auch Partials sein können, und Partials sind nur Snippets von wiederverwendbarem Code. Wenn Sie jemals den gleichen Code schreiben und ihn in mehrere Teile Ihrer Vorlage einfügen, dann möchten Sie einen Block verwenden, den Code einmal innerhalb dieses Blocks schreiben und dann einfach einen Verweis auf , um diesen Code überall dort einzubringen, wo Sie ihn brauchen. Für mich persönlich habe ich nicht viele Situationen gefunden, in denen ich eine partielle verwenden muss, also weiß ich nicht, ob es ein Beispiel speziell in dieser Klasse gibt, aber ich werde einen Link zur Dokumentation zur Verwendung bereitstellen. Eigentlich ist es ganz einfach. Wie Sie sehen können, führen Blöcke in Regionen, denn wie ich Ihnen bereits gezeigt habe, müssen wir den Block irgendwie in unsere Regionsdatei bringen, und mit der Navigation ist es so. Bei Partials ist es ein anderes Tag. Aber im Wesentlichen verwenden wir immer die Regionsdatei oder vielleicht die Listen- oder Elementdatei, die wir in nur einer Sekunde betrachten werden, wir verwenden sie, um diese Blöcke einzubringen. Blöcke selbst werden also nirgends angezeigt, sie müssen sich in einer Regionsdatei oder in einem Sammlungselement oder einer Listendatei befinden. zurück zum Diagramm gehen, sehen Sie Regionen hier Link zu dieser Wolke, die squarespace.main-content ist. Der Grund, warum dies eine Cloud ist, liegt darin, dass es sich nicht um eine bestimmte Datei handelt, sondern nur um ein Attribut für das Squarespace-Objekt, das wir in nur einer Sekunde sehen werden, die den Inhalt der Seite anzeigt. Also, wenn wir in unsere Datei site.region gehen und ich suche squarespace.main-content, die hier ist, können Sie sehen, dass hier der Hauptinhalt der Seite geladen wird. Nun wird viel Zeit, dass der Hauptinhalt, wie hier geschrieben, durch den Inhalt einer regulären Squarespace-Seite bestimmt. Oder wie es im Code hier steht, ist es der CMS-Inhalt. So wie wir zuvor gesehen haben, als wir den Page Builder zum Konstruieren benutzten, sagen wir zum Beispiel die über Seite und wir haben Blöcke hinzugefügt und die Schnittstelle verwendet, um dieses Bild zu ändern, all dies hier, ist der Hauptinhalt das kommt durch. Wie Sie sehen können, egal auf welcher Seite wir sind, wir immer noch den ganzen anderen Code, der ihn umgibt. Aber der Code in squarespace.main-content ist der Inhalt der Seite, die sich ändert. Wieder werden wir das alles in der Praxis sehen, sehr bald, aber nur ein hohes konzeptionelles Verständnis, Sie müssen vielleicht zurück zum Diagramm gehen, während Sie in dieser Klasse gehen, und das ist cool, aber das ist die übergeordnete Theorie hinter der Vorlage. Wenn Sie eine normale Squarespace-Seite wie diese erstellt haben und Seiteninhalte mit dem Admin eingefügt haben, dann ist squarespace.main Inhalt nur dieser Inhalt. Wenn Sie jedoch eine so genannte statische Seite eingerichtet haben, bei der es eine Seite handelt, die wir selbst in die Vorlage schreiben, dann wird dieser Inhalt in diesem Objekt angezeigt, squarespace.main content. Wenn wir uns eine bestimmte Sammlung ansehen, werden wir entweder Systemstandardinhalte sehen, die von Squarespace stammen. Oder wenn wir den Sammlungscode selbst in unserer Vorlage definiert haben, dann wird der squarespace.main Inhalt die Listendatei angezeigt. Perfektes Beispiel, genau hier haben wir eine Sammlung definiert, die der Blog ist. Wenn wir auf der Blog-Listing-Seite sind, ist dies der Code, der angezeigt wird. Wenn wir auf unsere Website gehen und auf diesen Link für den Blog klicken, wird diese Seite hier durch den Code in dieser Datei bestimmt. Natürlich kommt dieser Code durch Squarespace.main Inhalt und dann hat er den ganzen anderen Code um ihn herum. Nur um das extra klare Jungs zu machen, werde ich dies im Browser inspizieren und Ihnen zeigen, dass wir diesen Container hier, Content-Container, in unserer Website-Region haben . Dort können Sie sehen, und alles darin ist der Code aus der Datei blog.list. Wenn Sie hier rüber zu blog.list gehen, können Sie Artikel-ID sehen. Es hat alle Artikel in dieser Item-Loop, für die Sie den Kommentar direkt dort sehen können. Die nächste Ebene nach unten ist der Gegenstand. Denken Sie daran, dass wir darüber gesprochen haben, wie eine Sammlung eine Liste von Elementen ist, und Sie können einen Blick auf die vollständige Liste der einzelnen Elemente werfen, während die Elementdatei der Code ist, der die einzelnen Elemente Seite ausmacht. Wenn wir hier in unseren Code gehen und uns blog.item ansehen, wird dies der Code sein, der in squarespace.main Inhalt geladen wird, wenn wir auf einem einzelnen Element sind. Wenn Sie auf fünf zuhause Übungen klicken, dieser Code direkt hier in diesem speziellen Haupt-Tag sein, wird dieser Code direkt hier in diesem speziellen Haupt-Tag sein,welcher Code wir hier einrichten. Das ist die Template-Struktur genau dort, es ist eigentlich ziemlich einfach, wenn Sie Ihren Kopf um sie herum haben. Offensichtlich ist das jetzt nur konzeptionell, und wenn Sie das tatsächlich anfangen, werden Sie dieses konzeptionelle Wissen festigen. Ich habe dieses Diagramm erst erstellt, nachdem ich etwas Template-Entwicklung durchgemacht habe. Es dauert einige Zeit, um dieses Konzept in Ihrem Kopf zu zementieren, also keine Sorge, wenn das alles im Moment etwas vage ist, werden wir heute in jede dieser verschiedenen Dateien in dieser Klasse eingehen. Aber das zweite Konzept, über das wir sprechen müssen, ist der JSON DataLayer und JSON-T. Auf die Gefahr, dass diese Lektion ein bisschen zu lange dauert, werde ich über JSON-T sprechen, die die Vorlagensprache von Squarespace-Vorlagen ist. Jetzt gibt es auf jeder Seite Ihrer Squarespace-Website einen JSON DataLayer, der vorhanden ist. JSON ist nur eine einfache Möglichkeit, eine Datenstruktur darzustellen Sie müssen keine allzu große Angst davor haben, was JSON ist, wenn Sie damit nicht bereits vertraut sind. Aber auf jeder Seite auf unserer Website, was wir tun können, ist ein Fragezeichen hinzufügen, und dann schreiben format=json-pretty, und wir werden diese Seite in JSON-Form sehen. So funktioniert JSON, es gibt nur ein übergeordnetes Objekt, und dann gehen wir hinein und graben in diese untergeordneten Objekte ein. Dann haben wir in ihnen verschiedene Attribute und mehr verschachtelte Objekte, Arrays, alle möglichen Dinge. Hier finden Sie alle Daten, die uns auf dieser bestimmten Seite zur Verfügung stehen. Auf jeder Seite finden Sie, dass wir ein Website-Objekt haben, so dass wir auf den Website-Titel unserer Website von jeder Seite aus zugreifen können. Wir können Dinge wie, die Website Slogan zugreifen, können wir verschiedene Teile unserer Website-Einstellungen zugreifen. Wir können uns das Konto ansehen, das derzeit angemeldet ist. Die Daten für die einzelne Seite befinden sich in diesem Auflistungsobjekt. Ich weiß, dass es irgendwie verwirrend ist, da diese Homepage, die wir betrachten, nicht tatsächlich eine Sammlung selbst ist, sondern jede Seite, die Daten für spezifische Seite in Squarespace sind in diesem Sammlungsobjekt enthalten. Wie Sie sehen können, ist der Titel dieses Sammlungsobjekts Willkommen, die unsere Willkommensseite ist. Sie können sehen, ob es Tags oder Kategorien auf dieser Seite hat. Der Regionsname, den wir verwenden, was ich glaube, ist das Layout, die Typbezeichnung, alle Arten von Daten, die sich auf diese spezifische Seite beziehen. Nun, wie wir später sehen werden, gibt es auch eine Daten, die im Kontext eines Blocks verfügbar werden und die es uns ermöglichen, Elemente unserer Navigation abzuziehen. Aber vorerst ist dies das Hauptkonzept, ist, dass wir diese Datenschicht auf jeder Seite sitzen, egal zu welcher Seite wir auf unserer Website gehen. Vielleicht gehe ich auf die Blog-Seite, Sie werden sehen, wie es auf dem Frontend aussieht, aber hinter jeder Seite auf Ihrer Squarespace-Website gibt es JSON-Daten, die sich auf diese Seite beziehen. Viele dieser Objekte werden die gleichen Informationen haben , wie sie auf jeder Seite wie Ihrer Website tun, das wird sich nicht ändern. Aber dann ist das Sammlungsobjekt genau hier das, was sich ändern wird, je nachdem, auf welcher Seite Sie sich befinden. Wir haben den Titel, wir haben die Anzahl der Elemente in dieser Sammlung, und wie Sie sehen können, sind alle Tags, die wir hinzugefügt haben, in diesem Array hier und alle Kategorien innerhalb des Blogs sind hier aufgelistet, in diesem -Array. Was ich hier bekomme, ist, dass alle Daten, die Sie dynamisch auf Ihrer Seite anzeigen möchten, von dieser JSON-Datenschicht stammen. Wie Sie hier sehen können, haben wir tatsächlich die einzelnen Artikel für den Blog. Die Art und Weise, wie wir die Daten von dieser JSON-Schicht tatsächlich nehmen und sie auf der Seite darstellen, ist über JSON-T. Ich werde hier einen neuen Browser öffnen, laden, developers.squarespace.com, Kopf zu Template-Dokumenten. Wie Sie hier sehen können, haben wir unter diesem Menü eine vollständige Reihe von Anweisungen zur Vorlagensprache. Es spricht darüber, was JSON-T ist und spricht über ein paar kleine Bits Terminologie. Ich denke, vielleicht haben wir in dieser Lektion bereits viel behandelt. Ich werde das in eine andere Lektion aufteilen. Lassen Sie uns im nächsten Video ausführlicher über JSON-T sprechen. 8. Übersicht über JSON-T: Im letzten Video haben wir über die Template-Struktur gelernt, und wir haben die JSON-Datenschicht eingeführt. Die Art und Weise, wie wir diese JSON-Daten tatsächlich auf die Seite bringen, erfolgt über JSON-T. Ich wollte dieses Konzept in eine andere Lektion aufteilen, weil mir klar wurde, dass es hier ein bisschen zu durchkommen gibt. Es gibt viele Dokumentation hier auf der Squarespace-Website, aber ich gebe auch für mich zu, dass es ein wenig Zeit und Übung gedauert hat, um meinen Kopf voll und ganz um diese Grundsprache zu gehen. Aber nachdem ich es in der Praxis benutzt und verstanden habe, wie es funktioniert, habe ich erkannt, dass es ziemlich einfach ist und hoffentlich wird diese Lektion Ihnen das auch ein wenig leichter zu verstehen machen. JSON-T ist eine leistungsstarke Vorlagensprache, die für die Kopplung mit einem JSON-Dataset entwickelt wurde. Das ist der Schlüsselsatz hier, er wurde entwickelt, um mit einem JSON-Dataset gekoppelt zu werden. Denken Sie daran, im letzten Video haben wir gesehen, wie jede Seite zu einem JSON-Dataset wird , wenn Sie Fragezeichenformat gleich JSON-pretty setzen. In der Tat, die Daten sind immer da sitzen auf dieser Seite, unabhängig davon, ob wir das in unseren Browser oder nicht, das ist nur, um die Daten in einem schönen Format anzuzeigen. Aber wenn wir auf irgendeiner Seite gehen und wir, das ist ein guter Bereich, gegen zu kommen. Manchmal erhalten Sie einen 500 internen Serverfehler, Sie müssen nur den Server neu starten und dann sollte es wieder funktionieren. Frustrierend, aber es scheint das Einzige zu sein, das es in diesem Stadium repariert. Jetzt heißt es, wenn ich auf Port 9.000 höre, werde ich es auffrischen. Nun, da wir unsere Website wieder zurück haben, was ich tun werde, ist, dass ich die JSON-Datenschicht jeder Seite in unsere JavaScript-Konsole mit Code, der hier bereitgestellt wird, einfügen werde . Wir können gehen, um JSON-Daten anzuzeigen, und wir können dies überall innerhalb einer bestimmten Datei werfen und wir werden das Objekt für den aktuellen Bereich in unserer JavaScript-Konsole protokollieren. werden wir in nur einer Sekunde sehen. Wenn wir wollen, dass es auf jeder Seite geschieht, können wir es in unsere Datei site.region einfügen, aber natürlich bedeutet das, dass die Datei site.region der Kontext sein wird. Es wird nur angezeigt, was für diese site.region im Umfang ist. Das macht vielleicht nicht viel Sinn. Aber wir werden in nur einer Sekunde sehen, wie das funktioniert. Ich werde es direkt hier nach dem Körper-Tag setzen, auf Speichern drauf. Lassen Sie uns die Seite aktualisieren und öffnen Sie unsere Konsole, und Sie können hier sehen, wir haben ein Objekt. Es ist das gleiche Objekt, das wir uns vorher angesehen haben, als wir im Format gleich JSON-Pretty eingegeben haben, aber jetzt können wir die Seite sehen und wir können das Objekt auch sehen. Wie Sie hier sehen können, zieht es die Elemente aus diesem Items Array. Hier sind alle Informationen, die es verwendet, und wir ziehen das mit JSON-T. Ich empfehle Ihnen, wenn Sie JSON-T schreiben, das Objekt perfekt in Ihrer Konsole so zu öffnen, und dann können Sie beginnen, durch das Objekt zu navigieren, um festzustellen, wie Sie das gewünschte Attribut tatsächlich ziehen von diesem Objekt entfernt. Die wichtigsten Konzepte, die mit JSON-T zu verstehen sind, wenn wir zur Dokumentation zurückkehren, ist, dass, wenn wir ein Objekt in JSON haben , das baz hallo hat und wir baz schreiben, wir werden hallo bekommen. Wenn wir den Schlüssel in unser Dokument einfügen, werden wir den Wert erhalten. Dies ist das, was in JSON ein Schlüsselwertpaar genannt wird. Werfen wir einen Blick auf unsere Seite hier und sehen ein Beispiel. Wie Sie hier sehen können, haben wir das öffnende body-Tag, und innerhalb der ID geben wir die Seiten-ID auf dem Squarespace-Objekt aus. Werfen wir einen Blick darauf, wie das unserem Objekt genau hier entspricht. Wenn ich das Objekt betrachte, scrollen Sie nach unten, Sie können sehen, dass es ein Squarespace-Objekt gibt. Wenn ich dieses quadratische Raumobjekt öffne, kann ich die Seiten-ID sehen. Dies hier bezieht sich auf diesen Wert genau hier, und wenn wir tatsächlich unseren HTML-Code jetzt sehen und überprüfen, können Sie sehen, dass der tatsächliche Wert im ID-Feld ist. Auf einer sehr einfachen Ebene können wir an der Spitze des Objekts beginnen, und dann können wir jedes Objekt innerhalb dieses Objekts anvisieren und dann mit der.notation können wir tiefer gehen. Wir können das Squarespace-Objekt nehmen und dann in die Seiten-ID gehen. Auch hier können Sie sehen, wir nehmen Seitenklassen des Squarespace-Objekts. Also Sie Squarespace-Seitenklassen, da gehst du. Wir können auch verwenden, was ein Abschnitt-Tag genannt wird. Ein Abschnitt-Tag ermöglicht es uns, einen bestimmten Bereich unseres JSON-Datensatzes zu vergrößern. Hier können Sie sehen, anstatt nur Website zu haben, haben wir das Tag mit einem.section gestartet, und wir müssen auch ein.end haben, um das Ende dieses Codeblocks zu signalisieren. Was das hier darstellt, ist das Objekt, auf das wir hineinzoomen werden. Also haben wir Abschnitt Website, wenn wir zurück zu unserem Datensatz gehen, denken Sie daran, dass wir vor dem Website-Objekt hier gesehen haben, also hier ist Website. Was wir im Grunde tun, ist, dass wir auf dieses bestimmte Objekt zoomen, und dann das „at“ -Symbol, das wir hier nicht gesehen haben, aber wir hier oben gesehen haben, wird auf Website gesetzt werden, weil wir in diesem Bereich sind. Wenn wir ein bestimmtes Attribut dieses Objekts nehmen möchten, müssen wir nicht mehr website.site-Titel schreiben , da wir bereits auf eine Website beschränkt sind. Dann können wir einfach auf jeden Schlüssel innerhalb dieses Objekts verweisen, ohne das Elternteil schreiben zu müssen. Erspart uns nur ein bisschen Umschreiben. Hier können Sie innerhalb des Website-Objekt sehen, wir suchen nach Website-Titel, scrollen Sie nach unten, dort können Sie Website-Titel sehen. Wir können diesen Abschnitt auch ganz entfernen und anstatt Abschnittscode zu haben, können wir tun, wie ich zuvor sagte. Wir können eigentlich nur für die spezifische Website-Titel hier, wir können einfach setzen website.site-Titel. Das sollte genauso gut funktionieren, was es tut. Ich werde dahin wechseln. Das sollte die Abschnitte erklären. Gehen wir zurück und schauen uns einen wiederholten Abschnitt an. Wenn wir einen Schlüssel mit einem Wert haben, der ein Array ist, dann können wir im Grunde alle Elemente und den Bereich zu diesem bestimmten Element mit Punkt wiederholten Abschnitt und dann den Objektnamen durchlaufen . Wie ich bereits erwähnt habe, verweist dies auf das Scoped in Objekt. Lassen Sie uns sehen, dass in Aktion direkt hier, indem Sie zu unserem Navigationsblock gehen. Da Navigation keine Seite an sich ist, müssen wir diesen Code nehmen,zur Site-Navigation gehen, zur Site-Navigation gehen, und sobald es in diesem wiederholten Abschnitt ist, genau hier nehmen wir die Navigationselemente und wir ziehen Daten von jedem einzelnen Artikel. Wenn ich hier ein Konsolenprotokoll machen sollte, werden wir jetzt die Daten für jedes einzelne Element sehen. Lass uns hier rüber erfrischen. Wie Sie sehen können, haben wir vier Menüpunkte, und deshalb haben wir vier Objekte, die angezeigt werden. Alle diese Objekte sollten ziemlich ähnlich sein, da sie alle Links sind. Wie Sie im Inneren sehen können, haben wir Attribute wie, ist es der aktive Link, ist es ein Ordner, und wir haben das Sammlungsobjekt, das uns alle Informationen wie diese gibt, ist eigentlich ein -Ordner-Link. Ich gehe zum zweiten. Hier können Sie sehen, dies ist der Link zum Blog. Wir haben den Titel des Links und dann, was am wichtigsten ist, wir haben tatsächlich die URL zum Blog, und das ist, was wir brauchen, um einen Link zu erstellen. Zurück zu hier, können Sie aus diesem Artikel sehen, wir sind Scoping in Sammlung und wir nehmen die vollständige URL und die Navigation Titel. Wieder, wir durchlaufen und löschen alle diese Objekte, wie Sie sehen können, und für jedes bestimmte Objekt in dieser Schleife gehen wir in die Sammlung, wir zoomen in diesen Kontext, und wir nehmen die Navigation Titel und die vollständige URL, wie Sie hier sehen können. Hier zoomen wir auch in einen anderen Teil des JSON-Kontextes, wir zoomen in externen Link. Wenn wir das endgültige Objekt öffnen, können Sie sehen, dass anstelle eines Auflistungsobjekts es einen externen Link hat. Dann ziehen wir daraus den Titel und die URL, wie Sie hier sehen können, URL und Titel. Es ist wichtig, hier auch zu beachten, dass der hier markierte Abschnitt es uns erlaubt, auf die Existenz dieses Objekts zu überprüfen. Hier können Sie sehen, dass dies im Wesentlichen sagt, wenn es ein Sammlungsobjekt gibt, nehmen Sie die vollständige URL und den Navigationstitel ab und fügen Sie es in diese HTML-Struktur ein. Wenn es keinen externen Link gibt, nehmen Sie diese Informationen und fügen Sie diese in einen Link ähnlich. Wie Sie hier sehen können, ist dies ein perfektes Beispiel. Es verwendet nicht tatsächlich die Daten aus dem neuen Fenster, weil das neue Fenster nur wahr oder falsch ist, genau hier. Aber es ist im Grunde gesagt, wenn neues Fenster wahr ist, dann werden wir einen Link in einem neuen Tab mit Ziel gleich Unterstrich leer öffnen. Abschnitt ermöglicht es uns, in einen bestimmten Kontext mit dem JSON-Objekt zu zoomen, aber es erlaubt uns auch zu überprüfen, ob ein Attribut oder ein Objekt innerhalb dieses Bereichs existiert. Wie Sie hier sehen können, ist dies ein weiteres Beispiel. Wenn aktiv wahr ist, dann werden wir diese Klasse auf dieses Listenelement setzen. Ich verstehe, dass dies ein wenig schwer sein könnte, um Ihren Kopf zuerst zu bekommen, aber wenn Sie sich durchziehen und tatsächlich anfangen, dies zu benutzen, beginnen Sie zu erkennen, dass diese JSON-T-Sprache nicht wirklich so komplex ist. Das sind eigentlich 80% bis 90% der gesamten Sprache. Es vergrößert nur Kreuzungen und zieht Daten des JSON-Objekts wie folgt. Wenn wir zurück zur Dokumentation gehen, gibt es noch einige andere Dinge zu beachten. Wenn wir auf Direktiven klicken, können Sie sehen, wir haben den Abschnitt, wiederholt Abschnitt. Wir können auch ein oder erstellen, das wie ein anderes ist. Wir können auf die Existenz des Artikels überprüfen. Wenn es existiert, haben wir das, aber wenn nicht, werden wir das auftauchen lassen. Sie können auch Alternativen haben, mit denen ziemlich cool ist. Wenn Sie etwas durchlaufen, können wir am Ende jeder Zeile etwas hinzufügen. Dann können wir auch unsere eigenen Variablen erstellen. Wenn wir uns das Leben einfach machen wollten, können wir bestimmte Attribute einer benutzerdefinierten Variablen zuweisen und sie verwenden. Ehrlich gesagt, ich benutze diese Funktion überhaupt nicht sehr, weil die Daten alle da sind. Es gibt nicht viele Möglichkeiten, Variablen in JSON-T zu manipulieren, aber das ist auch eine Option direkt dort. Wir können auch Kommentare hinzufügen, aber das ist nicht besonders wichtig. Die wichtigsten anderen Konzepte zu verstehen, ist dies, Prädikate. Diese Prädikate im Grunde nicht notwendigerweise Objekte in Ihrem JSON-Kontext, sondern spezielle Direktiven, die Squarespace Verfügung stellt, um die Existenz von Sachen zu überprüfen. Eine gemeinsame und eine, die wir in dieser Klasse sehen werden, ist das Ordnerprädikat. Das testet grundsätzlich, ob das Navigationselement ein Ordner ist. In der Situation hier, wo wir diesen ersten Link als Ordner haben, wollen wir ihn anders behandeln. Entschuldigung, ich muss hier auf diese klicken. Wir möchten dieses anders behandeln als die anderen Links, da es sich um einen Ordner handelt, es sich nicht um Links zu einer Seite handelt. Prädikate ermöglichen es uns zu überprüfen, ob der Kontext, in dem wir suchen, bestimmte Kriterien erfüllt, und wir werden das in nur einer Sekunde sehen. Wir haben auch dieses Ding namens JSON-T-Formatierer, und wir haben es bereits jetzt gesehen, indem wir das Objekt nehmen und es zu etwas machen, das JSON hübsch ist. Wenn ich das entferne, frage ich mich, ob mein Browser das Objekt immer noch gut zeigt. Wenn wir die Seite hier aktualisieren, werden Sie sehen, dass mein Browser das immer noch als JSON erkennt und es auf eine schöne Weise formatiert. Aber wenn wir das Objekt nur hier genommen haben und überhaupt kein Format verwendet haben, werden Sie hier sehen, dass es überhaupt nicht exportiert wird. Wir nehmen die Objektdaten und wir müssen sie in ein menschlich lesbares JSON-Format formatieren, damit wir es sehen können. Das ist ein Beispiel für einen Formatierer. Es gibt nicht zu viele Beispiele. Ich glaube nicht, dass das in dieser Klasse passieren wird. Aber wenn Sie es sehen, bearbeiten Sie vielleicht eine vorhandene Vorlage und Sie sehen, dass es dieses Pipe-Symbol und dann ein Schlüsselwort danach gibt. Beachten Sie, dass es tatsächlich nimmt, was auf der linken Seite der Pipe ist und es in irgendeiner Weise formatiert. Zum Beispiel existiert dieses Beispiel wahrscheinlich in unserer Codebasis. Wenn wir in ein Blog-Element gehen, können Sie sehen, hier haben wir das hinzugefügte Objekt und wir formatieren, dass in einer bestimmten Weise, genau hier mit diesem Datum JSON-T-Formatierer. Sie sind nützlich. Davon abgesehen, es gibt nicht zu viele von ihnen. Sie gehen einfach zur Dokumentation, um sich die verfügbaren anzusehen , und wenn Sie es in Ihrem Code hier sehen, gibt es eine Pipe und einen Bindestrich. Was bedeutet das? Gehen Sie einfach direkt zur Dokumentation und schauen Sie sie nach. Als Teilmenge des Formats, wie Sie auch Helfer haben, die genau wie Formatierer sind, aber der Hauptunterschied, den Sie sehen werden, ist, dass jeder dieser Helfer eine Pipe und ein Schlüsselwort nach dem at Symbol ist. Es nimmt ein voll ausgestattetes Objekt und es zieht im Grunde neue Informationen, die möglicherweise nicht bereits auf dem Objekt vorhanden sind. Zum Beispiel, wir haben noch kein Bild notwendigerweise, glaube ich nicht. Vielleicht in der Über uns Seite. Dieses Bild wird dynamisch erzeugt, das können wir jetzt nicht demonstrieren. Aber im Wesentlichen werden Sie in einem späteren Video sehen, dass wir Bild Bindestrich Meta verwenden und wir bringen die Mischung Informationen über ein Bild mit diesem JSON-T-Helfer. Das sehen Sie in einem späteren Video. Helfer sind auch mit der Pipe und einem Schlüsselwort, dies ist eine weitere Seite, um nach oben zu suchen, wenn Sie versuchen, herauszufinden , was etwas ist, wenn Sie diese Art von Syntax sehen. Letzter, Systemvariablen. Dies ist Zeug, das auf Ihrer JSON-Datenschicht sitzt. Wir haben alles schon gesehen, wenn wir in unsere Konsole gehen. Was ist einer von ihnen, Squarespace-Header. Wenn wir nach unten scrollen, können wir sehen, dass es ein Objekt für Squarespace-Header gibt, und es enthält eine Reihe von verschiedenen Code, der von unserem Backend kommt und in unseren Kopfbereich unserer Vorlage geht. Wenn wir in unsere Website Punkt Region Datei gehen, können Sie sehen, dass wir nur dieses Objekt direkt in unseren Kopf Abschnitt hier ausgeben. Viel Inhalt gibt es. Das ist nicht absolut alles in JSON-T, ich bin sicher. Aber das sind die wichtigsten Konzepte und wie gesagt, es ist alles hier in der Dokumentation. Ich dachte nur, ich würde auch ein bisschen darüber reden , weil ich etwas Zeit brauchte, um meinen Kopf herum zu kriegen. Aber jetzt, da ich es in der Praxis verwendet habe, habe ich erkannt, dass es ziemlich einfach ist und Sie werden anfangen zu verstehen, dass es am Ende nicht viel gibt. Je nachdem, wie viel Übung Sie sich mit dem Codieren von JSON-Vorlagen geben, werden Sie beginnen, dieses Wissen in Ihrem Kopf zu verfestigen und es wird viel einfacher. Ich habe das Gefühl, dass dieses Video lang genug ist, also werden wir weitermachen und tatsächlich unsere Vorlage bearbeiten. Ich weiß, dass es eine Menge Theorie gibt, bevor wir tatsächlich zu diesem Punkt gekommen sind, aber jetzt werden wir tatsächlich dorthin gehen, Änderungen an unserer Vorlage vornehmen und Ihnen alle Funktionen des Entwicklermodus zeigen. Ich freue mich, endlich eintauchen und einige Änderungen vornehmen zu können. Ich werde Sie im nächsten Video sehen. 9. Layouts und Regionen: Nach ziemlich viel Theorie und etwas Konfiguration ist es jetzt an der Zeit, unsere Vorlage zu bearbeiten. Spannende Zeiten Jungs, ich bin froh, endlich in sie zu bekommen. Aber natürlich ist die Theorie auch wichtig, also überspringen Sie das nicht. Aber jetzt können wir tatsächlich einige Änderungen an unserer Website erstellen , da wir dieses theoretische Wissen haben. Eines der ersten Dinge, die ich tun möchte, ist das Layout zu aktualisieren. Wie Sie hier sehen können, mag ich nicht wirklich, wie alles nur links von der Seite sitzt. Ich mag die Dinge zentrierter, und auch für die Homepage, die wir in einer Sekunde erstellen werden, möchte ich es in voller Breite. Auf vielen Websites haben Sie wahrscheinlich den Inhalt eines Blog-Beitrags gesehen oder eine bestimmte Seite wird in einem kleinen Container sitzen hier, es geht nicht in voller Breite, das macht es ein wenig einfacher zu lesen, aber auf der Homepage sehen Sie oft Abschnitte mit voller Breite. Das ist es, was wir in diesem Video erstellen werden. Das erste, was wir tun werden, ist der Kopf über unseren Code, stellen Sie sicher, dass wir unseren lokalen Server laufen. Was ich tun werde, ist in das Style-Verzeichnis zu gehen. Wir werden darüber sprechen, wie CSS mehr über weniger kompiliert wird und wie alles später in Ihrer Vorlage in dieser Klasse bündelt. Aber für jetzt, was ich tun möchte, ist nur getroffen in „Base.Weniger“, und finden Sie die Stilregel für den Behälter. Es ist genau hier auf dem Site-Container, wie Sie sehen können, haben wir eine maximale Breite und keine automatischen Ränder. Das ist das erste, was ich ändern werde. Ich werde die maximale Breite auf 1.140 ändern, weil ich diese Zahl besser mag, entfernen Sie die Polsterung und geben Sie ihr eine Margin-links und rechts. Lasst uns sparen drauf drücken. Wenn wir die Seite aktualisieren, sehen Sie, dass unser Inhalt jetzt breiter ist und er in der Mitte sitzt, unabhängig von der Bildschirmgröße, solange er über 1140 liegt. Wenn wir hier runter gehen, können wir sehen, dass es unter 1140 keine Ränder auf beiden Seiten gibt, also das ist eine andere Sache, die wir beheben müssen. Ich werde hier runter gehen, und innerhalb weniger können wir tatsächlich in den Code für den Website-Container gehen und unsere Medienabfrage hier setzen. Medien mit max. Breite 1140 Pixel. Wir werden die Margin-rechts, 20 Pixel und die Margin-links 20 Pixel haben. Die Reihenfolge davon spielt keine Rolle. Zurück zu unserer Seite hier, und wenn ich das in ziehe, werden Sie sehen, sobald es auf 1140 Pixel der Fensterbreite kommt, erhalten Sie einen festen 20 Pixel-Rand auf jeder Seite. Da gehst du. Cool. Das ist ein Beispiel für eine CSS-Änderung, die wir hier an unserer Vorlage vornehmen können. Aber was ich tun möchte, ist tatsächlich ein alternatives Layout zu erstellen. Der Grund, warum ich das tun möchte, ist, dass ich eine Homepage erstellen werde , die Abschnitte voller Breite erlaubt. Dieses Bild ist in der Mitte, hat es volle Breite und hat wie Text über der Spitze. Bevor wir dieses Layout tatsächlich erstellen, muss ich die Seite auf unserer Squarespace-Website erstellen. Ich werde die Adresse für meine SquareSpaceWebsite/config durchgehen. Gehen Sie in die Seiten und hier für die Willkommensseite, wir können diese einfach direkt bearbeiten. Wir können hier hineingehen und den Seiteninhalt bearbeiten. Im Moment haben wir diese drei Spalten Layout mit diesem zufälligen Bild oben, ich werde alle Inhalte entfernen. Dies ist sowieso nur Demo-Inhalte, und lassen Sie uns tatsächlich einige Inhalte einfügen, die für diese gefälschte Website relevanter sind. Wir können entweder dieses Plus-Symbol hier klicken, ich werde auf diese Registerkarten klicken, da es noch keinen Inhalt gibt. Ich werde auf das Plus klicken, und ich werde einfügen, was ein Poster genannt wird. Ein Poster ist nur ein Hintergrundbild mit Text über der Oberseite. Ich werde nach einem Bild für ein Fitnessstudio suchen. Wählen wir einfach dieses aus. Ich werde hier einen Titel schreiben, „Your Friendly Neighborhood Gym“, und dann den Untertitel hier, „Komm, sag Hallo“. Um diese Seite ein wenig mehr zu verschönern. Was ich tun werde, ist ein wenig von einem primären Video einfügen. Dieses Mal werde ich tatsächlich auf diese Registerkarte klicken hier, und, Ich werde nach Video suchen, die gibt es unter Grund, und, Ich werde ein Video einfügen, das ich früher für dieses gefälschte Fitnessstudio vorbereitet. Ursprünglich nannte ich das Fitnessstudio, Rucksack Gym. Das ist mein dummes kleines Promo-Video, das ich erstellt habe. Aber wie Sie sehen können, ist es ein weiteres Stück Inhalt, das wir hinzufügen können, genau wie wir so viele verschiedene Dinge wie ein Zitat, eine Schaltfläche, eine Audio-Einbettung, alle möglichen Dinge hinzufügen können . Slideshow, alle möglichen Sachen, die hier in Squarespace verfügbar sind. Für unsere Homepage werde ich es einfach dabei belassen. Ich werde auf „Speichern“ klicken. Das ist jetzt unsere Homepage. Also, wenn wir zu unserer lokalen Version gehen, und wir entfernen die Schlacke am Ende und gehen Sie einfach zu localhost: 9000. Leider ist der Inhalt noch nicht durchgekommen, in Situationen wie diesem möchte ich den Server neu starten. Dies sollte die aktuellsten Änderungen von unserer Squarespace-Website laden. Wieder wird es eine Weile dauern, um zu laden. Lassen Sie es einfach laden und werfen Sie einen Blick, sobald es fertig ist. Wie Sie hier sehen können, haben wir Ihr freundliches Nachbarschafts-Fitnessstudio, kommen Sie sagen Hallo, und wir haben unser erstaunliches kleines Promo-Video hier. Nur zufällige Leute, die mit Stock Footage arbeiten. sowieso, also bekommst du den Punkt. Wir haben das Poster und das Video hier, aber das Problem dabei ist, dass wir wollen, dass es in voller Breite ist. Nun ist der Grund, warum es nicht volle Breite ist, weil wir den Inhalt in diesem Site-Container haben. Wenn ich den Code durchschaue, viele Sachen hier, aber hier in diesem div haben wir Sight-Container. Es gibt zwei Dinge, die wir hier tun müssen. Wir müssen dieses div in jeden der Kopfzeile, den Hauptbereich und die Fußzeile verschieben ; weil wir immer noch wollen, dass die Kopf- und Fußzeile im Container sind. Aber wir wollen, dass der Inhalt nur der Homepage und aller anderen Seiten, die wir auf dieses spezifische Layout gesetzt haben, volle Breite haben. Die erste Änderung ist, dass wir das div für site-container neu positionieren werden, und bevor wir das tun, werde ich unsere site.region Datei in drei verschiedene Teile aufteilen. Die Kopfzeile, die Fußzeile und der mittlere Abschnitt, der der Name site.region bleiben kann. Ich zeige Ihnen, wie wir das jetzt machen können. Ich werde alles über diesen CMS-Content-Einspritzpunkt nehmen. Kopieren Sie das in meine Zwischenablage, erstellen Sie eine neue Regionsdatei namens header.region. Fügen Sie das dort ein, und lassen Sie uns dann alles nach diesem Haupt-Tag herausnehmen, das unsere Fußzeile darstellt. Stellen Sie sicher, dass diese in der Zwischenablage gespeichert ist, und dann, footer.region. Süß. Die Verschachtelung ist gut dort und innen.region, wir wollen nur die Verschachtelung und ein wenig hier aufräumen. Wir müssen unser Layout jetzt aktualisieren, um Squarespace mitzuteilen , dass wir in der Reihenfolge der Kopfzeile, der Website und der Fußzeile laden möchten . In unserer template.com-Datei werden wir Kopf- und Fußzeile zu unserem Array von Regionsdateien hier hinzufügen. Im Grunde, was wir getan haben, wird dies genau das gleiche Ergebnis produzieren, aber das wird unsere Region-Datei in drei verschiedene Abschnitte aufteilen, weil wir möchten, dass dieser mittlere Abschnitt auf anderen Seiten anders ist, aber wir möchten, dass die Fußzeile und die Kopfzeile gleich bleiben. Es macht es auch ein wenig einfacher zu bearbeiten. Wenn ich etwas in meiner Kopfzeile bearbeiten möchte, weiß ich, dass ich zu header.region gehen muss und wenn ich etwas in meiner Fußzeile bearbeiten möchte, kann ich zu footer.region gehen, damit ein paar Vorteile dies tun. Gehen wir zurück zu unserer Website und aktualisieren und beweisen, dass es keine Probleme gibt. Da gehst du. Wir haben immer noch die Kopfzeile, die Fußzeile, das ist nur dieser Text und wir haben den Inhalt in der Mitte, so dass es immer noch funktioniert. Aber jetzt können wir ein anderes Layout in unserer template.conf erstellen. Ich werde dieses Objekt kopieren und dann einige Sachen aktualisieren. Dieser anstelle der Standardeinstellung werde ich die volle Breite aufrufen und der Titel , der im Squarespace-Admin angezeigt wird, wird in voller Breite sein. Anstelle der Website in der Mitte werde ich eine andere Regionsdatei namens full-width.region erstellen. Full-width.region wird im Grunde den gleichen Inhalt wie site.region haben, aber der Unterschied ist, dass wir den Site-Container nicht verwenden werden. Ich zeige dir in einer Sekunde, wie das aussieht. Sie die Seite erneut aktualisieren, sollte es keinen Unterschied geben, bis wir beginnen diese Änderungen an der Position der Entwicklung vorzunehmen. Aber wie ich Ihnen bereits gezeigt habe, kapselt der Website-Container den Header, den Inhalt und die Fußzeile, so dass wir dies neu strukturieren müssen. in unsere Header-Datei direkt hier gehe, werde ich dieses öffnende Tag entfernen und dann in die footer.region gehen, werde ich dieses div-Tag hier entfernen. Wenn wir die Seite aktualisieren, wird alles in voller Breite sein. Da gehst du. Wie ich bereits erwähnt habe, wollen wir diese Kopf- und Fußzeile im Container für die Homepage haben, aber der Inhalt der Homepage ist diese Kopf- und Fußzeile im Container für die Homepage haben, voll breit. Was wir tun werden, ist, wieder im Site-Container hinzuzufügen, aber innerhalb der Fußzeile und innerhalb der Kopfzeile. Genau hier sind wir bereits in der Fußzeilendatei, also fangen wir hier an. Ich werde den Inhalt der Fußzeile in das Site-Container-Div einschließen und dann für den Header werde ich dasselbe tun. Bewegen Sie sich hier in den Header, gehen Sie in diesem div für Site-Container hinzufügen. Drücken Sie Speichern auf, gehen Sie zurück hier, aktualisieren Sie die Seite und Sie werden sehen, dass jetzt dieser mittlere Abschnitt volle Breite hat, aber die Kopfzeile und die Fußzeile sind immer noch in diesem Container. Das Problem dabei ist jedoch, dass jede Seite auf unserer Website jetzt volle Breite haben wird, wie Sie sehen können. Wir wollen immer noch, dass die anderen Seiten auf unserer Website innerhalb des Containers sind, es ist nur wir wollen, dass die Homepage in voller Breite ist. Was wir tun müssen, ist, fügen Sie den Website-Container zu unserer site.region hier. Das wird das Problem beheben. Jetzt wird auf jeder Seite, die das Layout verwendet, das wir hier standardmäßig definiert haben, Kopf-, Seiten- und Fußzeile verwendet. Um das Beste aus beiden Welten in dem Sinne zu bekommen, dass wir das alternative Layout auf unserer Homepage zeigen wollen . Wir wollen volle Breite, aber auf den anderen Seiten wollen wir nur ein Standardlayout. Wir müssen Änderungen herausschieben, damit sie zum Squarespace-Admin weitergehen und dann unser neues Layout innerhalb des Squarespace-Admins auswählen können . Werfen wir einen Blick auf unsere Layouts hier. Ich habe erkannt, dass wir den mittleren Abschnitt tatsächlich auf volle Breite ändern müssen. Auf diese Weise wird es hier in dieser Region ziehen, die nicht das div mit der Klasse des Site-Containers hat. Der Unterschied zwischen den beiden Layouts, dies und das ist praktisch der gleiche, außer für dieses Site-Container-Div, in Ordnung? Jede Seite, die das Layout in voller Breite verwendet, wird diese Bereiche verwenden, und jede Seite, die das Standardlayout verwendet, wird diese Bereiche verwenden. Wie ich bereits erwähnt habe, müssen wir diese Änderungen auf unserer Squarespace-Website verschieben, um dieses alternative Layout auf admin zu sehen und es auszuwählen . Was ich tun werde, ist hier ein neues Terminal zu eröffnen. Was wir zuerst tun müssen, ist das Keyword get ad mit einem Punkt zu verwenden, und das wird alle Änderungen, die wir bisher vorgenommen haben, in unserem Commit hinzufügen. Dann werde ich ein Commit machen, mit Bindestrich m, ich kann eine Nachricht schreiben. Die Nachricht wird sein, fügen Sie ein Layout voller Breite. Jetzt haben wir das zu git verpflichtet, wir können git push eingeben und es wird diese Änderung auf die Squarespace-Website schieben. Dort können Sie sehen, es ist aktualisiert und jetzt können wir unsere Squarespace-Website senken. Wie Sie sehen können, hat es ein bisschen einen funky Effekt erzeugt, und das liegt daran, dass wir in diesem Konsolenprotokoll in unserem Header-Punktbereich gelassen haben. Ausführen eines Konsolenprotokolls, damit Sie benachbarte Daten-Layer sehen können , ist hilfreich, wenn Sie die Entwicklung durchführen. Aber aus irgendeinem Grund, wenn Sie es auf Ihre Squarespace-Website schieben, bricht es den Admin, und so erhalten Sie diesen seltsamen Effekt. Was ich tun werde, ist, es vorerst zu entfernen. Auf diese Weise haben wir nicht die funky aussehende Website. Ich muss diese Änderung einfach erneut zu meinem Commit hinzufügen, ein anderes Commit machen, das Konsolenprotokoll entfernen und das dann erneut drücken. Sobald das geschoben ist, können wir unsere Seite hier aktualisieren, und es sollte alles in Ordnung sein. Nun, was wir in unserem Squarespace Admin haben sollten, ist das andere Layout registriert. Mal sehen, ob das der Fall ist. Gehen Sie hier auf unsere Willkommensseite und klicken Sie auf das Zahnradsymbol. Ich möchte, dass Sie auf Erweitert klicken, und hier können Sie eine neue Option für das Seitenlayout sehen. Ich glaube, wenn es keine Möglichkeit gibt, es zu ändern , erscheint es überhaupt nicht. Aber da wir die volle Breite hinzugefügt haben, können wir jetzt das Layout auf dieser Seite von Standard auf volle Breite ändern. Wir werden speichern, und Sie werden sehen, dass wir jetzt einen Abschnitt voller Breite haben. Das liegt daran, dass wir dieses alternative Layout definiert haben, das hier als volle Breite bezeichnet wird, das eine andere Regionsdatei in der Mitte zwischen Kopf- und Fußzeile verwendet. Das gibt dir den vollen Peitschenabschnitt. Während auf diesen anderen Seiten, die noch das Standardlayout verwenden, haben sie immer noch den Container. Um zusammenzufassen, was wir getan haben, ist, dass wir in unserer Region-Datei in drei verschiedene Teile unterteilt haben , die Kopfzeile, den mittleren Abschnitt und die Fußzeile, und das hat uns erlaubt, die Kopf- und Fußzeile sind die gleichen für andere Layouts. Wir können diesen Code immer noch verwenden, aber dann für den mittleren Abschnitt können wir diese Site-Punktregionen-Datei mit etwas anderem wie dieser Punktregionen-Datei mit voller Breite austauschen . Wir haben auch ein wenig CSS aktualisiert. Jetzt sind wir bereit, den nächsten Teil des Diagramms zu betrachten. Wenn ich hier klicke, ist die Navigation. In der nächsten Lektion betrachten wir Blöcke und wie wir Blöcke aktualisieren können , um unsere Navigation zu aktualisieren. 10. Navigation und Blöcke: In der vorherigen Lektion haben wir ein paar neue Regionsdateien erstellt, und das haben wir getan, um neue Layouts in unserer Dot Conf-Vorlagendatei einzurichten. In dieser Lektion werden wir über Navigationen sprechen und wie wir auf Navigationen mit Blöcken darstellen können. Wenn ich zu meinem Code gehe und wir zur einzigen Blockdatei in Blöcken gehen, ist dies die Blockdatei für die Navigation. Gehen wir zurück zum Diagramm und lassen Sie uns darüber sprechen wie dieser Block tatsächlich in unsere Region gebracht wird. In unserer Vorlage dot conf Datei haben wir unsere Layouts, wie wir in der letzten Lektion gesehen haben, aber wir haben auch eine Reihe von Navigationen. Viel Zeit gibt es nur eine Navigation, aber wir können hier mehrere Navigationen erstellen. Ich möchte Ihre Aufmerksamkeit auf dieses Schlüssel-Wert-Paar hier lenken. Dies ist der Name, auf den wir in unserem Code verweisen werden. Wie Sie im Diagramm sehen, werden Navigationen in der Dot Conf-Datei der Vorlage eingerichtet, aber der Code für diese Navigationen gibt es in Blöcken, die in Orte wie Regionen gehen. Mal sehen, dass jetzt in Kraft ist. Wenn ich zu meiner Header-Region gehe, wo sich die Navigation befindet, sehen wir dieses spezielle Tag, das von squarespace bereitgestellt wird. Squarespace Doppelpunkt Navigation bringt in eine Navigation, die wir in unserer Vorlage dot conf definiert haben. Denken Sie daran, dass ich diesen Namen hier zur Kenntnis nehmen soll, SitenAV. Hier in unserer Navigations-ID in diesem Tag ist der genaue Name. Wir sagen hier in diesem Tag, dass wir diese spezielle Navigation verwenden möchten , die wir in unserer Vorlage dot conf eingerichtet haben. Das nächste Attribut ist Vorlage gleich. Hier definieren wir den Block, der diese Website-Navigation halten wird. Hier können wir Website Dash-Navigation sehen. Wir brauchen nicht, um den Punktblock am Ende zu setzen, Sie können sehen, dass diese Karten perfekt zu Website Dash Navigation Punkt Block genau hier. Wo immer wir dieses Tag setzen, registrieren wir die Navigation, die wir in template dot conf eingerichtet haben, und wir sagen ihm, dass er den Code in diesem Block verwenden soll. Genau hier wird der Code, den wir hier drinnen platzieren, gerendert. Die andere Sache, die über die Navigation zu beachten ist, ist, dass es uns Zugriff auf ein Element-Array gibt. Innerhalb eines Navigationsblocks haben wir eine Reihe von Elementen. Lassen Sie uns das jetzt beweisen. Ich werde dies über unseren wiederholten Abschnitt verschieben, damit wir sehen können , was der JSON-Kontext in diesem Navigationsblock ist. Wenn ich die Seite hier aktualisiere, müssen wir den Server möglicherweise neu starten. Ich hatte dieses Sitzen für eine Weile im Leerlauf, also müssen wir nur neu starten, indem wir Squarespace-Server ausführen, gefolgt von der Adresse, gefolgt von Dash Dash Auth. solltest du jetzt schon kennen. Es hört auf Port 9.000. Lasst uns die Seite aktualisieren und warten. Ich weiß nicht, ob es so lange dauern wird, aber für mich dauert es 30 Sekunden, bis das Ganze geladen wird, also kein sehr effizientes Paket im Moment, aber hoffentlich wird es sich verbessern. Nach dem, was sich wie eine Ewigkeit anfühlte, taucht nun auf. Wenn ich zu meiner „Konsole“ hier können wir dieses Objekt hier sehen. In diesem Objekt sehen wir ein Array von Elementen und in diesem Array von Elementen, Sammlungsobjekte, die unsere Navigation haben. innerhalb unseres Navigationselements Wenn wirinnerhalb unseres Navigationselementsden JSON-Kontext darin betrachten, haben wir Zugriff auf das Array eines Elements. Wenn wir dies nur außerhalb der Navigation ausgeben, haben wir keinen Zugriff auf dieses Navigationsarray. wir das dahin zurück, wo es vorher war. Jetzt müssen wir Protokolle konsolen. Aktualisieren Sie die Seite hier. Wie Sie sehen können, haben wir zwei Objekte. Der erste, wenn wir hineinschauen, hat keine Gegenstände. Dies ist derjenige, der von Site-Punktregion oder Kopfpunktregion eher durchkommt. Aber dieser kommt aus unserer Navigation. Hier können Sie sehen, dass wir Artikel haben. Das ist wichtig zu beachten. Die Elemente werden nicht angezeigt, wenn Sie sich den JSON-Kontext in der Regionsdatei ansehen. Aber wenn Sie tiefer in die Navigation gehen, erstellt es dieses Array von Elementen. Das ist sehr wichtig, denn jetzt werden wir diese Elemente durchlaufen und ein Listenelement für jedes einzelne dieser Elemente erzeugen. Wir haben ein wenig über das JSON-T erklärt, das hier in der Lektion zu JSON-T vor sich geht. Daher sollten Sie ein ziemlich gutes Verständnis davon haben, was diese sind und woher sie kommen, aus dieser Lektion. Aber es gibt eine Änderung, die wir hier wirklich vornehmen müssen, und das ist, dass unsere Vorlage derzeit keine Ordner unterstützt. Denken Sie daran, dass wir die Ordner dot conf Datei direkt hier zu unserem Kollektionsordner hinzugefügt haben. Das erlaubte uns, einen Ordner im Admin zu erstellen. Aber unsere Vorlage hat nicht die Möglichkeit, ein Dropdown-Menü zu haben, wenn wir den Mauszeiger über den Ordner bewegen, was Sie wahrscheinlich von Ihrer Navigation erwarten würden. Zuerst bauen wir unsere Mappe auf. Ich werde auf diesen „Neuer Ordner“ klicken und ich möchte ihn ändern, lassen Sie uns einen Ordner voller der verschiedenen „Klassentypen“ machen. Ich werde den Seitentitel, Navigationstitel und Schnecke aktualisieren . Drücken Sie „Speichern“ darauf. Jetzt können wir Seiten in diesem Ordner erstellen, also werde ich eine Seite erstellen und wir nennen es HIIT für High Intensity Training. Jetzt können Sie sehen, dass wir diese HIIT Seite erstellt haben. Was ich tun möchte, bevor wir weiter gehen, ist auf dieses Symbol hier klicken, um den Ordner zu öffnen. Dann kann ich diese Seite in diesen Ordner ziehen. Jetzt, wie ich bereits sagte, unterstützen wir nicht wirklich Dropdown-Menüs, wenn wir den Mauszeiger über Ordner in unserer Vorlage bewegen. Aber hier können Sie deutlich sehen, dass wir diese Seite in diesem Ordner verschachteln. Für diese HIIT Seite, was ich tun werde, ist in einen Titel setzen, High Intensity Interval Training, auch bekannt als HIIT. Da gehen wir. Ich werde das in eine Rubrik 1 ändern. Dann unten hier unten, weil es für den Zweck dieser Klasse nicht wirklich wichtig ist, werden wir einen Lorem ipsum Generator finden. Dies ist gut für gefälschte Absätze Inhalt, nur um zu sehen, wie es aussehen würde. Grundsätzlich Dummy-Inhalt. Jetzt haben wir eine Seite für High Intensity Interval Training. Was ich tun werde, um diesen Ordner aufzubauen, ist diese Seite zu duplizieren. Ich gehe eine Sekunde zurück. Sie können tatsächlich auf dieses Zahnrad klicken, auf „Allgemein“ scrollen und dann auf „Seite duplizieren“ klicken. Bestätigen Sie, dass ich das tun möchte. Ich werde das hier „Pilates“ nennen. Lassen Sie uns das unter HIIT setzen und natürlich werden wir uns ändern müssen. Die URL ist alle in „Pilates“ geändert, also das ist gut, aber wir müssen den Titel hier ändern. Pilates. „Speichern“, und dann eine weitere duplizierte Seite. Nennen wir es CrossFit als letzte Klasse. Ziehen Sie das von nicht in das Foto verlinkt und dann, sobald wir zu dieser Seite kommen, weil es dupliziert ist, müssen wir nur diese auf CrossFit aktualisieren. Drücken Sie Save darauf. Jetzt haben wir einen Ordner für Klassentypen mit drei verschiedenen Seiten, die verschiedene Klassentypen beschreiben. Im Moment erkennt unsere Navigation hier oben nicht wirklich und zeigt Seiten, die sich innerhalb eines Ordners befinden, weil denken Sie daran, dass wir die Möglichkeit hinzugefügt haben, Ordner in diese Vorlage zu haben, nachdem wir damit begonnen haben. Diese Vorlage hat standardmäßig keine Dropdown-Menüs, aber wir können das leicht in jetzt JSON-T verwenden. Wenn ich zum Code gehe, lasst uns das alles klären. Sie können einfach von wo aus wir anfangen müssen, und wir können in die site-navigation.block-Datei gehen. Für jeden Artikel wollen wir überprüfen, ob es sich um eine Sammlung handelt, wir überprüfen, ob es sich um einen externen Link handelt, aber wir überprüfen nicht, ob es sich um ein Foto handelt. Über dem Sammlungslink, was ich tun werde, ist in ein Ich denke, sie nennen es Prädikat in JSON-T, aber es gibt ein spezielles Prädikat, das ich Ihnen vorher gezeigt habe, das überprüft, ob etwas ein Ordner ist. Dann werden wir das Ende setzen, wir bringen das in und ich zeige Ihnen, wenn wir zurück in die Dokumentation gehen, wir können alle Prädikate hier sehen, und wenn ich nach Ordner suche, werden Sie sehen, dass es nur testet, ob eine Navigation Element ist ein Ordner, da wir einen Ordnermenüeintrag anders behandeln müssen. Zurück zu unserer Seite. Wenn es sich um einen Ordnermenüeintrag handelt, möchte ich einen Link einfügen, der jetzt nirgendwo hingeht. Lassen Sie uns einfach nicht eine href einfügen, aber ich möchte ein Tag mit dem Navigationstitel einfügen. Dies wird im Grunde der Ordnername sein. Was ich dann einfügen möchte, ist eine ungeordnete Liste aller Menüelemente in diesem Ordner. Der Weg, dies zu tun, ist, wenn wir tatsächlich den Code betrachten, also lasst uns zu unserer lokalen Version gehen, wo wir alle console.logs haben . Schauen wir uns mal an. In unserem Items Array, im ersten Element innerhalb des Sammlungsobjekts, und wir können sehen, dass dies der Ordner ist, und wenn wir nach unten scrollen , gibt es derzeit keine Untermenüelemente, also müssen wir nur die Seite hier. Los geht's. Wir haben die Sammlung, die den Navigationstitel für den Ordner hat, aber dann haben wir auch Elemente in diesem Element, und das ist, wo wir durchlaufen und ziehen die verschiedenen Seiten in diesem Ordner. Ich kann sehen, dass ich hier einen Fehler gemacht habe und ich muss in Sammlung vor hier setzen , weil wir nicht in diesen Kontext gezoomt haben , wie wir es hier unten getan haben. Was ich hier tun werde, ist, einen weiteren wiederholten Abschnitt zu starten. so.Wiederholte Abschnittselemente, genau wie wir hier oben getan haben, aber jetzt sind wir in einem dieser Elemente, und es gibt eine Reihe von verschachtelten Elementen. Was ich tun werde, ist dasselbe, wie wir es hier getan haben. Wenn es sich um eine Sammlung handelt, möchten wir zunächst ein Listenelement unabhängig davon, welche Art von Link es sich handelt, in ein Listenelement einfügen. Ich werde es in das Listenelement setzen. Wenn es eine Sammlung vorhanden ist, was im Grunde jede Seite auf Ihrer Squarespace-Website außer einem externen Link bedeutet, wie hier unten, erstellen wir eine Unterliste darunter. Ich werde darauf Save drücken. Mal sehen, was passiert, wenn wir dies auf unserem lokalen Server ausführen. Sie werden sehen, dass der Code, den wir geschrieben haben, jetzt in unserer Navigation erscheint. Wir haben diese Klassentypen. Es ist ein Link-Tag ohne href, weil es nirgendwo verlinkt, und im Inneren haben wir eine weitere ungeordnete Liste mit allen Links zu den Seiten in diesem Ordner. Wir haben hier ein bisschen ein Problem, weil wir hier einen weiteren Sammlungslink für Klassentypen haben . Leider, selbst wenn es sich um einen Ordner handelt, kommt es als Sammlung. Um das zu beheben, müssen wir nur all diesen Code nehmen und sicherstellen, dass es der eine oder andere ist. Wenn es sich um einen Ordner handelt, werden wir ihn auf diese Weise behandeln, aber wenn es sich nicht um einen Ordner handelt, behandeln wir die Sammlung auf diese Weise, und das sollte das doppelte Menüelement stoppen. die Seite hier aktualisieren, können Sie jetzt sehen, dass wir hier oben Klassentypen mit einer ungeordneten Liste für die verschiedenen Klassentypen in unserem Ordner aufgelistet haben. Wir können darauf klicken, weil wir die URL festgelegt haben und Sie über alle verschiedenen Klassentypen lesen können. Nun, offensichtlich, müssen wir hier einige CSS-Änderungen vornehmen, weil das nicht so toll aussieht. Was wir tun möchten, ist hier zu gehen und sicherzustellen, dass dies nicht standardmäßig angezeigt wird, und dann, wenn wir den Mauszeiger über Klassentypen bewegen, wird es angezeigt. Das ist alles CSS Zeug genau da. Ich werde es jetzt schnell zusammenwerfen, aber das Hauptprinzip hier ist, dass wir in der Lage sind, auf die Unterpunkte innerhalb dieses Menüpunkts zuzugreifen. Lassen Sie uns das ein wenig beheben, indem wir in base.less gehen. Wir werden in unserem Website-Navigationselement sein. Wenn Sie noch nie weniger verwendet haben, ist es genau wie Sass oder ein anderer CSS-Compiler. Ich habe hier eine Klasse über Skill-Anteil über Sass, wenn Sie mehr darüber wissen wollen. Aber im Grunde, wenn Sie das noch nie gesehen haben, können wir tatsächlich nisten. Wir können die A-Tags innerhalb des Website-Navigationselements ausrichten , indem wir den Regelsatz innerhalb dieses anderen Regelsatzes werfen. Angesichts der Tatsache, dass ich weiß, wie man das macht, würde ich es hier schreiben, aber für diejenigen von Ihnen, die nicht weniger oder Sass wissen, aber nur CSS wissen, werde ich es hier draußen schreiben. Grundsätzlich versuchen wir, das Website-Navigationselement und das ul darin zu zielen , wenn wir keine anzeigen möchten. Es sei denn, das Website-Navigationselement wird mit dem Mauszeiger über, dann sollten alle verschachtelten Uls angezeigt werden. Drücken Sie Save darauf. Das gibt uns jetzt die Möglichkeit, sie beim Hover auftauchen zu lassen. Offensichtlich ist die Positionierung jetzt aus, also werde ich das schnell beheben. Mal sehen, wie das funktioniert. Sie müssen ihm nur eine Hintergrundfarbe geben. Sagen wir „Weiß“. Nun, es ist nicht das am besten aussehende Menü, aber zumindest haben wir unsere Elemente in unserem Ordner angezeigt, wenn wir den Mauszeiger über dieses Ordnerelement bewegen. Es ist eher eine Benutzererfahrung, die wir von einer Vorlage erwarten würden, aber dies ist keine CSS-Klasse, so dass wir nicht zu viel darüber nachdenken, wie es aussieht. Aber wie Sie aus dieser Lektion sehen können, können wir unsere Website-Navigation hier aktualisieren, indem wir unser Wissen über JSON-T und unser Wissen über das Nachschlagen von JSON-Daten verwenden. Entschuldigung, es ist genau hier, in unserer Konsolen-Tab. Hier sind alle Elemente, und dies ist der Prozess, den Sie ausführen würden, unabhängig davon, ob es sich um einen Block, eine Liste oder ein Element handelt, Sie würden sich die JSON-Datenschicht ansehen, sehen, auf was Sie zugreifen möchten, und JSON-T schreiben basierend darauf. Bevor wir mit der nächsten Lektion fortfahren, möchte ich diesen Ordner in einen sogenannten „Index“ umwandeln. Ein „Index“ ermöglicht es uns, auf die Daten von diesen untergeordneten Seiten in einer separaten Seite zuzugreifen , die alle Elemente in diesem Ordner darstellt. Es ähnelt also einer Sammlung. Es ist im Grunde eine Sammlung von Seiten statt Beiträge, Bilder oder Videos. Ich bin mir sicher, dass es ein bisschen mehr Sinn macht wenn wir tatsächlich anfangen, es zu implementieren. Wenn wir hier rüber schauen, können wir sehen, es ist eindeutig ein Ordner gegeben dieses Symbol und auch wenn wir darauf klicken, passiert nichts wirklich. Wenn wir auf eine andere Seite klicken und dann auf den Ordner klicken, ist es keine Seite. Wir können keine Seite für diesen Ordner anzeigen. Der Vorteil, einen „Index“ zu erstellen, besteht darin, dass dies sowohl eine Seite als auch eine Sammlung verschiedener Seiten hier sein kann . Ich muss vorsichtig sein, das Wort „Collection“ zu verwenden, weil technisch in Bezug auf die Squarespace-Terminologie es technisch in Bezug auf die Squarespace-Terminologiekeine Sammlung ist, sondern im Grunde ein „Index“ wie ein Ordner ist, der auch eine Seite ist. Wir können mehr über Indizes erfahren, indem Sie erneut in die Dokumentation gehen, und es gibt einen Menüpunkt hier für „Ordner und Indizes“. Denken Sie daran, dass wir die Anweisungen hier verwenden, um Ordner in unserer Squarespace-Vorlage zu aktivieren. Aber wenn wir nach unten scrollen, können wir tatsächlich einen Index erstellen. Wie hier steht, ist ein Index ein Ordner mit einer Hauptseite, die es Entwicklern ermöglicht, Daten aus den darin enthaltenen Sammlungen und Seiten zu aggregieren. Um einen Index zu erstellen, werden wir tun, was er hier sagt. Fügen Sie eine „index.conf“ -Datei zu unserem Sammlungsordner hinzu. Wir werden diese Standardeinstellungen verwenden. Wir gehen in den Sammlungsordner, klicken Sie auf „Neue Datei“, nennen es eine „index.conf“ Datei, fügen Sie das ein, und ich möchte nicht, dass es „Mein Index“ heißt, nur „index“ ist in Ordnung. Ich möchte nicht, dass es Sammlung hinzufügen sagt. Ich werde sagen „Seite hinzufügen“ und wir werden es erlauben, Seiten zu akzeptieren, nicht Galerien. Wenn Sie natürlich mehrere Indizes erstellen wollten, die Indizes von Galerien waren, würden Sie das dort belassen. Wenn Sie Indizes von Blogs wollten, dann könnten Sie „Blog“ hier einfügen. Aber für uns verschachteln wir nur Seiten. Wir werden das vorerst klären. Ich werde auf „Speichern“ drücken, und dann ist der andere Teil, dass wir eine Indexseitenvorlage erstellen müssen. Wir tun dies, indem wir eine „index.list“ -Datei erstellen, und wir fügen diese auch zu unserem Collections Ordner hinzu. Gehen wir in Sammlungen. Neue Datei, „index.list“. Um hier Zeit zu sparen, werde ich Code kopieren und einfügen, aber es ist sehr grundlegender Code. Ich werde schnell erklären, was das tut. Wo Konsolenprotokollierung, was sich der JSON-Kontext in dieser Listendatei befindet. Dann suchen wir nach dem Sammlungsobjekt, das sich daran erinnert, alle Informationen für diese bestimmte Seite enthält. Wir suchen nach den verschachtelten Sammlungen darin und erstellen eine Liste all dieser Sammlungen. Wie wir in Kürze sehen werden, entspricht dieser JSON-T-Code dem, was wir in unseren JSON-Kontexten haben. Was ich tun werde, ist, dass wir das vielleicht auf den Server schieben müssen. Lassen Sie mich zur Adresse für den Index gehen. Ja, also leitet es einfach zu „HIIT“ um. Was wir tun müssen, ist, diese Änderungen auf Squarespace zu schieben. Ich werde dieses andere Terminal hier öffnen, wo ich mein „git“ alles hinzufüge, mit der Nachricht „Ordner in Index transformieren“ bekomme. Dann werden wir das drängen. Nun, wenn wir auf unsere Website in unserem Squarespace-Admin gehen, dass wir hier klicken können und wir bekommen eine neue Option hier, die Index ist. Wir können diesen Ordner nicht an sich in einen Index verwandeln, aber was wir tun können, ist einen Index zu erstellen und diese dann in den neuen Index zu verschieben. Dieser Ordner wird jetzt für Klassentypen gelöscht. Wie Sie auf dieser neuen Indexseite sehen können, die ich sofort in „ Klassentypen“ umbenennen und darauf „Speichern“ drücken sollte . Sie können nun sehen, dass dieser Index , der wie ein Ordner aussieht, eine Seite an sich ist. Dann werden wir innerhalb dieses Index durchlaufen und alle Seiten innerhalb dieser Indexseite ausgeben. Wir können auf „Pilates“ klicken und es wird die „Pilates“ -Seite aufrufen. Wenn wir uns das JSON-Objekt ansehen. wenn wir hier nach oben gehen, gehen Sie zur Adresse für Klassentypen. Wir können im zweiten Objekt hier sehen, wir haben ein Sammlungsobjekt, und innerhalb des Auflistungsobjekts haben wir eine Liste von Sammlungen oder ein Array von Sammlungen. Und dann haben wir die einzelnen Seiten mit dem Seitentitel und der vollständigen URL. Dies stimmt mit dem Code überein, den wir hier geschrieben haben. Wir sind im Objekt, wir gehen zur Sammlung. Dann in der Sammlung werden wir das Objekt dieser Sammlung durchlaufen und das ist genau das, was hier vor sich geht. Die andere Sache, die wir tun müssen, bevor wir dies einschließen, ist, in unsere Website-Navigation zu gehen, und da dieses Navigationselement eine Seite an sich ist, können wir nun einen URL-Pfad dazu hinzufügen. Ich werde „Collection.Full URL“ schreiben. Drücken Sie „Speichern“ darauf. „ Aktualisieren“ hier drüben. Jetzt können wir tatsächlich auf diesen „Klassentypen“ Menüpunkt klicken und es wird auf die Seite „Klassentypen“ gehen. Wir waren schon drauf, aber lassen Sie uns auf eine andere Seite gehen. Klicken Sie zurück auf „Klassentypen“ und jetzt können wir auf diese Indexseite und alle darin enthaltenen Seiten zugreifen. Da habt ihr es Jungs, wir haben unsere Blockdatei für unsere Website-Navigation aktualisiert, aber wie wir im Diagramm gesehen haben, können Blöcke auch Partials sein. Ich habe kein spezifisches Beispiel, das einem Teil in den Sinn kommt, den Sie verwenden würden. Aber wenn wir wieder in die Squarespace-Dokumentation gehen, können wir tatsächlich Partials nachschlagen. Hier können wir unter Template-Dateien über Template-Partials lernen. Hier können Sie lesen, wie wir eine Blockdatei erstellen und dann diese Syntax verwenden, um diese Blockdatei zu bringen , wo immer wir wollen innerhalb unserer Squarespace-Vorlage, und dieser Code wird an der Stelle, an der wir diesen Code platzieren, durch kommen. Hier können Sie nachlesen, warum wir Partials verwenden sollten. Es hat ein Beispiel selbst hier. Dieses spezielle Beispiel war für unsere Zwecke nicht besonders relevant. Aber wenn Sie sich jemals wiederholen, schauen Sie sich oft definitiv in die Verwendung von Partials. Es spart Ihnen Zeit und macht Ihren Code besser organisiert. Das deckt so ziemlich alles ab, was wir mit Blöcken machen können. Wie gesagt, hauptsächlich wird es für die Navigation verwendet, aber es kann auch Partials sein. Im nächsten Video werden wir mehr darüber reden, was hier unten vor sich geht. 11. Erstellen einer Eventsammlung: In den vorherigen Lektionen dieser Klasse haben wir hier über die Spitze dieser Struktur gesprochen. Wir haben über Layouts und Navigations-S gesprochen, die in Ihrer template.com-Datei eingerichtet sind, und diese werden durch den Code in Ihren Regionen und Blöcken bestimmt. Jetzt werden wir über den Hauptinhalt sprechen. Natürlich bestimmen Regionen das Gesamtlayout, das Sie auf einer bestimmten Seite betrachten. Blöcke hauptsächlich zur Bestimmung der Navigation, die wahrscheinlich in einer Header-Region sitzen wird , wie wir in unserer Vorlage haben. Aber jetzt ist es Zeit, darüber zu sprechen, was in diesem Squarespace.Main Inhalt angezeigt wird. In den meisten Situationen würde ich sagen, dass dieser Inhalt nur der Inhalt ist , den Sie in Ihrem Squarespace-Admin eingerichtet haben. Wenn ich hier auf unser anderes Fenster klicke und wir uns die Seite Über uns ansehen, zum Beispiel ist der Inhalt, den wir in diesem Seiteninhaltsfeld eingerichtet haben, mit den Blöcken, die in Squarespace verfügbar sind, unser Squarespace.main Inhalt. Dies ist, wenn wir eine Seite betrachten. Wenn wir jedoch eine Sammlung anzeigen, der Code, der in Squarespace.MainContent durchkommt, durch eine Listendatei bestimmt. Das ist nicht immer wahr, weil wir Systemsammlungen haben können, die wir Ihnen in dieser Lektion zeigen werden. Aber wenn wir hier eine Listendatei gesetzt haben, dann wird der Code in dieser Listendatei sein, was von Squarespace.MainContent durchkommt. Wir haben auch statische Seiten, die wir in der nächsten Lektion behandeln werden. Aber in dieser Lektion möchte ich über Sammlungen sprechen. Sammlungen bestehen aus der Listenseite und den einzelnen Elementseiten. Wie ich bereits erwähnt habe, gibt es eine Reihe von Systemsammlungen, die automatisch mit Squarespace geliefert werden. Was ich tun werde, ist in die Dokumentation zu gehen, scrollen Sie nach unten und klicken Sie auf Sammlungen. Hier sehen Sie einen Abschnitt zu Systemsammlungen. Wie Sie lesen können, erstellt und verwaltet Squarespace mehrere Sammlungstypen im System, die Sie auf Ihrer Website verwenden können, ohne dass Dateien in Ihrer Vorlage benötigt werden. Lassen Sie uns das jetzt testen. Lassen Sie uns alle diese Systemsammlungen durch unsere Vorlage kommen. Ich werde dieses Objekt kopieren, gehen Sie in unsere template.comfile. Nach der Navigation werde ich Systemsammlungen setzen. Jetzt sollten wir erwarten, dass wir sehen, sobald wir dies auf unserer Squarespace-Website geschoben haben, die Möglichkeit, Alben, Blogs, Events, Galerien und Produkte hinzuzufügen , ohne diesen Code in unseren Kollektionsordner schreiben zu müssen. Lassen Sie mich einfach hinzufügen, dass Commit das mit der Nachricht hinzufügen Systemsammlungen. Dann werden wir das drängen, damit wir die Änderung auf unserer Squarespace-Website sehen können. Gehen Sie jetzt auf die Squarespace-Website. Aktualisieren Sie die Seite. Wenn wir auf Seiten gehen und darauf klicken, können wir jetzt Galerien, Produkte, Blogs, Events, Alben hinzufügen und dann einen Index, den wir zuvor erstellt haben. In dieser Lektion werden wir zuerst eine Ereignissammlung mit Systemsammlungen erstellen , und dann werden wir es individuell machen. Der Grund, warum wir eine benutzerdefinierte tun, obwohl Systemsammlungen ausreichen könnten, ist, dass wir lernen können, wie benutzerdefinierte Sammlungen zu erstellen , wenn wir etwas benutzerdefinierte in der Zukunft tun wollen. Vielleicht ist es keine Event-Sammlung, die wir hier anders wollen, aber vielleicht möchten wir etwas wie Projekte oder ein Portfolio hinzufügen, wenn wir später unsere eigene benutzerdefinierte Sammlung erstellen wollten , dann die Fähigkeiten, die wir in dieser Lektion gelernt haben wird uns helfen, dies zu tun. Aber für diese Lektion werde ich das Beispiel von Ereignissen verwenden. Lassen Sie uns tatsächlich eine Ereignissammlung jetzt mit Systemsammlungen erstellen. Hier haben wir getan, wir haben gerade eine Event-Sammlung erstellt und jetzt können wir Events erstellen. Sagen wir Samstag Boot Camp, frei für die Öffentlichkeit. Alles klar, ich werde speichern und veröffentlichen, und wie Sie sehen können, und wie Sie sehen können sieht es viel aus wie ein Blog-Post, aber es ist ein wenig anders in der Art, wie es präsentiert wird. Wie Sie hier sehen können, ist das Datum und die Uhrzeit sehr prominent, und dann haben Sie diesen Knopf für zurück zu allen Ereignissen mit dieser schönen Art von Kalender-Tag hier bekommen. Es funktioniert sehr wie ein Blog. Aber statt Blog-Posts haben Sie Events. In Ordnung, also werde ich das jetzt entfernen. Lassen Sie uns alle unsere Systemsammlungen entfernen und unsere eigene benutzerdefinierte Implementierung dieser Liste hinzufügen. In Ordnung, also werde ich in Visual Studio-Code gehen. Lassen Sie uns Systemsammlungen entfernen. Lasst uns diese Veränderung vorantreiben. Ich werde git ausführen, hinzufügen, git Commits, entfernen Systemsammlungen, schieben Sie diese Änderungen auf unsere Website und lassen Sie uns bestätigen, dass Ereignisse jetzt verschwunden sind. Nachdem die Seite geladen wurde, können wir nun sehen, dass wir diese Sammlungen nicht zur Verfügung haben. Ok, großartig. Jetzt werden wir es selbst programmieren. Gehen wir dazu in die Squarespace-Dokumentation und scrollen Sie auf dieser Seite über Sammlungen nach unten, um die Erstellung benutzerdefinierter Sammlungen zu betrachten. Sie können sehen, wir brauchen den Namen der collection.comf als Datei, und wir brauchen auch eine der folgenden. Wir brauchen eine Punktlistendatei oder eine Punkt-Elementdatei, aber oft haben wir beides. Okay, hier können Sie die Konfigurationsoptionen sehen. Ich werde das kopieren und einfügen. Gehen Sie zu unserem Code, erstellen Sie eine neue Kollektion mit dem Titel Events.comf. Ich werde dieses [unhörbare] Objekt in einfügen. Lasst uns das jetzt nicht so lassen, weil das keinen Sinn ergibt. Es ist nur eine Kopie einer Konfiguration für einen Blog. Wir werden Blog durch Ereignisse ersetzen. Die Bestellung, wenn wir einen Blick zurück auf die verfügbaren Optionen, chronologisch, Benutzer, bestellbar oder Kalender, weil wir Veranstaltungen laufen, lassen Sie uns es in Kalender ändern. Es wird in Bezug auf die Zeit für den Text hinzufügen hier arrangieren. Dies sind im Grunde die Richtlinientexte, die auf dem Admin durchkommen werden, um ein neues hinzuzufügen, was auch immer das Element ist. Im Beispiel für Blog, wenn wir in Blog gehen und wir den Mauszeiger über hier, Sie können sehen, es sagt Beitrag für uns hinzufügen, wir wollen sagen, Ereignis hinzufügen. Fügen Sie also ein Ereignis hier unten für außer Typen hinzu. Sie können sehen, dass es derzeit auf Text eingestellt ist. Dies ist eine der drei verfügbaren Optionen. Hier steht, es gibt mehr als nur drei. Wenn wir also zu unserem Kalender oder unserer thence.comf-Datei zurückkehren, können wir diesen Text tatsächlich in ein Ereignis ändern. Ein Ereignis ist eine der akzeptierten Typen, die wir verwenden können. Jetzt gibt es noch ein paar andere Dinge, die ich hier tun möchte. Nur um dies viel schöner zu machen, wird es standardmäßig mit einem Blog-Symbol angezeigt. Also werde ich das Symbol auf das Kalendersymbol ändern und das ist es Jungs. Alles klar, weil wir keine Systemsammlungen mehr in unserer template.comf-Datei definiert haben. Wir werden definitiv eine Listendatei hier erstellen müssen. So Ereignisse. Liste, und hier drin, müssen wir in der Präsentation unserer Veranstaltungen setzen. Bevor wir das tun, werde ich diese beiden Dateien jedoch auf unsere Live-Squarespace-Website übertragen. Also werde ich git hinzufügen git commit und sagen, add events collection, dann git push. Mal sehen, welche Änderungen, die an unserem Admin. Denken Sie daran, dass wir die Systemsammlungen entfernt haben, sodass wir jetzt keine Ereignissammlung hinzufügen können , bis wir die Seite mit diesen Änderungen aktualisiert haben. Jetzt, wenn wir dieses Plus treffen, sollten wir Ereignisse sehen und es zeigt das nette kleine Symbol hier, weil wir das Symbol auf Kalender in unserem Comfile gesetzt. Wenn wir auf diese Schaltfläche klicken, können wir nun eine Ereignisseite erstellen. Wir können dieses Symbol hier klicken, um eine neue Veranstaltung hinzuzufügen. Lassen Sie uns dieses Ereignis noch einmal hinzufügen. Samstag Boot Camp. Mir wurde klar, dass der letzte auf einen Montag eingestellt war. Das ist also nicht sehr angemessen, oder? Frei für die Öffentlichkeit. Setzen wir es auf einen Samstag in der Zukunft. Ich gehe nicht oben mit Lorem ipsum für jetzt, vielleicht werde ich einfach lorem ipsum sagen. Lassen Sie uns speichern und veröffentlichen. Wenn wir nun in dieses Ereignis gehen, können wir sehen, dass es eine Elementseite gibt, die automatisch für uns generiert wird. Aber wenn wir rückwärts gehen und auf die Listenseite klicken, können Sie sehen, dass es keinen Inhalt gibt, weil es L.listFile direkt hier verwendet, was leer ist. Lassen Sie uns anfangen, diese Listendatei zu erstellen. Ich werde jetzt zu local-host wechseln, weil ich ein Konsolenprotokoll ausführen möchte, damit wir die JSON-Datenschicht sehen und herausfinden können , welche Attribute wir die json-Datenschicht abholen und auf unserer Seite setzen möchten. Auch hier habe ich diese HTTP-Ära, was bedeutet, dass ich meinen Server neu starten muss. Also gehe ich zurück in meinen ersten Terminal-Tab, kontrolliere C auf einem Mac, um den derzeit laufenden Prozess zu beenden. Dann lassen Sie uns den Squarespace-Server mit der Flagge von off laufen. Wir werden wieder auf Port 9.000 hören. Ich werde bei Ihnen einchecken, sobald das Laden beendet ist. Alles klar, jetzt können wir unsere Event-Seite sehen, die komplett leer ist, weil wir eine leere events.listfile haben. Obwohl es ein Ereignis in unserer Ereignissammlung gibt, wird es erst angezeigt, wenn wir etwas JSON T schreiben um die Liste der Ereignisse zu nehmen und einen Teil dieses Inhalts auf dem Bildschirm ausgibt. Wie immer werde ich die JSON-Datenschicht in diesen speziellen JSON-Kontext stellen . Dann können wir anfangen, das Objekt zu navigieren und das JSON T herauszufinden, das wir schreiben müssen. Zurück zu dieser Seite, nachdem ich das Skript für das Konsolenprotokoll des JSON-Kontexts geworfen habe. Sie können jetzt in unserer Konsole sehen wir ein sekundäres Objekt haben. Ich werde darauf klicken. Innerhalb des Sammlungsobjekts werden Sie sehen, dass wir alle Informationen für die Sammlung haben, was natürlich Code-Ereignisse ist. Wenn wir nach unten scrollen, sollten wir versuchen, die Liste der Ereignisse zu finden, die, wie Sie hier sehen können, in zwei Arrays aufgeteilt werden. Ein Array für bevorstehende Ereignisse, M1-Array für vergangene Ereignisse. Wir haben keine vergangenen Ereignisse, also ist das leer. Aber wir haben eine bevorstehende Veranstaltung. Wenn wir hineinschauen, können wir das Saturday Boot Camp direkt hier im angrenzenden Kontext sehen. Alles klar, wie Sie sehen können, haben wir hier ein Titelattribut, und wir haben auch ein Körperattribut mit einer ganzen Reihe von HTML. Dieses Körperattribut kommt aus, wenn wir ein bestimmtes Ereignis schreiben oder bearbeiten. Genau hier können wir einen Text einfügen, aber wir können auch Blöcke mit anderen reichen Inhalten einfügen. Also wird der gesamte HTML-Code, der das darstellt, in diesem Körperattribut direkt hier durchkommen. Verwenden wir die hier in unserer Akte. also nach oben navigieren, müssen wir das kommende Array durchlaufen, und dann werden wir für jedes Element den Titel und den Körper ziehen. Lasst uns das jetzt machen. Ich werde einen wiederholten Abschnitt für das Array starten. Das Array wird als bevorstehend bezeichnet. Stellen Sie sicher, dass Sie diesen Block schließen. Dann werde ich ein div mit der Klasse des Ereignisses erstellen. Innerhalb jedes Ereignisses werde ich ein h2 einrichten und das h2 wird den Titel jedes dieser Elemente innerhalb des kommenden Arrays halten. Es wird den Körper direkt darunter ausgeben. Ich werde das in keinem HTML umschließen, weil es bereits eine Menge HTML hat, das damit kommt. Aktualisieren Sie die Seite hier drüben. Wir sollten anfangen zu sehen, wie unser Titel und unser Körper durchkommen. Sie gehen. Samstag Bootcamp, frei für die Öffentlichkeit und die Körperinhalte gibt. Nun, da dies ein Ereignis ist, wollen wir natürlich die tatsächliche Uhrzeit und das Datum dieses Ereignisses anzeigen. Ansonsten wissen die Leute nicht, wann es abgesehen von hier ist, Samstag Bootcamp. Was wir tun werden, ist, die Daten als nächstes einzubringen. Wenn ich wieder zum Objekt gehe und wir zum kommenden navigieren, gehen Sie in dieses bestimmte Objekt, können wir nach unten scrollen. Es hat sogar Informationen wie die Lage, mit dem Längen- und Breitengrad. Das ist ziemlich cool. Aber was wir suchen, ist das Start- und Enddatum. Dies ist nur ein Code von Ziffern, die der Computer lesen kann, aber offensichtlich ist es für uns nicht sehr menschlich lesbar. Was wir tun werden, ist das hereinzubringen und es dann zu formatieren. Ich werde das Startdatum nehmen und es unter hier setzen, in diesem em Elemente. Dann werde ich nach dem entsprechenden Formatierer suchen. Dies ist unsere Möglichkeit, JSON-T Formatierer zu verwenden. Ich gehe in die Squarespace-Dokumentation, gehe zum Abschnitt über JSON-T-Formatierer, und dann werde ich mich hier unten die Datums- und Uhrzeit-Formatierer ansehen. Wir möchten ein Datum mit diesem YUI-Datumsformat formatieren. Ich werde nur das Beispiel hier kopieren und das nach dem Startdatum setzen. Lassen Sie uns auf „Speichern“ drücken. Lassen Sie uns hier rüber erfrischen. Da hast du es. Wir haben das Datum der Veranstaltung, aber wir möchten vielleicht auch die Zeit des Ereignisses und nicht nur die Uhrzeit des Ereignisses, sondern auch die Startzeit und die Endzeit haben . Dafür verwenden wir dieselben Objekte wie Startdatum und Enddatum, aber wir greifen nur auf verschiedene Teile dieser Datum-Zeit zu. Ich zeige Ihnen in nur einer Sekunde, was ich damit meine. Lassen Sie uns ein weiteres em-Tag erstellen, das durch ein break-Tag getrennt ist. Im Inneren werde ich das Startdatum wieder setzen. Anstelle dieses bestimmten Datumsformat werde ich hier rüber gehen, klicken Sie auf diesen Link, uns auf die Liste aller verschiedenen Codes bringen wird , die wir setzen können, um unser Datum/Zeit zu formatieren. Ich werde hier nach unten scrollen und diesen Code hier kopieren und den hier einfügen. Dann werde ich das Enddatumsobjekt greifen. Ich kopiere das einfach und füge es ein. Ändern Sie das Enddatum mit dem gleichen Format. Lassen Sie uns auf „Speichern“ drücken. Gehen wir zurück zu unserer Seite und aktualisieren. Dort können Sie sehen, dass die Veranstaltung von 15:00 - 16:00 Uhr ist. Wir brauchen die Sekunden dort nicht wirklich, also werde ich das aus der Formatzeichenfolge entfernen. Kopf zurück. Jetzt können Sie Samstag Bootcamp sehen, kostenlos für die Öffentlichkeit am Samstag. Es beginnt um 15:00 Uhr und endet um 16:00 Uhr. Das ist so ziemlich unsere Listenseite fertig, aber vielleicht möchten wir eine Seite für jedes einzelne Ereignis erstellen. Dafür müssen wir eine.item Datei erstellen. Bevor wir das tun, möchte ich jedoch alle Titel in unserem Angebot verknüpfen , um zu diesem einzelnen Artikel auf Klick zu gehen. Lasst uns das jetzt machen. Ich werde den Titel in ein Tag einbinden und das Attribut, nach dem wir suchen, ist wie immer FullURL. Ich werde darauf „Speichern“ drücken. Aktualisieren Sie hier drüben. Nun können Sie sehen, dass der Titel mit dem einzelnen Ereignis verknüpft ist. Wenn ich darauf klicke, sehen Sie, dass ein Fehler vorliegt. Das liegt daran, dass wir diese Seite noch nicht erstellt haben. Wir gehen hierher zurück. Lassen Sie uns tatsächlich events.item erstellen. Damit events.item es einfach hält, werde ich diesen Code direkt hier kopieren. Was wir tun müssen, ist herauszufinden , auf welches Objekt zu zoomen, um all diese Attribute zu erhalten. Das wird noch nicht funktionieren, aber was ich tun werde, ist, dass wir wie immer die JSON-Datenschicht in der Konsole protokollieren, damit wir sehen können, in welches Objekt wir zoomen müssen. Ich werde hier drüben aktualisieren und wieder auf diesen Titel klicken. Jetzt können Sie sehen, dass wir diesen Fehler nicht mehr haben. Das liegt daran, dass wir unsere Item-Datei haben. Hier unten können Sie sehen, dass wir wieder ein sekundäres Objekt haben, und dies ist das Objekt, das durch die Datei events.item kommt. Schauen wir uns da rein. Sie können auf das Sammlungsobjekt klicken. Das Auflistungsobjekt stellt jedoch die übergeordnete Auflistung dar. Hier ist in diesem Element Objekt das eigentliche Ereignis selbst. Das ist das Objekt, auf das wir mit unserem JSON-T hineinzoomen möchten . Wir müssen nur all dies in einen JSON-T-Code umschließen. Wir werden das Element mit unserem Abschnitt-Tag vergrößern. Ich werde die Verschachtelung dort reparieren. Lassen Sie uns die Seite hier aktualisieren. Sie werden sehen, dass wir genau die gleichen Informationen haben. Da wir bereits auf der Seite sind, können wir den Link hier entfernen, weil er gerade zu sich selbst verlinkt. Aber natürlich werden wir es hier auf der Liste behalten. Aktualisieren Sie hier drüben. Wie Sie sehen können, ist unsere individuelle Event-Seite etwas anders, wenn ich einfach auf diesen Link klicke, auf unsere Event-Seite, da der Link fehlt. Aber natürlich ist es nicht besonders offensichtlich, der Unterschied zwischen den beiden, weil sie beide den gleichen Inhalt zeigen. Was ich tun werde, ist ein weiteres Ereignis hinzuzufügen und wir können sicher sehen , dass diese Seite eine Liste aller Ereignisse zeigt. Ich werde hier hineingehen, eine Veranstaltung für einen kommenden Mittwoch erstellen, der ein Yoga-Seminar sein wird, das von Mary veranstaltet wird. Der Inhalt wird lauten : „Mary wird euch alles über Yoga erzählen.“ Klingt wunderschön. In Ordnung. Drücken Sie „Speichern“ und veröffentlichen Sie darauf. Wenn wir hier rüber gehen, es wahrscheinlich nicht angezeigt, weil wir den Server aktualisieren müssen. Leider müssen wir hier runter gehen, „Control C“, aktualisieren Sie den Server, und dann sollten wir beginnen zu sehen die neuesten Änderungen kommen durch auf unserer lokalen Version. Da gehst du. Es hört auf Port 9.000. Ich werde bei Ihnen einchecken, sobald das Laden beendet ist. Sobald die Seite geladen wurde, können Sie sehen, dass unsere Veranstaltungsseite tatsächlich eine Auflistung ist und wir alle Veranstaltungen in unserer Veranstaltungssammlung hier aufgelistet haben . Wenn ich auf einen klicke, sehen Sie, dass wir auf die Artikelseite für dieses Ereignis gehen. Es werden nur die Informationen für dieses Element oder für dieses Ereignis angezeigt. Wenn wir zum Saturday Bootcamp zurückkehren, können Sie sehen, dass es das gleiche Verhalten tut. Wie Sie sehen können, ist dies ein Beispiel für eine Sammlung. Ich weiß, es sah besser aus, die Systemsammlungen zu verwenden. Wenn Sie das Aussehen aus der Systemsammlung nicht anpassen möchten, müssen Sie dies oft nicht tun. Aber wenn Sie dies auf eine andere Art und Weise präsentieren möchten, erhalten Sie die volle Kontrolle über die Angebotsseite und die Artikelseite, erhalten Sie die volle Kontrolle über die Angebotsseite und die Artikelseite, dann ist dies, wie Sie es tun. Sie tun dies, indem Sie in Ihren Code gehen, in Ihren Collections Ordner gehen, eine events.conf-Datei eine events.list-Datei und eine events.item-Datei erstellen. Natürlich ist das Ereigniswort hier austauschbar mit jeder Art von Sammlung, die Sie machen. Aber da das alles gut ist, können wir diese Konsolenprotokolle jetzt entfernen, da sie Probleme auf unserer Squarespace-Website, der Live-Version, verursachen könnten . Lassen Sie uns tatsächlich hier reingehen, git add, git commit und git push, damit wir diese Änderung auf unsere Live-Squarespace-Website schieben können. Wir können hier setzen „Ereignisliste und Elementdateien hinzufügen.“ Wir werden das git schieben. Wir gehen auf unsere Squarespace-Website im Admin. Wie Sie sehen können, haben wir jetzt das Format, das wir in unserer Liste und Artikeldatei eingerichtet haben. Ich werde Ereignisse verschieben, vorbei an dem Blog. Da hast du es. Wir haben unsere eigene Custom Kollektion. Wir haben die volle Kontrolle darüber, wie es auf der Seite präsentiert wird. Jetzt ist es an der Zeit, sich den letzten Teil des Diagramms anzusehen, die statische Seiten sind. Wir sehen uns in diesem Video. 12. Eine statische Seite hinzufügen: In dieser Lektion werden wir die Squarespace-Vorlagenstruktur abdecken , indem wir statische Seiten betrachten. Statische Seiten sind ziemlich einfach, es ist nur eine hartcodierte Seite, in unserem Squarespace-Admin, wenn wir eine normale Seite hier erstellen, lassen Sie es einfach als neue Seite. Ich kann hier klicken und Sie haben dieses Feld für Seiteninhalte, Sie haben Einstellungen und Sie haben Bearbeiten. Jetzt habe ich Zugriff auf den Seiteneditor und ich kann Seiteninhaltsblöcke hinzufügen. Wir haben eine statische Seite, Sie haben keinen Zugriff auf diesen Seiteninhalt-Editor. Stattdessen, was Sie haben, ist nur eine Seite ohne Optionen für Anpassung und der gesamte Code, der in dieser Seite geht, wird in einer Punkt-Auslagerungsdatei gespeichert. Jetzt oben in meinem Kopf kann ich mir nicht viele Beispiele vorstellen, in denen Sie eine statische Seite verwenden möchten, anstatt eine normale Seite zu verwenden weil Sie selbst in der normalen Seite benutzerdefiniertes HTML einfügen können, aber vielleicht gibt es eine Situation, in der Sie die Seite nur im Code schreiben möchten, möchten Sie nicht den Squarespace-Admin dazu verwenden oder Sie möchten Admin-Benutzer daran hindern, eine Seite zu bearbeiten, dann wird die statische Seite die Option für Sie sein. Was ich in dieser Lektion tun werde, ist eine statische Seite mit einem eingebetteten Kalender zu erstellen , und wir können sehen, wie die statische Seite funktioniert, lassen Sie mich in Visual Studio-Code oder den Code-Editor gehen, den Sie verwenden, und hier müssen wir eine neue erstellen Verzeichnis namens Seiten, werde ich das jetzt tun, neue Ordnerseiten. Jetzt innerhalb dieses Seitenverzeichnisses, lassen Sie uns eine neue Datei erstellen und unsere statische Seite wird der Zeitplan der Klassen sein. Stellen Sie sicher, dass Sie die Punkt-Seite am Ende setzen, und um unsere Seite zu begleiten, was wir tun müssen, ist eine weitere Datei mit timetable.page.conf einzurichten. In dieser COM-Datei ist es sehr einfach, wir werden nur zwei Schlüsselwertpaare einfügen. Der erste ist Titel, also werde ich diesen Zeitplan nennen, und der zweite wird eine Beschreibung sein, ich werde einen Kalender aller unsere Klassen setzen, cool. Jetzt weiß der Squarespace-Administrator, wie er die Seite aufrufen soll, und er wird auch Squarespace eine Beschreibung geben. Hier in unserer Zeitplan Punkt Seite Datei, werde ich in eine h1 mit Sammlung Punkt Titel setzen. Denken Sie daran, dass für die meisten Seiten auf Squarespace die Informationen für die Seite im Sammlungsobjekt gespeichert sind. Nachdem wir diese Überschrift erstellt haben, möchten wir, dass diese Seite als Option in unserem Squarespace-Admin erscheint. Dafür wissen Sie, was wir tun müssen, wir müssen diese Änderungen tatsächlich zu Squarespace schieben, hier unten, werde hinzufügen, um diese Änderungen dem Commit hinzuzufügen, git commit, fügen Sie eine statische Seite für den Zeitplan hinzu. Dann git push, und nachdem der Push abgeschlossen ist, können wir hier zu unserem Squarespace-Admin gehen, aktualisieren. Sobald die Seite neu geladen wurde, können wir in unserem nicht verknüpften Abschnitt nach unten schauen und wir werden diese Seite hier namens Stundenplan sehen, wenn ich darauf klicke, können Sie sehen, dass wir gerade den Namen der Seite haben, die Zeitplan ist. Wir wissen, dass dies eine statische Seite ist, weil Nummer eins wir sehen können, dass das Symbol ein gepunktetes Feld ist, und auch wenn wir auf diese statische Seite klicken, öffnet es kein Panel für uns, um irgendwelche Änderungen zu erstellen , weil es eine vollständig statische Seite. Lassen Sie uns das hier in die Navigation verschieben, ich werde es nach Ereignissen setzen und jetzt können wir Code schreiben, den wir drinnen wollen, es gibt nichts wirklich Lust, mit dem Squarespace-Admin los, wir werden nur schreiben Sie eine Seite, wie wir normalerweise würden, als Beispiel dafür, was wir auf dieser Seite setzen können, werde ich einen Kalender mit diesem Zeitplan für die Klassen einbetten. Dies ist direkt aus Google Kalender kommen, wenn Sie einen Google-Kalender selbst einbetten möchten, schauen Sie auf jeden Fall nach, wenn ich auf Speichern drücken, aktualisieren Sie unsere Seite, nicht auf unserer veröffentlichten Website, sondern lokal. Ich kann auf Zeitplan klicken und Sie können sehen, dass wir den Zeitplan für Rucksack-Fitness haben, was der ursprüngliche Name des Fitness-Studios war, das hier oben kam. Natürlich, wenn wir möchten, dass diese Änderung auf unserer Website live geht, müssen wir diesen Code jedes Mal, wenn wir Änderungen vornehmen, drücken Er kommt nicht vom Squarespace-Admin, so dass er nicht auf unserer Squarespace-Website eingefügt wird, bis wir diesen Code drücken live, lassen Sie uns das jetzt tun, git add, git commit mit der Nachricht hinzufügen Inhalt zur Stundenplan-Seite und dann git push. Wenn wir nun auf unsere Live-Website zurückkehren, sollten wir die gleiche Änderung sehen, und da haben Sie sie. Wir haben den Sammlungstitel oder den Titel der Seite, die im Sammlungsobjekt ist , und wir haben diesen Kalender einbetten, egal wo wir klicken, wenn wir zurück zu ihm gehen, jedes Mal, wenn wir darauf im Admin klicken, Es gibt keine Optionen, die für uns erscheinen, um es zu bearbeiten , weil es eine völlig statische Seite ist, die wir hartcodierte Inhalte haben , die direkt aus dieser Punkt-Seitendatei kommt. Das ist im Grunde es Jungs, nicht viel zu statischen Seiten, es ist im Grunde, was Sie hier einfügen wollen, können Sie und es gibt keine spezielle Operation, es ist keine Sammlung, es ist keine Seite mit einem Editor für Sie, Inhaltsblöcke in, es ist nur eine sehr einfache, hartcodierte Seite. Nicht viele Instanzen, die ich mir vorstellen kann, in denen Sieeine statische Seite erstellen möchten, aber wenn Sie etwas erstellenwürden eine statische Seite erstellen möchten, aber wenn Sie etwas erstellen , das sehr codeintensiv war und nichts von Squarespace benötigt, ist admin, dann habe ich denken, dass es viel Sinn machen würde, aber für die meisten Benutzer können wir diese Einbettung genauso gut mit einer normalen Seite in Squarespace einfügen. Gehen Sie in Seiteninhalt bearbeiten und wir können einfügen, ich bin sicher, unsere Eisen HTML-Code oder einbetten. In diesem Fall nicht genau erforderlich, damit wir einen Google Kalender einbetten können, aber ich wollte Ihnen zeigen, wie Sie eine statische Seite erstellen, damit Sie wissen wie es geht und das dieses Diagramm genau hier abdeckt. Wie Sie gesehen haben, können wir diese visuelle Darstellung unserer Ordnerstruktur hier unten zuordnen, Blöcke, Sammlungen, Seiten und Regionen. Natürlich haben Sie auch hier Skripte und Stile, und das werden wir im nächsten Video abdecken. 13. Javascript, CSS und LESS: In dieser Lektion werden wir über Skripte und Stile sprechen. Zu Beginn werde ich alle meine offenen Editoren schließen, und dann gehen wir in unseren Stile-Ordner und schauen uns CSS und weniger an. Jetzt weniger ist ein CSS-Pre-Compiler. Wenn ich für weniger auf Google suchen und wir schauen auf die Website, die lesscss.org ist. Scrollen Sie nach unten und wir können sehen, dass weniger eine abwärtskompatible Spracherweiterung für CSS ist. Nun, wie es erwähnt, ist es abwärtskompatibel. Ich möchte nicht, dass Sie Angst haben, wenn Sie nicht weniger wissen, um CSS in diese Dateien zu schreiben. Wie Sie hier sehen können, gibt es einige Verschachtelungen. Es gibt die Verwendung des kaufmännischen Unds, das weniger Syntax ist, aber hier können Sie genau so gut sehen, dass dieser Code funktioniert hat, der reines CSS ist. Es ist abwärtskompatibel. Sie können einfach CSS direkt in Ihre Less-Dateien einfügen und es wird immer noch dieses CSS ausführen, aber wenn Sie wissen, wie Sie weniger nutzen können, und ich empfehle Ihnen definitiv, zu forschen, wie Sie weniger oder Sass verwenden. Sass ist eine andere, im Grunde das Gleiche steht für Syntactically Awesome Style Sheets, also ist es eine ähnliche Sache mit weniger und in der Tat ist eine Menge dieser Syntax die gleiche, wie die Verschachtelung und die kaufmännischen Unds. Ich würde auf jeden Fall empfehlen, Sass oder weniger zu lernen, und sie sind fast identisch. Es gibt nur ein paar Unterschiede, aber Sie müssen nicht weniger wissen, um Code in diesen Dateien zu schreiben und Sie müssen nicht weniger wissen, um Template-Entwicklung durchzuführen, aber sehr zu empfehlen und es ist da, falls Sie es verwenden möchten. Wir sind auf template.com Datei. Hier können wir base.less in unserer Reihe von Stylesheets sehen. Diese werden direkt aus dem Stile-Ordner gezogen, und wenn wir also mehr Stylesheets einschließen wollten, könnten wir einfach eine neue Less Datei innerhalb dieses Stile-Ordners erstellen. Zuallererst, bevor wir das tun, gehen in den Kopf in die Basis. Weniger und schauen wir uns etwas an , das wir daraus ziehen können und es in seinen eigenen Abschnitt legen können. Wie Sie hier sehen können, haben wir einen Abschnitt für Homepage, die im Grunde leer ist, aber wir haben einen Abschnitt hier für Blog-Liste. Dies könnte ein guter Kandidat sein, um es in einer anderen Datei zu platzieren. Wenn wir hier hineingehen und einen Blog.less erstellen, fügen wir das ein und drücken Speichern. Jetzt haben wir den Code für Blog in base.less, und solange die Bestellung korrekt ist, könnten wir hier in template.com eingehen und das dann nach base.less hinzufügen. Nach base.less werden wir in blog.less laden. Als ein besseres Beispiel, lassen Sie uns tatsächlich etwas bewegen, das offensichtlich ist, vielleicht unsere Kopfzeile und Navigation. Ich werde alles vom Site-Header hier nehmen, den ganzen Weg runter bis hierher. Ich werde das so schneiden, dass es in meiner Zwischenablage ist, gehen Sie hier rein und erstellen Sie eine header.less-Datei. Ich werde den gesamten Header-Code dort und zwischen meiner Basis und meiner Less-Datei einfügen, ich werde header.less einfügen, damit Code immer noch in meiner Vorlage enthalten ist. Wenn ich hier zu meiner lokalen Version gehe und ich die Seite ausführe, haben Sie einen internen Serverfehler, also müssen wir das noch einmal tun, wo wir den derzeit laufenden Prozess mit Kontrolle C auf einem Mac abbrechen und unseren Server erneut ausführen. Nachdem unser Server erneut ausgeführt wurde, und wir die Seite aktualisieren, sollten wir anfangen zu sehen, dass es keine Änderungen gibt. Wie Sie sehen können, nachdem wir die Seite neu geladen haben, können wir sehen, dass unser Header genau gleich ist, und wenn wir hineingehen und inspizieren, können wir immer noch Stile sehen, die auf den Seitenkopf angewendet werden. darauf klicken, können Sie hier sehen, dass es in einer kompilierten CSS-Datei namens Site.css durchkommt . Dies geschieht alles auf dem Back-End für uns, ohne etwas anderes tun zu müssen, als die Liste der Stylesheets in unserem Stylesheets-Array hier einzurichten, und stellen Sie sicher, dass dies den Dateien in unserem Style-Ordner korrekt zugeordnet ist. Squarespace ist großartig in dem Sinne, dass es all dies nehmen wird, es zusammenstellen und in eine Datei einfügen wird, die wir in unser Projekt laden werden. Natürlich müssen wir unsere weniger und CSS-Dateien nicht aufteilen, aber wir können, wenn wir wollen, und der Vorteil, sie aufzuteilen , besteht darin, unsere Code-Beta zu organisieren. Wenn wir viel CSS und weniger haben, können wir zu den verschiedenen Dateien gehen und den Code für Header finden, den Code für Blog finden und Basis-Styles hier herausfinden. nun auf Skripte gehen, Wenn wirnun auf Skripte gehen,wenn wir unser eigenes JavaScript ausführen wollten, können wir hier oder hier eine neue Datei erstellen, wir könnten einfach site.js verwenden, aber lassen Sie uns eine neue Datei erstellen und nennen Sie es custom.js. In dieser custom.js werde ich den guten alten Hello World Alert tun , nur um zu zeigen, dass es funktioniert. Lassen Sie uns das speichern, aktualisieren Sie die Seite und wir sollten erwarten, dass die Warnung noch nicht funktioniert, weil wir sie noch nicht in unseren Code gebracht haben. Ich werde noch einmal in die Squarespace-Dokumentation gehen und Ihnen zeigen wie wir ein benutzerdefiniertes JavaScript in unsere Vorlage einbringen können. Ich muss nur zu developers.squarespace.com, Template-Docs gehen , und hier unten können Sie einen Link für benutzerdefiniertes JavaScript sehen. Hier können Sie sehen, dass wir in benutzerdefiniertem JavaScript mit dem Skript-Loader laden können. Wenn ich nur eine von ihnen kopiere und einfüge, und sagen wir, wir wollen es nur auf der Stundenplanseite ausführen. Nun, wir würden diesen Code nur in die Stundenplanseite einschließen. Sie müssen nur diesen Dateinamen ändern, um mit der neuen JavaScript-Datei übereinzustimmen, die wir im Ordner Scripts erstellt haben, und jetzt, wenn wir die Zeitplanseite laden, sollten wir beginnen, die Warnung durch zu sehen. Da gehst du hin. Unser lokaler Gastgeber 9 Tausend sagt hallo Welt, wir können auf OK klicken und der Rest der Seite lädt. Da hast du es. Wir führen jetzt diese benutzerdefinierte js auf dieser bestimmten Seite aus, und das ist wirklich praktisch, denn wenn wir zu einer anderen Seite gehen wollen und wir nicht wollen, dass dieser Code ausgeführt wird, ist das einfach zu tun. Wir können es so machen, dass diese JavaScript-Datei nur dort lädt, wo wir sie in die Vorlage aufnehmen und alles wird schön auf dem Back-End durch Squarespace gebündelt. Wir müssen uns keine Sorgen darüber machen, dass all diese JavaScript-Dateien herumschweben. Squarespace wird es kompilieren und die Assets für uns verwalten. Da habt ihr es, Leute. Wir haben gerade unser eigenes CSS und unsere eigenen JavaScript-Dateien in unser Template aufgenommen. Sehr einfach zu tun, wenn Sie wissen, wie man es einbringt, im Fall mit CSS, alles, was Sie tun müssen, ist die Datei hinzuzufügen und sie dann dem Stylesheet-Array hinzuzufügen. Im Fall von JavaScript müssen Sie nur diese JavaScript-Datei hinzufügen und dann das Tag verwenden, das wir gerade hier gesehen haben, um dieses Skript in den Teil dieser Vorlage zu bringen, den wir wollen. Sehr einfaches Zeug. In der nächsten Lektion werden einige der anderen Features von Squarespace-Vorlagen behandelt , die interessant sind, einschließlich offener Blöcke, benutzerdefinierte Abfragen, Vorlagenanmerkungen und Optimierungen. Ich freue mich darauf, Sie im nächsten Video zu sehen. 14. Offene Blockfelder, benutzerdefinierte Abfragen, Vorlagenkommentare und Tweaks: Leute, in dieser Lektion werden wir einige der anderen Funktionen von Squarespace-Vorlagen behandeln , die meiner Meinung nach besonders interessant und nützlich sind. Sie öffnen Blöcke, benutzerdefinierte Abfragen, Vorlagenanmerkungen und Optimierungen. Ich weiß, das klingt viel, aber jeder von ist ziemlich einfach, also sollte es nicht zu lange dauern, um alle vier durchzugehen. Um zu beginnen, was ich tun werde, ist dieses JavaScript loszuwerden , das wir in der letzten Lektion erstellt haben. Wir brauchen nicht wirklich eine JavaScript-Datei, die eine Hölle der Welt. Ich werde das einfach entfernen. Wir können weniger Dateien aufheben , oder wir können zurückkehren, wie sie vorher waren, bis zu Ihnen. Aber für mich werde ich es einfach so belassen, wie es ist und schauen wir uns die erste dieser Funktionen an, über die ich in dieser Lektion sprechen möchte, die offene Blöcke ist. Wir werden auf die Dokumentation in dieser Lektion verweisen. Gehen wir zurück zu der Dokumentation, die auf developers.squarespace.com ist. Dann klicken Sie auf diesen Menüpunkt für Template Docs. Wenn wir nach unten scrollen, können wir das Open Block Field sehen. Ich werde darauf klicken und hier können Sie lesen, was ein offenes Blockfeld ist. Offene Blockfelder sind offene Bereiche in einer Vorlage, von einem Entwickler bereitgestellt wird, in dem ein Benutzer einen beliebigen Systemblock hinzufügen und dasselbe LayoutEngine, rasterbasierte Layout-System verwenden kann , das in Seiten und Blogbeiträgen verwendet wird. Offene Blockfelder sind ideal für Site-Fußzeilen und Blog-Sidebars. Ich denke, das ist eine ziemlich gute Beschreibung, aber um vollständig zu verstehen, was hier vor sich geht, lasst uns einfach den Code packen und ihn in unsere Vorlage werfen und sehen, was passiert, okay? Ich werde es tatsächlich in die Vorlagenseite werfen hier. Das wird für uns am einfachsten zu sehen sein, und da dies den Squarespace-Admin beeinflussen wird, muss ich diesen Code schieben. Ich werde sagen, git add, git commit. Denken Sie daran, dass wir weniger Dateien herumgerissen haben, also werde ich das auch in die Commit-Nachricht einfügen, einige weniger Dateien auflösen und ein offenes Blockfeld hinzufügen. Es wird das drängen. Laden wir nun unsere Squarespace-Website auf. Stellen wir sicher, dass wir auf der Stundenplanseite sind und scrollen wir unter diesem Stundenplan Kalender einbetten. Was ich möchte, dass du siehst, wenn wir hier unten schweben, heißt es Region #blockField1 und hat einen Editier-Button. Dies ist ein offenes Blockfeld und was es uns erlaubt, ist auf Bearbeiten zu klicken und wir erhalten die gleiche Benutzeroberfläche, die wir für die Erstellung einer Seite erhalten , aber wir können Inhaltsblöcke einfügen, wo immer wir wollen, solange wir eine offene Blockfelder definiert haben. Ich kann hier reingehen und wir können ein Video einbetten. Stattdessen werde ich in ein bisschen wie ein Gitter setzen. Ich kann einige Bilder hochladen, die ich bereit habe zu gehen. Ich habe vergessen, diese Bilder für das Web zu optimieren, so dass sie wahrscheinlich ein wenig Zeit brauchen, um hochzuladen. Wir werden das schnell vorwärts bringen. Da habt ihr es, Leute, ich habe gerade einen Rasterinhaltsblock zu diesem offenen Blockfeld hinzugefügt. Ich kann eine beliebige Anzahl von Blöcken hier hinzufügen, genau wie ich es auf einer Squarespace-Seite tun würde, kann ich auf Speichern drücken und jetzt ist das ein Teil meiner Seite. Sehr cool, wie es in der Dokumentation erwähnt wird, können wir es in unsere Fußzeile einfügen. Es ist auch gut, in eine Sidebar zu setzen, wenn Sie eine Sidebar zu Ihrer Website hinzufügen möchten, so könnten wir hier einen Abschnitt haben und wir könnten dem Admin-Benutzer erlauben, hierher zu kommen und verschiedene Blöcke hinzuzufügen. Sehr coole Funktion von Squarespace genau hier. Dieses BlockedField1 entspricht direkt dem, was wir hier geschrieben haben. Ich habe den Namen nicht geändert, weil dies nur ein Beispiel ist, aber wir wollen dem einen schönen Namen geben. Vielleicht würden wir sagen, Stundenplan Seite unten oder einfach, dass ein bisschen schöner. Aber das ist im Wesentlichen ein offenes Blockfeld. Beim nächsten Feature möchte ich Ihnen zeigen, was eine benutzerdefinierte Abfrage ist. benutzerdefinierte Abfragen ermöglichen es uns, Daten aus anderen Teilen der Vorlage zu übernehmen und sie überall dort zu bringen, wo wir wollen. Wenn ich hier nach unten scrollen und klicken Sie auf „Custom Query Tag“ auf diesem Squarespace Tags, Sie können sehen, dass wir, zum Beispiel, auf jeder Seite in Squarespace Vorlage sein und Blogbeiträge aus einem bestimmten Blog bringen. Lassen Sie mich die Seite Ereignisse als Beispiel verwenden. Wir haben unsere Event-Seite hier drüben. Lassen Sie uns diese Ereignisse in unsere Zeitplanseite einbringen. Gehen wir zurück zu hier, lassen Sie uns ein weiteres h2 und wir können kommende Veranstaltungen sagen. Darunter werden wir ein Abfrage-Tag einfügen. Ich werde diesen Beispielcode direkt hier kopieren und einfügen. Im Inneren werde ich die Sammlung über ihre ID auswählen. Ok, woher haben wir diesen Ausweis? Nun, lassen wir das einfach vorerst rein und gehen wir zu unserer Veranstaltungssammlung. Wir gehen in events.list, und lassen Sie uns dieses Skript-Tag wieder hinzufügen, was es uns ermöglicht, den JSON-Kontext zu konsolen. Wir werden das speichern und dann gehen wir zu unserer Event-Seite auf unserer lokalen Version. Öffnen wir unsere Entwicklertools gehen Sie in die Konsole. Ich werde das zweite Objekt öffnen. Dann werde ich hier in diese Sammlung Objekte gehen und nach U-R-L-I-D suchen . Nicht diese ID mit einem seltsamen Satz von Zeichen, aber urlid. Es sollte die gleiche wie die Schnecke sein. Slug, was den Teil nach dem Schrägstrich hier in der URL bedeutet. Ich werde den Drang nehmen, alles, was ich tun muss, ist das zu kopieren, was Ereignisse sind und wir können dieses Skript-Tag jetzt loswerden. Gehen Sie zurück in unsere timeable.page Datei und dann wissen wir, um die Ereignissammlung zu adressieren. Dann werden wir diesen wiederholten Abschnitt entfernen und wir werden ihn durch den Code in events.list ersetzen. Wiederholter Abschnitt kommende, gehen, um das zu nehmen. Im Grunde, was dieses Tag tut, ist, den exakt gleichen Kontext wie hier zu erstellen. Wir können einfach kopieren und fügen Sie den Code in Wort für Wort. Reparieren Sie einfach die Verschachtelung dort, speichern Sie die Seite. Gehen wir zurück zum Browser und klicken Sie auf den Timetable Link. Wenn ich jetzt nach unten scrolle, haben wir das Raster, das aus dem Open Block Field kam , und wir haben hier unten kommende Veranstaltungen. Leider wird dies nicht angezeigt, also was wir tun werden, ist sicherzustellen, dass der richtige Kontext durchkommt. Sieht so aus, als hätten wir hier wahrscheinlich einen kleinen Fehler gemacht. Aber natürlich können wir immer das Konsolenprotokoll verwenden , um herauszufinden, was mit JSON Data Layer vor sich geht. Und wenn es jemals irgendwelche Probleme wie diese gibt, liegt dies normalerweise daran, dass wir nicht auf die richtigen Objekte im JSON-Kontext abzielen. Aktualisieren der Seite und ich öffne gleichzeitig meine Entwicklerkonsole. Gehen Sie hier in das zweite Objekt und Sie können hier sehen , dass das Array, nach dem wir suchen, in der Tat Elemente ist, die nicht kommen. Der Kontext ist nicht genau der gleiche wie hier drüben in dem Sinne, dass wir kein bevorstehendes Array haben , wir haben nur alle Ereignisse als Elemente in unserem Items Array. Okay, das ist alles, was wir brauchen, um hier zu reparieren, ist statt Abschnitt, kommende Artikel. Ich denke, wir können unser Konsolenprotokoll jetzt loswerden, ziemlich zuversichtlich, das wird funktionieren. Dann können wir hierher zurückkehren und die Seite aktualisieren. Schließen Sie dies und Sie können sehen, dass wir Daten aus unserer Ereignissammlung in diese statische Seite eingebracht haben , und wir können dies auf jeder Seite tun, die wir wollen. Benutzerdefinierte Abfragen, das ist, was sie tun. Sie bringen Daten aus anderen Teilen unserer Squarespace-Vorlage ein und ermöglichen es uns, mit diesem JSON-Kontext zu arbeiten. Als nächstes werden wir über Vorlagenanmerkungen sprechen, die nicht zu lange dauern sollten. Vorlagenanmerkungen sind ziemlich einfach. Wenn ich wieder in meinen Squarespace-Admin gehe und den Mauszeiger über den Site-Titel führe, kannst du sehen, dass dieses Feld hier erscheint. Wenn ich auf Bearbeiten klicke, passiert es mich aus dem Seitenbereich des Admins und in den Designbereich, wo ich den Website-Titel aktualisieren kann. Sie können es als eine Verknüpfung zum Bearbeiten von Teilen Ihres Inhalts vorstellen, und der Website-Titel ist ein großartiges Beispiel etwas, das in mehreren Bereichen Ihrer Website existiert, aber an einer Stelle im Admin bearbeitet wird. Dies ist ein perfektes Beispiel. Lassen Sie mich Ihnen zeigen, wie das im Code aussieht. Wenn wir in unsere header.region Datei gehen und wir für den Website-Titel suchen, können Sie hier sehen, dass wir dieses Attribut hier von Daten-Content-Feld gleich Website-Titel haben. Wenn ich das tatsächlich wegnehmen und diese Änderung auf unsere Squarespace-Website schieben sollte, git add, git commit, also haben wir hier zwei Änderungen vorgenommen. Fügen Sie benutzerdefinierte Abfrage hinzu, entfernen Sie Vorlagenanmerkungen für Websitetitel, und schieben Sie diese dann, damit die Änderung sich auf unsere Live-Website auswirkt. Dann gehe ich zurück zu unserem Admin. Beachten Sie, dass dieses Feld nicht angezeigt wird, wenn die Seite aktualisiert wird und ich den Mauszeiger über meinen Titel führe. Es bedeutet nicht, dass ich den Website-Titel nicht bearbeiten kann, ich kann immer hier rein gehen und hier gehen, um meinen Website-Titel zu ändern. Ich kann es den Namen nennen, den ich im Sinn hatte, Backyard Gym, und wenn ich auf „Speichern“ klicke, wird es diesen Titel noch aktualisieren, aber die Abkürzung, um zu diesem Teil in Ihrem Admin zu gelangen, ist jetzt weg. Also empfehle ich nicht, das zu tun. Es ist besser, diese Anmerkungen dort zu behalten. Aber wenn Sie erfahren möchten, welche anderen Anmerkungen Sie in Ihrer Vorlage verwenden können, wieder in Squarespace-Dokumentation und hier unten unter Erweitert, können Sie sich Vorlagenanmerkungen ansehen. Hier können Sie Website-Titel, Hauptinhalt, Navigation, verbundene Konten, Titel sehen. Dies sind alle Beispiele für Vorlagenanmerkungen. Diese sollten standardmäßig in voll funktionsfähigen Vorlagen enthalten sein. Aber wenn Sie Ihre eigene Vorlage entwickeln, ist dies wichtig, dass Sie diese Vorlagenanmerkungen in Ihren Elementen verknüpfen sollten. Schließlich ist das letzte Feature eine CSS-Optimierung. Ich gehe hier nach unten und direkt unter Template Annotations ist Style Editor. Nun, das ist ein bisschen komplexer und wir werden nicht alle Möglichkeiten in dieser Lektion näher eingehen , aber ich wollte Ihnen zeigen, dass wir das haben, was man den Style-Editor in Squarespace nennt, und wir können tatsächlich was als Tweaks an unseren LESS-Dateien bezeichnet wird, und das ermöglicht es uns, die Option hinzuzufügen, einige der Stile, die wir in unseren LESS-Dateien eingerichtet haben, in unseren Squarespace-Admin zu ändern . Lassen Sie uns zunächst in unseren Squarespace-Admin gehen. Lassen Sie uns in Design gehen und gehen Sie in Site-Stile. Hier können Sie sehen, wann es für dieses Bild Block Poster geladen wird. Wenn ich auf eine andere Seite gehen sollte, nun, es lässt mich nicht auf eine andere Seite gehen, aber im Grunde sind dies die einzigen Verbesserungen, die wir uns zur Verfügung haben. Wir können hier reingehen und die Textfarbe hier in Grün ändern. Aber im Grunde können die anderen Stile innerhalb unserer Vorlage nicht geändert werden. Ich bin nicht bereit, diese grüne Farbe zu verpflichten, also werde ich dieses kleine x drücken , um daraus abzubrechen. Stattdessen werde ich eine Optimierung zu einer unserer LESS-Dateien hinzufügen, damit wir diesen Stil innerhalb des Stil-Editors steuern können. Gehen wir zurück zur Dokumentation hier und wir können uns die Syntax ansehen. Einer der, die ich hier mag, ist diese Seitenbreite, also werde ich die Variablendefinition hier sowie diese obigen Kommentare kopieren , ich werde das kopieren. Gehen wir in die Basis. Weniger und lassen Sie es uns hier setzen. Wie Sie sehen können, ist die Optimierung, der Teil, der dies zu einer Optimierung macht, eigentlich nur ein LESS-Kommentar, dieser Strich, Bindestrich macht dies zu einem Kommentar, so dass es technisch nicht in Ihrem CSS ausgeführt wird, aber Squarespace wird dies als Tweak und es wird es zum Site-Editor hinzufügen. Hier können Sie sehen, dass wir gerade das Schlüsselwort mit einem Doppelpunkt dahinter haben, und dann haben wir ein Objekt mit ein paar Schlüsselwertpaaren. Wir haben Typwert, Titel, Seitenbreite und einen min und max Wert. Was ich tun werde, ist es dem Admin-Benutzer zu erlauben, die Breite unseres Seitencontainers zu ändern. Ich werde hier reingehen, dies auf einen Standardwert dessen setzen, was wir hier unten haben, der 1.140 ist, und dann ersetzen wir den hartcodierten Wert hier unten durch die Variable. Dies ist eine LESS-Syntax, aber im Grunde stellt das at Symbol eine Variable dar, also wird alles, was dies ist, direkt hier eingefügt. Aber natürlich haben wir unsere Optimierung oben, so dass es uns erlaubt, es zu bearbeiten und ich werde das Minimum auf, sagen wir, 900 und das Maximum sollte auf 2.000 gesetzt werden. Dies sind willkürliche Zahlen. Du kannst hier reinbringen, was du willst. Ich werde diesem nur einen beschreibenden Namen der Seitencontainerbreite geben. Ich werde auf „Speichern“ drücken, und natürlich, weil wir eine Tweak erstellen, was etwas ist, das wir in unserem Admin erscheinen wollen, müssen wir diese Änderung auch auf unsere Live-Website schieben. Ich werde hier reingehen, wieder, Sie sollten damit inzwischen sehr vertraut sein, es mehrmals in dieser Klasse gemacht haben. Git add, git commit, fügen Sie unsere erste zwicken, da gehen wir, git push, und nachdem das geschoben wird, lassen Sie uns unseren Style-Editor hier aktualisieren. Hier können Sie unter Größe und Werte sehen, wir haben Seite Containerbreite. Ich weiß nicht, ob wir hier zu einer anderen Seite navigieren können, während wir im Style-Editor sind. Aber lassen Sie mich einfach die Adresse der Website nehmen und sie in einem neuen Tab öffnen. Lassen Sie mich es hier rüber ziehen. Lassen Sie uns auf eine andere Seite gehen, die tatsächlich den Website-Container hat, jede andere Seite als die Homepage. Lassen Sie uns auf den Behälter klicken, überprüfen Sie ihn, und wie Sie sehen können, beträgt die Breite des Containers 1140. Es ist hier oben. Sobald ich meinen Cursor dorthin bewegt, kann man ihn nicht mehr sehen, aber man sollte sehen können, dass der blaue Bereich 1140 Pixel beträgt. Gehen wir in unseren Style-Editor und lassen Sie uns das auf 1000 Pixel beschränken. Sie können hier sehen, dass es sich bereits auf den Header auswirkt. Wir können sehen, dass das live funktioniert. Ich werde auf „Speichern“ drücken. Lassen Sie uns diese Blog-Seite aktualisieren, und Sie können jetzt sehen, wenn wir diesen Website-Container wieder betrachten, wird es auf die Breite von 1000 beschränkt. Was wir gerade getan haben, ist, dass wir einen Standardwert für den Seitencontainer in unserer LESS-Datei eingerichtet haben, aber dann haben wir hier auch eine Optimierung hinzugefügt, die es dem Admin-Benutzer ermöglicht, diesen Wert zu bearbeiten. Dies ist eine weitere wirklich coole Funktion von Squarespace-Vorlagen. Wir können durch unsere CSS- oder LESS-Dateien gehen und diese Verbesserungen hinzufügen , um dem Admin-Benutzer mehr Kontrolle über den Stil ihrer Vorlage zu ermöglichen. Tweaks wie diese ermöglichen dem Admin-Benutzer mehr Kontrolle über die Website, ohne in den Template-Code graben zu müssen. Sie werden feststellen, dass auf vielen voll funktionsfähigen Vorlagen, gibt es viele Verbesserungen zur Verfügung und der Admin-Benutzer hat viel Kontrolle darüber, wie seine Vorlage aussieht und sich anfühlt. Aber für unsere Zwecke mit dieser Space-Vorlage haben wir noch keine Verbesserungen Wenn wir also eine Vorlage von Grund auf neu entwickeln würden, müssten wir alle Anpassungen selbst einbauen. In der nächsten Lektion werden wir uns tatsächlich eine dieser voll ausgestatteten Vorlagen ansehen, und wir werden Live-Beispiele für Verbesserungen sehen. Aber jetzt, da Sie wissen, wie Sie Ihre eigenen Anpassungen erstellen, können Sie diese Vorlagen jetzt ändern, um Optimierungen zu entfernen oder Ihre eigenen Anpassungen über die bereits verfügbaren Anpassungen hinzuzufügen, und mit denen Sie eine voll funktionsfähige Vorlage, mit der Sie Dinge ändern können , ohne langfristig in Code eingraben zu müssen. Das deckt alle Hauptmerkmale ab, über die ich in der heutigen Klasse sprechen wollte. Aber in der nächsten Bonusstunde werden wir uns eine komplexere Vorlage ansehen. Wir werden uns wahrscheinlich einen realistischeren Ausgangspunkt ansehen, etwas, an dem Sie bereits gearbeitet haben, eine Vorlage, die Sie auf der Squarespace-Website ausgewählt haben, und jetzt möchten Sie einige Änderungen vornehmen. Nun, wir werden uns ein Beispiel dafür in der nächsten Lektion ansehen . Dann werden wir uns einpacken. Wir reden über das Klassenprojekt und ich werde euch auf den Weg bringen. Fast am Ende hier Jungs. Ich danke Ihnen für das Aufsehen bis zu diesem Punkt, und ich sehe Sie im nächsten Video. 15. Bonus: Eine komplexere Vorlage bearbeiten: In dieser Klasse haben wir diese Squarespace-Basisvorlage verwendet. Ich habe diese Basisvorlage verwendet, weil ich denke, dass es ein guter Ausgangspunkt ist, um die Template-Entwicklung zu lernen , und ich würde auch empfehlen sie zu verwenden, um Ihre eigenen benutzerdefinierten Vorlagen zu entwickeln. Ich vermute jedoch, dass Sie die meiste Zeit eine vorhandene Vorlage bearbeiten möchten. Wahrscheinlich einer von denen, die zuerst mit Squarespace kommen. diesem Grund werden wir in dieser Bonusstunde eine vorhandene Vorlage anpassen. Nur ein Haftungsausschluss hier Jungs, das wird ein bisschen aus der Manschette sein, weil ich nicht zu viel im Voraus geplant habe, was wir tun werden, aber deshalb ist es ein bisschen wie ein Bonusvideo. Wir werden eine Vorlage auswählen und dann werden wir mit einer Bearbeitung kommen es ausführen und Sie können eine kleine Zusammenfassung unseres Workflows sehen. Dies wird eine kleine Einführung in die Bearbeitung der komplexeren Vorlagen, die Sie auf Ihrer Squarespace-Website ausführen könnten, bilden . Um loszulegen, gehen wir zu squarespace.com/templates, die wir finden können, indem wir einfach auf squarespace.com gehen und auf Vorlagen klicken. Hier können Sie die Liste aller dieser Designs sehen. Nun, eine Warnung, bevor wir direkt einspringen, ist, dass einige davon mit einer neueren Version von Squarespace erstellt wurden und Sie nicht in der Lage sind, den Entwicklermodus für einige von ihnen zu verwenden. Also nur ein weiterer Haftungsausschluss hier, dass einige von diesen, Sie können nicht den Entwicklermodus mit verwenden. Aber wenn wir nach unten scrollen, können Sie sehen, dass diese Vorlagen auf der neuesten Version von Squarespace sind, Suche nach Vorlagen aus einer früheren Version. Ich werde auf diese klicken. Hier können wir nach einer bestimmten Vorlage suchen. Ich gehe mit der Vorlage, die ich derzeit auf meiner Live-Website laufe, die Jasper heißt. Ich suche nach Jasper, und wenn ich es finde, klicke ich auf Start mit Jasper. Genau so haben wir eine neue Squarespace-Website mit ein bisschen Demo-Inhalt. Wie Sie sehen können, sieht es sehr ähnlich wie meine Live-Website, die ich Ihnen früher gezeigt habe, mein Foto- und Videografie-Portfolio, aber nur mit Demo-Inhalten. Zuerst gehen wir in Einstellungen, lassen Sie uns in den erweiterten Entwicklermodus gehen, und schalten Sie uns den Entwicklermodus ein, indem Sie auf diesen Schalter klicken, auf Weiter klicken, und bald genug haben wir den Entwicklermodus aktiviert und wir werden alle unsere Informationen direkt hier haben. Ich werde meine Lieblingsterminalanwendung öffnen, die für mich iTerm ist, für Sie auf einem Mac ist es wahrscheinlich Terminal und unter Windows Eingabeaufforderung. Ich werde die Dinge dieses Mal ein wenig einfacher für mich machen und ich werde den Vorlagenordner auf meinem Desktop legen. Ich werde das Schlüsselwort cd gefolgt von Desktop verwenden, und jetzt bin ich auf dem Desktop. Was ich tun kann, ist git clone auszuführen, die Git-Adresse hier zu kopieren, sie hier einzufügen, und jetzt wird es dieses Repository auf meinem Desktop klonen. Ich muss mich hier authentifizieren. Ich muss meinen Benutzernamen eingeben. Es ist ein bisschen schwer zu lesen, wenn es über eine Zeile geht. Da gehen wir. Das Passwort befindet sich in meiner Passwort-Management-App. Ich werde iTerm jetzt schließen und öffnen wir den neu erstellten Ordner in VS Code oder einem beliebigen Codierungs-Editor, den Sie verwenden möchten. Lassen Sie uns hier klicken für Ordner öffnen. Auf meinem Desktop können Sie hier sehen, dass es einen Vorlagenordner gibt. Ich klicke auf Öffnen und schließe den Begrüßungsbildschirm. Jetzt können wir unsere Template-Struktur durchlaufen und ein wenig darüber reden, was hier vor sich geht. Der erste Ordner ist ein Assets-Ordner. Wenn Sie mit der Webentwicklung vertraut sind, sollten Sie wissen, dass Assets Dinge wie CSS, JavaScript, Bilder und Symbole enthalten . Hier können Sie sehen, wir haben eine SVG Sprite, die alle verschiedenen Symbole hat, die wir in dieser Vorlage verwenden. Wir können unsere eigenen Icons und Bilder einfügen , die innerhalb der Vorlage direkt hier in Assets verwendet werden. Hier, innerhalb von Blöcken können wir eine Reihe von Blöcken sehen. Diese Vorlage verwendet tatsächlich viele Blöcke über mehrere Regionsdateien, und es enthält eine Reihe von verschiedenen Navigationsblöcken und auch Partials, denen wir bisher noch kein echtes Beispiel gesehen haben. Aber wie Sie hier sehen können, ist dieser cart.block eindeutig kein Navigationselement, also müsste dies teilweise sein. Es ist ziemlich klar hier, dass dies dazu dient, in unseren Warenkorb zu bringen , wenn wir E-Commerce aktivieren. Wir decken den E-Commerce in dieser Klasse nicht ab, aber wir werden sehen, dass einige Partials in nur einer Sekunde durchgebracht werden. Wenn wir in Sammlungen gehen, haben wir Conf-Dateien für unsere wichtigsten Sammlungstypen, Album, Blog, Veranstaltungen, Produkte, Projekte. Wir haben auch eine folders.conf-Datei, so dass wir Ordner in dieser Vorlage und index.conf-Datei haben können , um einen Index und dann eine.list-Datei für den Index zu definieren, um die Präsentation Index und eine.list-Datei für die Präsentation von eine Liste von Projekten. Dann haben wir einen Skript-Ordner. Im Skript-Ordner haben wir site-bundle.js, die eine gigantische JavaScript-Datei mit verkleinertem JavaScript ist. Ich erwarte nicht, dass du das entschlüsseln kannst. Wenn Sie JavaScript-Änderungen an einer Vorlage vornehmen möchten , die bereits eine Datei wie diese hat, empfehle ich, eine neue JavaScript-Datei zu erstellen und diese dann so zu bringen, wie wir dies bereits in dieser Klasse getan haben. Strings, die wir noch nicht gesehen haben, aber das ist offensichtlich ein Ort, um JSON-Daten zu speichern. Ich werde keine Zeit damit verbringen. In Stilen haben wir alle unsere weniger und CSS-Dateien. Nach unten können wir sehen, dass es nur eine site.region Datei gibt oder es gibt nur eine Region-Datei und es heißt site.region, und es enthält viele dieser Blöcke. Wie Sie hier sehen können, ist dies unser erstes Beispiel in der Welt eines partiellen. Wir können von dieser Syntax hier durch den Namen des Blocks gefolgt sehen. Wir nehmen im Grunde den Code von responsive-nav.block , der hier ist, und platzieren ihn direkt hier hinein. Also nur eine Region-Datei und das bedeutet offensichtlich, dass wir nur ein Layout haben. Wenn ich in meine template.conf-Datei gehe, können Sie sehen, dass dies der Fall ist. Wir haben nur ein Layout in unserem Layouts Objekt und es ist das Standardlayout, das nur die eine Region verwendet, die wir haben. Wenn wir jedoch Navigationen betrachten, unterscheidet sich dies etwas von dem, was wir in unserer Vorlage hatten. Wir hatten nur eine Navigation, während diese Vorlage zwei hat. Es hat eine sekundäre Navigation, und dann haben wir dieses Stylesheets-Array, das die Stylesheets auflistet, die wir in unsere Vorlage bringen möchten, einschließlich der Reihenfolge, in der wir wollen, dass sie in unsere Vorlage kommen. Hier haben wir eine Reihe von SystemCollections. Wie wir bereits früher in der Klasse gesehen haben, ermöglichen SystemCollections uns, diese Auflistungstypen zu nutzen , ohne eine.list oder.item Seite für sie schreiben zu müssen. Hier unten können Sie ein neues Array namens SystemPartials sehen. Das ist genau wie Partials, aber wir definieren diese nicht selbst. Innerhalb von Squarespace haben wir diesen Teil hier, den Squarespace uns zur Verfügung stellt, und es ist eine Reihe von Share-Buttons. Das ist also ein kleiner Überblick über unsere Vorlage. Was ich als nächstes tun werde, ist tatsächlich diese Vorlage lokal auszuführen. Wir müssen hier hineingehen, squarespace-server laufen, gefolgt von unserer Website-Adresse. Wir werden unsere Website auch außerhalb des Admins separat betrachten. Ich werde das in eine eigene Registerkarte legen, und dann werde ich sicherstellen, dass ich das kopiere, lege es hier herunter und führe es dann in unserem Squarespace-Serverbefehl aus, um sicherzustellen, dass die —auth am Ende gesetzt wird. Ich habe „Enter“ drauf gedrückt. Nach einer Weile sollte es auf port9000 hören. Lassen Sie uns eine neue Registerkarte öffnen, localhost ausführen: 9000, und ich werde Sie in ein paar Sekunden fangen, wenn dies endlich fertig ist geladen. Hier können Sie unsere Website in all ihrer Pracht sehen, es ist im Grunde nur ein Website-Titel im Moment. Wir haben noch keine Navigation, denn leider, wenn wir zu unserem Admin zurückkehren, können Sie sehen, dass, sobald wir den Entwicklermodus aktivieren, Squarespace tatsächlich alle Demo-Inhalte zerrissen hat, und jetzt müssen wir erstellen Sie unsere eigenen Inhalte. Sehr traurig. Aber nun, in einem realen Beispiel würden Sie sowieso keine Demo-Inhalte verwenden. Lassen Sie mich einfach wieder einige Demo-Inhalte einbringen. Ich mache das gleiche Beispiel wie in unseren Hauptprojekten, die auf der Seite Info war, klicken Sie auf Bearbeiten, und ich werde nur nach einem Bild suchen. Es spielt keine Rolle, was das Bild ist. Gehen wir mit diesem schönen Bündel von Bäumen neben einem See, es sieht so aus. Es wird nur zu verarbeiten und die Größe ändern und dann klicken wir auf Übernehmen. Nachdem wir auf Übernehmen geklickt haben, können wir nach unten scrollen und sehen, dass es bereits einige Platzhalterinhalte gibt, also werde ich diesen speichern. Wie Sie sehen können, haben wir unsere erste Seite und sie wird hier automatisch hinzugefügt, weil sie in unserer Hauptnavigation ist. Wenn ich es in die sekundäre Navigation verschiebe, glaube ich, dass es immer noch angezeigt wird, und es wird wahrscheinlich nicht offensichtlich sein der Unterschied, bis Sie Navigationselemente zu beiden Navigationen hinzufügen. Jetzt weiß ich aus Erfahrung, dass diese Vorlage bereits ziemlich schön aussieht. Ich kann mir nicht wirklich zu viele Dinge vorstellen, die Sie an dieser Vorlage ändern möchten, aber es gibt unendliche Dinge, die Sie offensichtlich mit jeder Vorlage tun könnten. Eines der Dinge, die ich bemerkt habe, ist, dass es nicht viel Fußzeile gibt. Eine Sache, die ich über diese Vorlage weiß, ist, dass unten ein Fußzeilenelement ist, aber es ist nicht aktiviert. Wenn ich zu Startseite gehe, wenn ich zu Design gehe, gehe ich zu Site-Styles, ich kann alle meine Anpassungen für diese Vorlage finden. Dies war etwas, über das wir kurz gesprochen haben, aber wir haben nicht viele Optimierungen erstellt, weil es nicht wirklich so viele CSS-Stile in unserer Vorlage gab. Aber wie Sie hier unter site:footer sehen können, können wir dieses Kontrollkästchen anklicken, um die globale Site-Fußzeile anzuzeigen. Wenn dieses Kontrollkästchen nicht angezeigt wird, wird Fußzeile der Website so eingestellt, dass keine angezeigt wird, und wir werden es nicht wirklich sehen. Ich werde sparen auf das treffen. auf unsere Live-Squarespace-Website außerhalb unseres Admins zurückgehe, werde ich nach unten scrollen und wie Sie sehen können, gibt es immer noch nichts in unserer Fußzeile. Wenn ich die Seite jedoch inspiziere, sollten wir anfangen zu sehen, dass sich dort ein Fußzeilenelement befindet. Wie Sie sehen können, Fußzeile, ID, Fußzeile und dann innerhalb haben wir eine ganze Reihe von Code und im verschachtelten div gibt es tatsächlich keinen Inhalt. Lassen Sie uns also einen Blick in unseren Template-Code werfen und sehen, wo das aufkommt. Also werde ich zu site.region gehen und nach Fußzeile mit dem öffnenden Tag suchen. Hier sehen Sie, wo unsere Fußzeile definiert ist. Wie Sie hier sehen können, haben wir ein offenes Blockfeld von Squarespace, also haben wir offensichtlich keinen unserer Endblöcke eingefügt , so dass nichts auftaucht. Versuchen wir, das jetzt zu tun. Gehen wir zurück zu hier und Sie können sehen, wenn ich den Mauszeiger über diesen Fußzeilenbereich führe, können Sie dieses Wort Fußzeile sehen und Sie können diese Schaltfläche zum Bearbeiten sehen. Jetzt kann ich Blöcke zu meiner Fußzeile hinzufügen. Nun, das ist alles gut und gut, das ist eine Funktion, die bereits in der Vorlage ist. Aber was ich in dieser Lektion tun möchte, ist tatsächlich eine Codeänderung an der Vorlage vorzunehmen , weil es um diese Klasse geht. Es dreht sich alles um den Entwicklermodus. Wenn Sie es einfach innerhalb Ihres Squarespace-Admins tun könnten, warum brauchen Sie dann Code? Nun, in diesem Fall sagen wir einfach, dass wir eine Navigation in unserer Fußzeile haben wollten. Ich denke, das ist ziemlich üblich in vielen Websites, mit einer Kopfzeilennavigation und einer Fußzeile in der Navigation. Also, anstatt dieses offene Blockfeld zu haben, was ich tun werde, geh zurück hierher, lass uns hier runter gehen, entferne dieses Blockfeld und ersetze es durch ein Squarespace-Navigations-Tag. Da wir bereits zwei Navigationseinstellungen in unserer Squarespace-Vorlage haben, wie Sie diese sekundäre Navigation sehen können, werde ich hier ein bisschen Zeit sparen und einfach die sekundäre Navigation neu verwenden , anstatt eine neue Fußzeile zu erstellen -Navigation. Was ich mit Wiederverwendung meine, ist, dass ich es so machen werde, dass die sekundäre Navigation in der Fußzeile und nicht in der Kopfzeile angezeigt wird. Also, zuerst müssen wir diesen Code in der Kopfzeile finden, entfernen und dorthin verschieben. Wenn ich also nach oben scrolle, befindet sich unser Headerinhalt in dieser header.block-Datei. Ich gehe zu unserem Blocks-Ordner, gehe in die header.block-Datei und wie Sie hier sehen können, haben wir unser Squarespace-Navigationstag für das Hauptnav und dann direkt darunter das sekundäre nav. Also werde ich das Tag plus sein übergeordnetes Element nehmen , das es mit dem Befehl X umschließt, es wird in meine Zwischenablage kopiert. Dann speichere ich auf dieser Seite, gehe zurück zu hier und lass es uns stattdessen in unsere Fußzeile setzen. Hit sparen auf, dass. Nun, lassen Sie uns tatsächlich ein sekundäres Navigationselement erstellen, sagen wir, kontaktieren Sie uns Seite, kontaktieren Sie uns einfach. Alles klar, das ist jetzt in der sekundären Navigation und wie Sie sehen können, sitzt es direkt neben der Hauptnavigation auf unserer aktuellen Live-Website. Aber natürlich haben wir Code-Änderungen lokal vorgenommen und das sollte in unserer lokalen Version angezeigt werden. Lassen Sie uns also localhost 9.000 erneut ausführen und sehen, was passiert. Wie Sie sehen können, haben wir unsere über Seite hier oben in unserer primären Navigation, aber wenn wir nach unten scrollen, sollten wir eine Fußzeile mit Navigation für die sekundäre Navigation sehen. Wir sehen das derzeit nicht, also gehen wir auf die „Über“ -Seite. Macht es ein wenig offensichtlicher und hier kann der Kontakt uns Link unten sehen. Vielleicht war es da auf der Homepage. Es scheint, dass die Homepage ein Sonderfall ist, aber trotzdem, wenn wir auf der Über Seite sind, können Sie sehen, dass der Kontakt uns Link hier unten ist und wir können diese natürlich austauschen, wir können uns kontaktieren und über zu den entgegengesetzten Positionen . Dann, wenn wir unsere lokale Version erneut ausführen, können Sie sehen, über ist jetzt unten in unserer Fußzeile Navigation und kontaktieren Sie uns ist hier oben in unserer Kopfzeilennavigation. Das ist also eine kleine Änderung an einer voll ausgestatteten Vorlage in dieser Lektion. Im Wesentlichen konnten wir von diesem Punkt aus alles tun, was wir wollten. Die Möglichkeiten sind endlos und leiderkann ich nicht jede mögliche Änderung abdecken, kann ich nicht jede mögliche Änderung abdecken die Sie sich jemals vorstellen können, mit Ihrer Squarespace-Vorlage. Ich kam mit der Platzierung einer Website-Navigation oder einer Fußzeile in die Navigation dort nur an Ort und Stelle. Ich weiß, dass dies nicht unbedingt die Änderung sein wird, die Sie auf Ihrer Squarespace-Website vornehmen möchten , aber natürlich, fühlen Sie sich frei, einen Kommentar in das Diskussionsfeld unten zu hinterlassen. Wir können uns gegenseitig helfen, auf unserer Squarespace-Vorlage zu erstellen, was wir wollen. Vielleicht möchten wir das Gesamtlayout ändern, vielleicht wollen wir eine Sidebar integrieren, vielleicht möchten wir ein anderes JavaScript-Framework integrieren , das fast eine App in unserer Vorlage läuft. Fast alles ist möglich, zumindest am Frontend. Nehmen Sie auf jeden Fall, was Sie in dieser Klasse gelernt haben, wenden Sie es an, etwas benutzerdefiniertes für sich selbst zu erstellen oder diese Änderungen an Ihrer Squarespace-Vorlage vorzunehmen und verstehen Sie, dass, wenn es etwas gibt , das Sie nicht tun sollen, oder Sie die beiden nicht zusammenstellen, können Sie immer einen Kommentar in das Diskussionsfeld unten hinterlassen. Ich bin interessiert zu sehen, was Sie auf Ihrer Squarespace-Vorlage ändern möchten , und ich werde mein Bestes tun, um Sie in die richtige Richtung zu zeigen. Also ja, hoffentlich gab Ihnen dies ein wenig mehr Exposition gegenüber anderen Vorlagen und Sie können sehen, dass unabhängig davon, welche Vorlage wir bearbeiten, egal wo es die Basisvorlage oder diese Jasper-Vorlage ist, es der gleiche Prozess ist und die gleiche Mechanik, die hinter den Kulissen arbeiten. Also danke fürs Zuschauen. Ich werde die Klasse im nächsten Video einschließen und Sie können mit Ihrem Klassenprojekt beginnen, wenn Sie es noch nicht getan haben. Also freue ich mich darauf, dich zu sehen und abzumelden, also sehe ich dich im nächsten Video. Hey Leute, ich habe vergessen, eine Sache zu erwähnen, bevor wir mit der nächsten Lektion fortfahren. Wenn Sie diese Änderungen auf Ihrer Website live machen möchten, würden Sie natürlich git add ausführen und dann git diese Änderungen übernehmen. Nehmen wir also an, gehen Sie zur sekundären Navigation und dann git push. So wird diese Änderung jetzt live auf Ihrer Website sein, anstatt nur lokal zu laufen. Okay, Leute, ich dachte, ich schmeiße das da rein, weil ich gerade merkte, dass wir das nicht wirklich auf unsere Live-Website gestoßen haben. Lasst uns das jetzt nochmals überprüfen. Ja, wie Sie sehen können, ist diese Navigation jetzt in unsere Kopfzeile und unsere Fußzeile unterteilt. Das war's also. Wir sehen uns im nächsten Video. 16. Outro / Abmoderation: In dieser Klasse haben wir alle wichtigen Dinge behandelt, die Sie innerhalb einer Squarespace-Vorlage tun können. Durch das Öffnen der Vorlage konnten wir das gesamte Front-End bearbeiten, HTML, CSS und JavaScript einfügen, wo immer wir wollen. Wir haben auch über die JSON-Datenschicht erfahren und welche Daten wir über JSON-T aus dem Back-End bringen können . Für Ihre Klassenprojekte ermutige ich Sie, Ihre eigene Vorlage zu erstellen. Möchten Sie, dass es eine Sidebar auf Ihrer Blog-Seite gibt? Vielleicht möchten Sie ein mehrspaltiges Navigationslayout in Ihrer Fußzeile erstellen. Nun, bewaffnet mit Ihrem Wissen über Squarespace-Vorlagen, haben Sie die Wahl. Stellen Sie sicher, dass Sie im Projektabschnitt der Klasse erstellen. Wenn Sie Hilfe oder Anleitung benötigen, hinterlassen Sie Ihre Kommentare im Kommentarbereich oder im unten stehenden Diskussionsabschnitt. Danke, wie immer, für das Zuschauen, und ich hoffe, Sie wieder in einigen meiner anderen Klassen zu sehen.