Ghost-Theme-Entwicklung: So passt du deine Ghost-Publikation an

1. Einführung: Hallo und willkommen bei Ghost Theme Development: So passen Sie Ihre Ghost-Publikation an. Ich bin Christopher Dodd, ich bin freiberuflicher Webentwickler und Top-Lehrer hier auf SkillShare.com, alles über Webentwicklung und Online-Freelancing abdeckt. In der heutigen Klasse lernen wir die Grundlagen der Entwicklung von Ghost-Themen um Ihnen die volle Kontrolle über das Erscheinungsbild Ihrer Ghost-Publikation zu geben. Für diejenigen unter Ihnen, die mit Ghost nicht vertraut sind, würde ich es einfach als die moderne, effizientere Alternative zu WordPress beschreiben . Es ist super schnell und kommt ohne den erweiterten Aufblähen von WordPress aus, was es zu einer idealen Plattform macht, um einen Blog oder eine andere Online-Publikation zu hosten. Genau aus diesem Grund habe ich mich entschlossen, 2021 meine eigene persönliche Website auf Ghost zu verschieben und im Vergleich zu WordPress massive Geschwindigkeitsverbesserungen zu sehen. Wenn Sie also bereit sind zu lernen, wie Sie Ghost-Themes entwickeln und anpassen können, klicken Sie auf das nächste Video und wir sehen uns auf der Innenseite. 2. Warum Ghost verwenden: Bevor ich Ihnen zeige, wie Sie Ghost auf Ihrem Computer installieren, möchte ich schnell darüber sprechen, warum ich Ghost empfehle, da ich sicher bin, dass viele von Ihnen, die gesehen haben, noch nie viel über diese Plattform gehört haben. Ghost wurde im April 2013, etwa 10 Jahre nach WordPress, nach einer sehr erfolgreichen Kickstarter-Kampagne zur Schaffung einer neuen Plattform gegründet etwa 10 Jahre nach WordPress, nach einer sehr erfolgreichen Kickstarter-Kampagne zur Schaffung , die sich ausschließlich auf professionelles Publizieren konzentriert. Die dortigen Keywords konzentrieren sich ausschließlich auf professionelles Publizieren. Dies ist wichtig, weil es zeigt, dass Ghost sich darauf spezialisiert hat, eine Sache sehr gut zu machen. Seit dem Wechsel von WordPress zu Ghost im Jahr 2021 kann ich persönlich sagen, dass Ghost eine viel bessere Plattform für das Online-Publizieren ist. Einer der größten Vorteile von Ghost ist laut unabhängigen Studien, wie schnell es ist , um 1900 Prozent schneller als WordPress , um 1900 Prozent schneller als WordPress. Warum? Weil Ghost im Gegensatz zu WordPress auf einem modernen Technologie-Stack basiert. Als ich meine Website von WordPress zu Ghost verschoben habe, mein Geschwindigkeitsgrad laut GT Metrix dramatisch verbesserte sich mein Geschwindigkeitsgrad laut GT Metrix dramatisch von einem F und ein paar Bs auf alle As. Dasselbe gilt auch für die Interaktion innerhalb der Admin-Seite von Ghost. Der Admin ist eine einseitige Webanwendung, was bedeutet, dass die Interaktivität reibungsloser und schneller ist. Ganz zu schweigen davon, dass die Schnittstelle sauber und einfach ist. Im Gegensatz zu WordPress mit all seinen verschiedenen Menüs. Der Ghost-Administrator ändert sich nicht , je nachdem , welches Thema oder welche Integration Sie Ihrer Website hinzufügen, was bedeutet, dass die Erfahrung viel konsistenter ist als auf einer Plattform wie WordPress. Der Kompromiss besteht jedoch darin, dass Änderungen an Ihrer Website schwieriger auf Programmierkenntnisse zu verzichten sind. Zum Glück für Sie wird das nach diesem Kurs kein Problem sein. Zusammenfassend ist, dass Ghost wahrscheinlich nicht die Mainstream-Notabilität erreicht, da es sich um eine solche Entwicklung einer Fokus-Plattform handelt, aber für diejenigen unter Ihnen, die wissen, wie man die Kraft von Ghost nutzt, sollten Sie die Erfahrung sowohl für sich selbst als auch für sich selbst finden der Benutzer ist bemerkenswert zufriedenstellender. 3. Notwendige Tools und Wissen: In dieser Klasse werden wir uns auf die Besonderheiten konzentrieren, die Ghost-Themen ausmachen. Natürlich umfasst die Entwicklung des Ghost-Themas die drei Sprachen des Front-End-Webs, einschließlich HTML, CSS und JavaScript. Dies ist jedoch keine Klasse, die sich auf eines dieser Themen konzentriert. Es wird erwartet, dass Sie vor der Teilnahme an dieser Klasse ein solides Verständnis von HTML und CSS haben. In Bezug auf die erforderlichen Tools benötigen Sie wie üblich einen Webbrowser, Google Chrome wird empfohlen; und einen Code-Editor , den ich in dieser Klasse Visual Studio-Code verwenden werde. Im nächsten Video zeige ich Ihnen, wie Sie Ghost lokal herunterladen und installieren , damit Sie mit der Entwicklung von Ghost-Themes beginnen können. Aber sobald unser Thema erstellt wurde, müssen wir es auf einen Online-Host hochladen. Die Besonderheiten all dessen werden während des gesamten Unterrichts diskutiert. 4. Wie man Ghost installiert: Wie im vorherigen Video erwähnt, möchten wir Ghost lokal installieren. Lokal, was bedeutet, dass wir es auf unserem eigenen Computer ausführen werden. Es gibt zwei Teile, der erste Teil ist die Installation der Befehlszeilenschnittstelle, also Ghost CLI, und der zweite Teil ist, dass wir eine Ghost-Instanz auf unserem lokalen Computer installieren. Wir können hier einen kleinen Server betreiben und mit Ghost arbeiten, wie wir es auf einer Live-Site tun würden, außer dass alles nur lokal ist und wir einfachen Zugriff auf den Code haben, für den wir unser Ghost-Thema entwickeln können . Wie hier erwähnt, ist es nicht für den Produktionsgebrauch geeignet. Dies ist etwas, das wir verwenden, um die Themen zu entwickeln, und wenn wir dann bereit sind zu veröffentlichen, werden wir diesen Code dann auf unsere Live-Website übertragen. Aber im Moment werden wir mit der Installation von Ghost CLI beginnen und dafür müssen wir sicherstellen, dass wir eine unterstützende Version von Node und npm installiert haben. Diese erste Voraussetzung hier unter Voraussetzungen wird 99,9 Prozent der Menschen abdecken, die dies beobachten. Ich wäre sehr überrascht, wenn Sie ein anderes Betriebssystem als diese drei hätten, also sollten Sie dafür gut sein. Node.js ist eine Laufzeitumgebung, die in der modernen Webentwicklung sehr verbreitet ist. Wenn Sie eine andere Webentwicklung durchgeführt haben, sollten Sie diese installieren lassen. Ansonsten ist der Link vorhanden, Nodejs.org, und Sie können dort den Installationsanweisungen folgen. Andernfalls, wenn Sie Node installiert haben, stellen Sie sicher, dass Sie npm installiert haben, und dann können Sie weiterverfolgen. Wenn Sie sich nicht sicher sind, ob Sie diese beiden installiert haben, öffnen wir jetzt ein Terminalfenster. Ich lösche einfach all diese Warnungen. Ich verwende einen namens iTerm, also sieht es vielleicht ein bisschen anders aus als Ihre Terminalanwendung. Standardmäßig verwenden Sie das Terminal auf einem Mac oder die Eingabeaufforderung unter einem Windows. Aber hier in meiner Terminalanwendung kann ich überprüfen, ob ich Node und npm installiert habe , einfach den Befehl ausführen, um die Version zu überprüfen. Ich kann meine Node-Version überprüfen und du siehst, dass es 16.9.1 und dann kann ich npm-v gehen und das wird mir meine npm-Version sagen. Ich zoome einfach hier rein, damit ihr es klarer sehen könnt. Wie Sie sehen können, wenn wir diese Befehle ausführen, werden Versionsnummern angezeigt und das bedeutet, dass wir Node und npm installiert haben. Das nächste, was wir tun werden, ist, dass wir die Ghost CLI mit diesem Befehl installieren , jetzt da wir wissen, dass wir Node und npm installiert haben. Ich kopiere diesen Befehl und füge ihn in unser Terminal ein und dies wird die neueste Version der Ghost CLI installieren. Nach etwa 20 Sekunden sollte das installiert werden und jetzt können wir anfangen, ein Verzeichnis für die Installation unserer Ghost-Website zu finden. Was ich tun werde, ist klar, dass ich dann in ein Verzeichnis navigiere, das ich auf meinem Computer habe, code/skillshare. Hier behalte ich alle meine Skillshare-Projekte und hier werde ich mit dem Befehl mkdir ein neues Verzeichnis erstellen, und ich nenne diese eine Ghost-Site. Nachdem ich das erstellt habe, navigiere ich in dieses leere Verzeichnis und jetzt bin ich auf der Ghost-Site. Führen wir nun den Befehl aus, um Ghost zu installieren, Ghost local zu installieren, und schauen wir, ob es funktioniert. Wir bekommen ziemlich früh einen Fehler, ich bin mir nicht sicher, ob Sie denselben Fehler haben werden, aber das ist ein ziemlich häufiger Fehler, daher wäre es für viele von Ihnen wichtig zu sehen, wie Sie das bewältigen können. Es ist der Fehler, der besagt, dass die Version von Node.js, die Sie verwenden, nicht unterstützt wird. Wie Sie hier sehen können, handelt es sich um die Liste der unterstützten Node-Versionen, und wenn Sie sich vorher erinnern, haben wir gesehen, dass wir 16.9.1 ausgeführt haben. Offensichtlich wird dies je nachdem, welche Version Sie haben, unterschiedlich sein, aber wie Sie sehen können, gibt es dort eine Diskrepanz und deshalb haben wir den Fehler. Leider ist dies für Entwickler nicht so ungewöhnlich für einen Fehler. Es gibt viele verschiedene Node-Pakete, die nur auf bestimmten Versionen von Node ausgeführt werden. Sie würden denken, dass sie alle auf der neuesten Version von Node laufen würden, aber ich denke, Node ändert sich so schnell, dass Sie eine Lösung benötigen um zwischen verschiedenen Versionen von Node zu wechseln, und dafür gibt es ein Paket namens nvm. Ich zeige Ihnen nur, dass, wenn Sie es noch nicht haben, es als erstes Ergebnis angezeigt werden sollte, wenn Sie nvm in Google eingeben, und hier sehen Sie Node Version Manager. Wenn wir nach unten scrollen, sehen wir den Befehl zur Installation. Ich habe es bereits installiert, aber das ist der Befehl, den Sie ausführen würden, wenn Sie ihn nicht bereits installiert hätten. Wir können hier runter gehen, wie Sie auf meinem bestimmten Computer sehen können, es heißt, nvm ist bereits installiert und es wird nur versuchen zu aktualisieren. Für Sie könnte es eine Neuinstallation durchführen. Stellen Sie einfach sicher, dass Sie Node Version Manager installiert haben, und auf diese Weise können wir eine bestimmte Version von Node auswählen, um Ghost auszuführen. Ein bisschen frustrierend, aber leider kommt dies mit dem Gebiet des Entwicklers einher. Manchmal müssen Sie Ihre Node-Versionen auswählen und zwischen diesen wechseln. Jetzt würden Sie denken, dass Sie in der Lage sein werden, zur Node-Version zu wechseln , indem Sie einfach nvm use node ausführen. Dies ist der Befehl, den Sie verwenden, um Ihre Node-Version zu ändern, und ich denke, ich habe sogar vergessen, was es gesagt hat. Lassen Sie mich einfach Ghost install local nochmal ausführen. Wir haben diese Versionsnummern wieder, los geht's, 14.15.0. Sie würden denken, dass Sie in der Lage wären, den Befehl nvm use node zu verwenden , der der Befehl zum Ändern einer Version ist. Ich gehe zu nvm use node 14.15.0 und jetzt kannst du sehen, dass wir jetzt zu dieser Version gewechselt sind. Sie würden denken, dass das dann für die Ausführung von Ghost install local funktionieren würde. Leider heißt es für mich, dass es nicht mit der aktuellen Node-Version kompatibel ist. Es ist seltsam, dass ich diesen anderen Fehler bekomme, der nicht die unterstützten Nummern , aber gleichzeitig kann ich immer noch keine Ghost-Instanz installieren. Ich kann nicht erklären, warum dies der Fall ist, aber diese Version ist immer noch nicht mit Ghost kompatibel. Was ich tun würde, ist, nach Ghost unterstützten Knotenversionen zu suchen und in den neuesten Foren nachzuschauen. Dies hier ist eine frühere Bildschirmaufzeichnung eines Forenbeitrags, den ich als Download-Fehler mit Ghost CLI gefunden habe. Ich habe eine Antwort von Kevin auf die Mitarbeiter gefunden, dass die minimale unterstützte Version 14.16.1 ist. Wenn Sie das mit nvm installieren und dann nvm use node ausführen und auf diese Version festlegen, sollte es für diese bestimmte Version von Ghost CLI funktionieren. Ich weiß, dass das nicht die sauberste Antwort ist, aber leider etwas, das Ghost auf ihrer Website oder in der Fehlermeldung nicht klargestellt hat. Lassen Sie uns nun Ghost install local ausführen. Wie Sie sehen können, läuft unsere Installation jetzt. Ich überspringe hier einfach weiter, damit wir nicht warten müssen, bis das Ganze los ist. Wie Sie sehen können, sind wir fast da, wir starten Ghost jetzt und hier können Sie sehen, dass Ghost erfolgreich installiert wurde. Um die Einrichtung Ihrer Publikation abzuschließen, besuchen Sie diese Adresse, mit der Sie Ihren Ghost-Administrator einrichten können. Lasst uns das öffnen. Ich halte Command gedrückt und klicke dann auf diesen Link, damit ich darauf zugreifen kann, und jetzt kannst du sehen, dass ich die Ghost-Installation durchlaufen kann. Ich klicke auf „Konto erstellen“. Ich nenne das Skillshare, mein Name ist Christopher Dodd, und ich werde hier einige Details eintragen, die ich zuvor gespeichert habe , und dann überspringe ich dies, um Mitarbeiter einzuladen. Jetzt bin ich in einer neuen Ghost-Installation und hier siehst du den Ghost-Admin , über den wir in nur einer Sekunde sprechen werden. Wenn wir die Website ansehen wollten, können wir hier auf diesen Link klicken und der uns zu unserer Ghost-Site führt, die mit einigen Beispiel-Blogposts vorbefüllt wurde und das Thema bei Casper verwendet. Wenn Sie das Thema überprüfen möchten, das Sie gerade verwenden, klicken Sie darauf, um in die Einstellungen zu gelangen. Beachten Sie, dass sich diese Schnittstelle ändern kann, aber derzeit sieht sie so aus und gehen Sie in Einstellungen Wir können dann ins Theme gehen und dann können Sie sehen, dass Casper standardmäßig installiert ist. In einem Moment werden wir dieses Thema aussprechen und es durch unser eigenes Thema ersetzen. Aber im Moment arbeiten wir mit diesem bestehenden Thema und ziehen hier Blog-Posts aus dem Admin heraus. Wie Sie sehen können, haben wir einige Blogbeiträge, die mit Ghost Standard geliefert werden. Wenn wir sie loswerden wollen, löschen wir sie einfach alle und wir haben auch einige Seiten, die von Ghost bereitgestellt wurden. Ich denke, wir haben hier ein Tag und unter Staff haben wir mich und den Ghost-Benutzer. Der Ghost-Benutzer ist derjenige, dem alle diese Blogbeiträge und Seiten zugeschrieben wurden , und wenn wir suchen, woher diese Navigation kommt, können wir erneut in die Einstellungen gehen, Navigation klicken, und Sie können sehen, dass unsere Die Navigation kommt von. Das ist es, was Sie von Ghost sofort bekommen, aber in diesem Kurs lernen wir natürlich, wie wir dies anpassen unser eigenes Thema erstellen können. Aber wir werden alle dieselben Ghost-Daten verwenden. Wir werden Tags, Autoren, Seiten und Beiträge verwenden . Aber jetzt, da wir Ghost installiert haben, warte ich bis zum nächsten Video, um Ihnen mehr über Ghost zu zeigen, und wir werden einige der Grundlagen behandeln, wie das alles funktioniert. 5. Ghost-Grundlagen: Willkommen zurück, allerseits. In dieser Lektion werden wir einige der Grundlagen der Ghost-Sites und der Entwicklung von Ghost-Themen behandeln . Wie Sie sehen können, führe ich hier eine Ghost-Instanz aus und die Adresse für den Administrator lautet wie folgt. Wenn ich hier in meinen Browser schaue, können Sie die Adresse sehen, um die Seite einfach so zu überprüfen, wie sie ist, ist das Gleiche minus dem Schrägstrich. Slash Ghost ist das, was wir verwenden, um auf den Admin zuzugreifen. Was ich tun werde, ist in den Slash-Geist zu stecken, und das bringt uns zurück zum Admin. Ich möchte Ihre Aufmerksamkeit auf zwei weitere Dokumente lenken, die uns während des gesamten Unterrichts führen werden. Hier ist die offizielle Dokumentation. Ich bin von der Installation von Ghost zur Themenübersicht übergegangen. In der Entwicklerdokumentation sich dies natürlich ändern, aber zum Zeitpunkt der Aufzeichnung Sie hier in diesem Themenmenü, Sie haben alle Details zu Themen. Ich habe gerade auf die Übersicht geklickt, um zu dieser Seite zu gelangen. Ich empfehle Ihnen, die Dokumentation zu lesen. Aber was ich darüber hinaus getan habe, ist mein eigener Leitfaden zur Ghost Theme Development erstellt. Dies wird veröffentlicht, wenn Sie sich diese Klasse ansehen, und die URL wird ein Leitfaden zur Entwicklung von Ghost-Themen sein. Aber es sollte auf absehbare Zeit der neueste Beitrag in meinem Blog sein. Sollte ziemlich einfach zu finden sein, indem Sie auf crystalfreelancer.com/blog oder crystalfreelancer.com gehen, gefolgt von der spezifischen Schnecke hier. In diesem Leitfaden gehe ich die Grundlagen durch, die wir jetzt behandeln, und unterteile den gesamten Artikel in vier Kategorien: Vorlagen, Routen, Kontext und Helfer. wir in den späteren Videos weiter darauf eingehen, dass ich hier ein kleines Diagramm erstellt habe, sobald wir anfangen, Vorlagen zu erstellen, die mit den Routen übereinstimmen Wenn wir in den späteren Videos weiter darauf eingehen, können Sie sehen, dass ich hier ein kleines Diagramm erstellt habe, sobald wir anfangen, Vorlagen zu erstellen, die mit den Routen übereinstimmen, wenn ich hier nach unten scrolle . Ich denke, für Dinge wie Struktur hilft es wirklich, ein Diagramm zu konzipieren, was vor sich geht, und in diesem Diagramm haben wir auf der linken Seite die verschiedenen Routen. Wenn Sie sich auf der Homepage-Route befinden, werden Sie index.hbs sehen, es sei denn, es gibt eine home.hbs-Vorlage. Das bedeutet das alles. Keine Sorge, wir werden später im Video darauf eingehen. Die ganze Grundlage von Ghost Theme Development sind jedoch Routen und Vorlagen. diese verschiedenen Routen zugreifen, hängt die Vorlage, die Sie erhalten, davon ab, welche Vorlagen Sie tatsächlich in Ihrem Theme haben und den Namen, da die Benennungskonvention sehr wichtig ist. Aber auf einer grundlegenden Ebene haben Sie diese beiden Vorlagen hier, die das Rückgrat aller Ghost-Themen bilden, die Index und Post sind. Denn wenn wir hier zu den Grundlagen gehen, ist ein Blog in seiner grundlegendsten Form eine Sammlung von Blogbeiträgen. Gehen wir hier zurück zu unserem Admin und lassen Sie es uns im Kontext des Ghost-Admins erklären. Der prominenteste Menüpunkt hier sind Ihre Beiträge. Du hast dieses kleine Dropdown-Menü hier. Sie können sich Beiträge in Bezug auf geplante oder veröffentlichte Entwürfe ansehen. Das ist sinnvoll, weil Ghost eine Publishing-Plattform ist. Es ist eine Blogging-Plattform. Es ist rein. Es macht diese Form von Websites wirklich gut, weshalb ich denjenigen unter Ihnen, die speziell einen Blog suchen, empfehle, Ghost zu verwenden. Es macht nicht absolut alles gut, aber was es tut, ist, dass es sich auf die Kernfunktionalität eines Blogs konzentriert, dem es sich um eine Sammlung von Beiträgen handelt. Wenn wir hier eingehen, sehen Sie hier unsere Liste der Beiträge. Wie wir im letzten Video gesehen haben, wurde dies bereits bevölkert. Aber wenn wir hier hineingehen und auf „Neuer Beitrag“ klicken, rufen wir einfach diesen Beispielbeitrag auf, und hier können wir alle Dinge wie ein Bild, Markdown-HTML einfügen oder wir können einfach anfangen zu tippen. Das alles spart superschnell. Der Redakteur ist superschnell. Wir können auch ein Feature-Image zu unserem Blogbeitrag hinzufügen. Was wir dann tun können, ist, dass wir die Post-URL aktualisieren, das Veröffentlichungsdatum ändern, Tags hinzufügen, einen Auszug hinzufügen, den Autor ändern und die Vorlage ändern können das Veröffentlichungsdatum ändern, Tags hinzufügen, einen Auszug hinzufügen, den Autor ändern , wenn andere Tablets im Theme festgelegt wurden was sie derzeit nicht haben. Das ist eine Menge Details, aber im Wesentlichen mit Ausnahme von Seiten alle anderen Datentypen, die wir in diesem kleinen Menü sehen beziehen sich alle anderen Datentypen, die wir in diesem kleinen Menü sehen werden, mit der Organisation unserer Beiträge. In einem System wie sagen wir WordPress oder Shopify haben Sie in WordPress etwas namens Kategorie, und dann haben Sie Tags, in Shopify haben Sie etwas namens Sammlung, und dann haben Sie Tags. In Ghost gibt es kein Konzept einer Kategorie. Was Sie stattdessen haben, ist etwas, das als primäres Tag bezeichnet wird. Für diesen Beitrag ist das erste Tag, das ich in dieses Feld lege, das primäre Tag. Was ich tun werde, ist einfach ein neues Tag namens Example Tag zu erstellen und dann werde ich es auch mit den ersten Schritten markieren. Es wird zwei Tags haben, aber dieses erste Tag wird als primäres Tag bezeichnet. Wenn Sie sich gegenseitig ausschließende Kategorien erstellen möchten, würden Sie das so machen. Sie würden die Kategorie oder das Tag, nach dem Sie den Beitrag kategorisieren möchten , hauptsächlich als erstes Tag eingeben. Hier unten wird der Autor automatisch eingestellt, weil ich derzeit als Christopher Dodd angemeldet bin, aber ich könnte dies leicht in Ghost ändern und diesen Artikel dann einem anderen Benutzer zuschreiben lassen. Ich werde das mir zugeschrieben behalten. Das ist im Grunde genommen für Post-Einstellungen. Werfen wir einen Blick darauf, wie das aussieht. Dies wird nur ein Entwurf sein. Ich würde das nicht auf einer normalen Website tun, aber weil wir in der Entwicklung arbeiten, kann ich dies einfach veröffentlichen und es wird sofort veröffentlicht. Gehen wir zurück zu Posts und schauen wir uns die anderen Inhaltstypen an. Wie ich bereits erwähnt habe, sind Tags die Art und Weise, wie Sie Ihre Inhalte in Ghost organisieren. Wenn ich hier in Tags klicke, siehst du, dass wir die verschiedenen Tags und die Anzahl der Beiträge haben, die jeweils zugeschrieben werden. Ich möchte Ihre Aufmerksamkeit in diesem Video etwas mehr auf Tags lenken, da sie sich ein wenig von den Tags in vielen anderen Systemen unterscheiden. Wie Sie sehen können, haben wir in einem Tag viele Anpassungsoptionen. Wir können ein Tag-Bild hinzufügen, wir können eine Farbe hinzufügen, wir können ihm einen benutzerfreundlicheren Namen geben. Wir können ihm sogar eine Beschreibung geben und seine Metadaten anpassen. Dies unterscheidet sich sehr von vielen anderen Systemen, bei denen ein Tag nur eine Zeichenfolge ist. Das war's. Es sind nicht all diese anderen Daten angehängt. Aber der Punkt, den ich hier anspreche, ist, dass wir keine Kategorien in Ghost haben. Tags sind im Grunde auch Ihre Kategorien. Sehr flexible System-Tags eignen sich gut, um Ihnen viel Flexibilität in Bezug auf die Organisation Ihrer Website-Inhalte und die Verwendung des primären Tags zu Organisation Ihrer Website-Inhalte und bieten, das wir gerade besprochen haben. Dies bietet uns alle Vorteile dieser Flexibilität ohne den Kompromiss, diese sich gegenseitig ausschließenden Kategorien zu haben. Wenn Sie Ihre Beiträge nach sich gegenseitig ausschließenden Gruppen kategorisieren möchten, können Sie das primäre Tag verwenden. Um dann die Mitarbeiter oder die Autoren anzupassen, können wir hier zum Menü „Zeug“ gehen, und hier können wir dem Benutzer Daten hinzufügen. Wenn ich hier auf meinen Namen gehe, kann ich meinen Slug ändern. Ich kann mir ein Titelbild und ein Profilbild geben. Ich kann mir eine Standortwebsite geben, und all diese Daten stehen uns zur Verfügung, um sie innerhalb von Ghost Theme Development zu verwenden. Natürlich haben Sie hier Integrationen und Sie haben Mitglieder, wenn Sie eine kostenpflichtige Mitgliederseite betreiben. In diesem Kurs werden wir nicht wirklich über Ghost sprechen, um eine Mitgliederseite zu erstellen, wir werden nur über Ghost in Bezug auf das Bloggen sprechen, aber das ist auch hier eine Option. Ich habe gehört, dass Ghost auch dafür sehr mächtig ist. Das letzte kleine Ding hier, auf das ich Sie aufmerksam machen möchte, sind Seiten. Seiten sind ziemlich genau wie Posts, sie sind nur nicht in unserem Sammlungsindex hier organisiert. Sie stehen einfach allein. Wir müssen sie irgendwo verbinden. Es gibt keine Schleife mit allen unseren Seiten. Sie sind nur Beiträge, die außerhalb von Posts sitzen und nicht in die Kernsammlung Ihrer Ghost-Website gehören. Wie Sie sehen können, sind einige der Beispiele hier Dinge wie Ihre About-Seite, Ihre Kontaktseite, Ihre Datenschutzseite. Das sind keine wirklichen Blogposts. Sie werden vielleicht genauso aussehen und sich anfühlen, aber es sind Blogbeiträge in dem Sinne, dass wir ihnen keine Tags geben werden, und das Datum, an dem sie veröffentlicht wurden, ist möglicherweise nicht unbedingt so wichtig. Dies ist ziemlich dasselbe auf jeder Blogging-Plattform, auf der Sie Ihre Beiträge und Ihre Seiten haben. Grundsätzlich besteht der einzige Unterschied darin, dass Beiträge eine Sammlung bilden und Termine haben. Seiten Sie können das Veröffentlichungsdatum auch in Ghost Theme Development anzeigen, aber das ist nicht so üblich. Der Unterschied besteht darin, dass Posts wir in der Lage sein wollen, sie zu durchlaufen, und wenn neue Beiträge verfügbar sind, können wir sie in RSS-Feeds veröffentlichen, solche Dinge. Wenn Sie zuvor Erfahrungen mit Bloggen gemacht haben, sollte Ihnen das ziemlich klar sein. Das letzte, was ich hier nur wiederholen möchte , ist, dass sich Ihre Navigation hier in Ihren Einstellungen befindet, sodass Sie in die Einstellungen gehen und dann auf Navigation klicken können, sodass Sie in die Einstellungen gehen und dann auf Navigation klicken können, und hier legen Sie Ihre Navigationsdaten fest. Wir haben gesehen, wenn ich auf unsere Seite zurückkehre, indem ich auf diesen Link klicke, können Sie unsere Navigation hier oben sehen. Wenn ich hier ein paar Gegenstände entfernen sollte, entfernen wir einfach alles außer über und klicken auf Speichern. Ich glaube, ich muss hier tatsächlich auf den Papierkorb klicken. Versuchen wir es noch einmal hier drüben. Sie können sehen, wie unsere Navigation schrumpft und unser neuer Blogbeitrag, den wir veröffentlicht haben, ist ebenfalls vorhanden. Was ich dann tun werde, da wir keinen Beitrag ohne Bild wollen, füge ich hier nur ein vorgestelltes Bild hinzu. Ich kann einfach einen nach dem Zufallsprinzip von Unsplash finden. Lasst uns einfach einen einlegen. Klicken Sie auf „Aktualisieren“. Geh zurück zu unserem Thema, ups. Lass mich zurück zu Home gehen, und hier siehst du, dass wir unseren Beispielbeitrag unter Beispiel-Tag und hier unter Erste Schritte haben, all unsere anderen Beiträge. Wenn Sie sich fragen, woher diese Erste Schritte stammen, ist dies das primäre Tag. Sehr wichtig, was Sie als erstes Tag angeben. Natürlich können Sie in Ihrem Ghost-Thema während der Entwicklung wählen, ob Sie entweder das primäre Tag verwenden oder es wie ein normales Tag behandeln möchten. Es liegt an dir. Um diese Kategorien hier zu erstellen, würden Sie jedoch das primäre Tag verwenden. Ich möchte das nur klarstellen, denn das ist etwas, das sich in Ghost im Vergleich zu anderen Blogging-Plattformen unterscheidet. Jetzt, da wir einen Blick in den Ghost-Administrator geworfen haben und Sie ein wenig damit vertraut sein sollten, werden Sie sich im Laufe der Zeit mehr daran gewöhnen, lasst uns unser Thema herausholen und anfangen, es neu aufzubauen, damit wir lernen können, wie alles funktioniert . Das Thema, das wir verwenden, wenn ich in Einstellungen gehe und hier ins Thema gehe, ist Casper. Wenn ich ein anderes Thema bereit hätte, könnte ich es hochladen und zu diesem Thema wechseln. Aber für die Zwecke von uns, wenn wir ein brandneues Thema entwickeln und alle unsere Veränderungen sehen wollen, sobald sie eintreten, werde ich die Dinge für uns leicht machen und wir werden einfach unsere Casper-Thema hier. Wenn das losgeht, können wir das verpacken und dann auf unsere Live-Website hochladen, sobald wir es erstellt haben. Dafür öffne ich unser Projekt in meinem Code-Editor. Wie bereits erwähnt, ist der Code-Editor, den ich für diese Klasse verwende, Visual Studio Code. Ich öffne ein neues Fenster in diesem Programm. All diese verschiedenen Warnungen können Sie hier sehen. Ich schließe das ab. Lassen Sie mich das erweitern und dann klicke ich hier auf „Öffnen“. Gehe von hier aus in meinen Code-Ordner, gehe in meinen Skillshare-Ordner und öffne die Ghost-Site. das Begrüßungsmenü hier schließen, können Sie sehen, dass wir drei Ordner haben: Inhalt, Current und Versionen. Gehen wir in den Inhalt und gehen zu Themes, und hier ist unser Themencode für Casper. Wir haben viele verschiedene Codes in verschiedenen Dateien. In dieser Klasse möchte ich, anstatt Dinge zu ändern, die bereits existieren, von unten nach oben beginnen, damit ihr ein grundlegendes Verständnis habt. Was ich tun werde, ist buchstäblich einige dieser Dateien zu löschen. Ich lösche alle Vorlagen mit Ausnahme der obligatorischen Vorlagen. Wenn wir zum Blogbeitrag oder zur Dokumentation zurückkehren, gibt es nur zwei Vorlagen, die im Ghost-Theme benötigt werden, und das sind index.hbs und post.hbs. Wie bereits erwähnt, ist das sinnvoll, weil ein Blog in seiner grundlegendsten Form einfach eine Sammlung von Beiträgen ist. Wenn Sie keinen Ort haben, an dem Personen alle Ihre Beiträge anzeigen können , und Sie keine Vorlage zum Anzeigen eines Beitrags haben, können Sie im Grunde keine Website haben. Es gibt nicht zu viele erforderliche Dateien, Sie müssen nur sicherstellen, dass Sie einen index.hbs und einen post.hbs haben. Lassen Sie uns alle unsere Vorlagen abgesehen davon ausnehmen, damit wir lernen können, wie man wieder aufgebaut wird. Ich werde all diese Vorlagen hier los. Ich werde auch alles im Assets-Ordner loswerden. Wir werden unser eigenes Vermögen einsetzen, und dann werden wir in unseren Partys hier auch alles los. Was ich tun werde, ist, dies auf ein sehr grundlegendes Niveau zu bringen. Lassen Sie uns einfach all das entfernen und ich habe nur eine Seite 1 mit der Aufschrift Index, und dann werde ich das aufschlüsseln und eine Vorlage haben, auf der nur Post steht. Da wir Änderungen an unseren hbs-Dateien vorgenommen haben, haben wir einige hbs-Dateien entfernt. Es ist eine gute Idee, unsere Ghost-Instanz neu zu starten. Ich gehe hier zurück zum Terminal und führe den Befehl Ghost Neustart aus, der , wie Sie vielleicht vermuten, unsere Ghost-Instanz stoppen und dann erneut starten. Vor Ort sollte dies nicht allzu lange dauern. Da gehst du. Es wurde neu gestartet. Gehen wir jetzt zurück zu unserer Ghost-Website und sehen, wie es aussieht. Dort sieht man im Stammverzeichnis, ich schaue mir die Indexvorlage an. Offensichtlich gibt es nichts außer h1, aber das erwarten wir, weil wir das gerade ausgeweidet haben. Wenn ich dann zu einem bestimmten Beitrag gehe, was war einer der Beiträge, die wir hatten? Wenn ich hier wieder in meinen Ghost-Administrator gehe und zu Beispielbeiträgen gehe, klicke auf Post anzeigen, wirst du sehen, dass wir nur einen Beitrag haben. Keine dynamischen Daten, aber Sie können deutlich erkennen, dass wir die Indexvorlage ausgeweidet haben , die auf der Homepage bereitgestellt wurde, und wir haben die Post-Vorlage ausgeweidet. Ich möchte, dass Sie sehen, dass wir diese beiden Vorlagen jetzt mit unseren beiden Kernrouten treffen können . Routen sind natürlich eine der vier Kategorien, über die ich in diesem Leitfaden spreche. Wir sprechen über Vorlagen und sprechen über Routen. Wir gehen sehr detailliert auf Routen ein, denn Routen sind etwas, das bei der Entwicklung von Ghost-Themen sehr wichtig ist. Eigentlich befindet sich die Datei, in der Sie Ihre Routen ändern, nicht wirklich in Ihrem Thema. Bevor wir anfangen, unsere Routen zu ändern und unsere Vorlagen zu aktualisieren, möchte ich Sie nur auf diese Datei aufmerksam machen. Es ist die routes.yaml-Datei und der Ort, an dem Sie suchen können, befindet sich in Ihrem Einstellungsverzeichnis in Ihrem Inhaltsverzeichnis. Ich klicke einfach darauf und schaue mir die routes.yaml-Datei an. Dies ist die Standardkonfiguration für Routen, über die wir im Blogbeitrag hier sprechen, dies ist die Standardeinstellung. werden wir näher darauf eingehen, wie das funktioniert und Im nächsten Video werden wir näher darauf eingehen, wie das funktioniert und die Syntax hinter YAML. Aber im Wesentlichen möchte ich Ihre Aufmerksamkeit lenken, ist, dass wir hier unsere Routen definiert haben, und wir haben hier eine einzige Sammelroute, die unseren Index lädt und auf der Root-Route bedient wird. Dies bestimmt, dass wir unseren Index der Blog-Posts auf der Root-Route ausführen. Dann sagt uns dieser Permalink hier, dass wir die Schnecke unseres Blogbeitrags direkt nach dem ersten Schrägstrich ausführen. Natürlich könnte es sinnvoll sein, dass es sich bei der Homepage um einen Index von Beiträgen handelt und wenn wir hier eingehen und Beispielbeiträge eingeben, wird ein Beitrag angezeigt. Aber das ist alles auch innerhalb von Ghost anpassbar. Wir können diese Routen aktualisieren, was wir in einem zukünftigen Video machen werden. Tatsächlich glaube ich, dass es das nächste Video ist. Hoffentlich sind das nicht zu viele Informationen. Ich lasse es dort und wir werden im nächsten Video tiefer auf Routen und Vorlagen eingehen . Aber was ich in diesem Video demonstrieren wollte, war, wie der Administrator funktioniert. Es ist ganz einfach, wenn du es verstanden hast. Wir betreiben gerade eine Sammlung von Beiträgen. Wir haben einige Seiten auf der Seite und kategorisieren unsere Beiträge nach Tags und Autoren. Wir können Tags Daten hinzufügen und Autoren Daten hinzufügen, und wir können dies auch in unserem Ghost-Thema anzeigen. Schließlich können wir unsere Routen mit der Datei routes.yaml anpassen, über die wir im nächsten Video erfahren werden. Wir sehen uns beim nächsten. 6. Themenstruktur und die Standardvorlage: In dieser Lektion werden wir tiefer in die Themenstruktur eingehen und über die verschiedenen Vorlagen sprechen , aus denen Ihr Ghost-Thema besteht. Wir werden hier tief in dieses Diagramm eingehen, und wenn wir etwas Zeit haben, werden wir mehr in das erweiterte Routing eingehen. Aber es gibt eine Menge Details dort. Fangen wir also einfach hier mit der Themenstruktur an. Um dieses Diagramm zu erklären, habe ich auf der linken Seite die Routen. Wo auch immer Sie auf die Homepage oder eine Blogseite oder eine Seite oder einen Beitrag zugreifen , werden Sie standardmäßig enden, wenn wir genau hier zur index.hbs-Datei oder der post.hbs-Datei gehen . Ich möchte, dass Sie alle diese grauen Vorlagen für den Moment hier ignorieren und verstehen, dass, wenn alles, was Sie in Ihrem Ghost-Theme haben, ein index.hbs und ein post.hbs ist, und natürlich ein optionales Standard-HBS, das wir in nur einer Sekunde behandeln werden. Es spielt keine Rolle, auf welche Route Sie gehen, Sie werden immer auf einer dieser Vorlagen enden. Diese Vorlagen zwischen dem Routennamen und diesen Standardvorlagen sind jetzt alle optionale Vorlagen. Und mit diesen optionalen Vorlagen können Sie anpassen, was auf spezifischeren Routen angezeigt wird. Wenn wir zum Beispiel unsere Indexseite auf der Homepage und eine der spezifischen Seiten, die auf der Routenroute läuft, nicht wollten , können wir dies nicht mit home.hbs festlegen. Dies ist wahrscheinlich das einfachste Beispiel aus dem gesamten Diagramm. Wenn wir auf die Homepage gehen und kein home.hbs haben, werden wir standardmäßig indizieren. Wenn wir das tun, müssen wir auch unsere Routen aktualisieren. Das zeig ich dir in nur einer Sekunde. jedoch weiter nach unten gehen, wenn wir in das nächste Beispiel gehen, die nächste Route, wenn wir uns eine Indexroute ansehen, im Grunde genommen wie das Betrachten des Blogs insgesamt oder eine gefilterte Ansicht der Gesamtsammlung. Sagen wir zum Beispiel, wir schauen uns all diese Blogbeiträge an, die von einem bestimmten Autor gefiltert wurden. Wenn es eine Vorlage namens autor-of this offer.hbs gibt, wird diese Vorlage vor diesen Vorlagen geladen. Wenn wir zu einer Indexseite gehen, wo immer wir nach Autor oder Tag filtern, wird es standardmäßig zu index.hbs gehen. Wenn wir zum Beispiel nach einem bestimmten Autor filtern und eine autor.hbs-Datei haben, wird der Code aus dieser autor.hbs-Datei bereitgestellt. Aber wenn wir zum Beispiel sagen, wir schauen uns den Benutzer Christopher an , der derzeit einer meiner Benutzer auf meiner Ghost-Site ist, das ist die Schnecke für meinen Benutzer. Wenn ich eine Vorlage namens author-christopher.hbs habe, wird diese vor der autor.hbs-Datei und vor der index.hbs-Datei geladen. Hoffentlich ergibt dieses Diagramm hier etwas sinnvoller, aber ich werde Ihnen zeigen, wie das in nur einer Sekunde tatsächlich im Ghost-Thema funktioniert. Nach derselben Logik können Sie hier sehen, ob wir nach einem bestimmten Tag filtern. Standardmäßig erhalten wir die index.hbs-Vorlage, es sei denn, wir haben unsere tag.hbs-Vorlage. Und wenn wir nach einem bestimmten Tag filtern und eine benutzerdefinierte Vorlage für dieses bestimmte Tag festgelegt haben , wird diese bestimmte Vorlage bereitgestellt. zu diesen Routen für einzelne Beiträge und Seiten gehen, wenn wir auf eine Seite zugreifen und keine page.hbs, keine benutzerdefinierte Vorlage auf der Seite und keine benutzerdefinierten Vorlagen speziell für diese Seite vorhanden sind, werden wir load post, aber nur wenn keiner dieser drei existiert. Es gibt viele Optionen für die Seite, wir können eine page.hbs-Vorlage haben, wir können eine benutzerdefinierte Vorlage haben, die jedoch sowohl für Beiträge als auch für Seiten gelten kann, und ich zeige Ihnen in nur einer Sekunde, wie Sie das machen. Oder wir können eine Seitenvorlage haben, die sich auf eine sehr bestimmte Seite bezieht und die vor all diesen geladen wird. Das ist also ein Schritt-für-Schritt-Verständnis dafür, was diese Zeilen und Spalten bedeuten. Lassen Sie uns das in unserem Ghost-Thema in die Praxis umsetzen. Zunächst möchte ich also eine default.hbs-Datei festlegen. Und was das bedeutet, ist, einen Wrapper-Code zu enthalten, sich um jede Vorlage handelt, die hier bereitgestellt wird. Deswegen habe ich es oben sitzen lassen. Dies soll bedeuten, dass default.hbs jede Vorlage, die bereitgestellt wird, umgehen wird. Und das ist praktisch für Dinge wie Kopf- und Fußzeilen, die auf jeder einzelnen Seite gleich sein werden. Wenn ich zu unserem Code zurückkehre, werde ich eine default.hbs-Datei erstellen. In unserer default.hbs-Datei laden wir hier einige Boilerplate-HTML-Inhalte ein. Ich füge es in das doctype-Tag ein. Starten Sie das HTML-Tag, gehen Sie zu Lang, und dies ist unser erster kleiner Lenker Code, der tiefer in den Lenker eingeht und wie Sie alle Helfer in einem späteren Video verwenden. Aber im Moment bedarf dies hoffentlich nicht allzu viel Erklärung. Ich werde das einfach reinwerfen, und dann starte ich mein Head Tag, wir brauchen einen Titel für unser Dokument, und ich werde auch dafür einen dynamischen Wert festlegen. Was auch immer der Meta-Titel der Seite ist, wir werden dort hineinlegen, die Zeichensätze dort hineinlegen, utf-8, setzen hier das Meta-Feld des Darstellungsfensters. Auch hier handelt es sich um den Inhalt von Boilerplate, also sind die Dinge, die Sie auf jeder Website tun würden. Also gehe ich im Moment nicht zu ausführlich darauf ein. Dann füge ich ein spezielles Tag ein, um Teil des Kopfcodes einzufügen, der direkt vom Ghost-Administrator stammt , der nur Ghost-Kopf ist. Darunter werde ich einen Header erstellen und dann sehen wir, dass dieser Header auf jeder Seite angezeigt wird. Zuerst muss ich ein Body-Tag öffnen und dann einen Header mit der Header-Klasse erstellen. Werde die los. Dann bringe ich hier eine Struktur und CSS ein, die ich bereits erstellt habe. Ich werde einige HTML- oder CSS-Klassen einbringen, die ich bereits festgelegt habe. Dies ist keine CSS-Klasse, also werde ich CSS kopieren und einfügen, nur um es gut aussehen zu lassen. Es ist immer besser, wenn Ihre Website gut aussieht. Dann füge ich hier das Header-Logo hinzu, das, wenn es ein Bildset gibt, also wenn das Website-Logo ein anderes dort platziert, wenn es ein Site-Logo gibt, dann laden wir das dort hinein wenn es ein Site-Logo gibt, . Für diejenigen unter Ihnen, die sich fragen, zeigt das AT-Symbol an, dass es sich um ein globales Objekt handelt. Aber auch hier erfahren wir in einem späteren Video mehr über den Lenker. Wenn auf der Website kein Website-Logo enthalten ist, geben wir den Site-Titel aus. Darunter erstellen wir eine Header-Navigation, indem wir einen wirklich praktischen Helfer von Ghost einsetzen, der nur das Navigationstag ist , das unsere Navigation mit einer Standard-HTML-Struktur ausgeben wird . Und nach dem Header werde ich den Hauptinhalt durch dieses Haupttag hier einbringen und dieses spezielle Tag hier mit drei geschweiften Klammern auf beiden Seiten verwenden dieses spezielle Tag hier mit und den Keyword-Body dort hineinlegen. Was dies nun für jede Vorlage tun wird, die die standardmäßig.hbs enthält, wird den Inhalt dieser Vorlage hier in dieses Body-Tag laden. Es gibt noch einen weiteren Schritt, den wir tun müssen, damit dies sowohl auf Post als auch auf den Index geladen wird, und das heißt, ein spezielles Tag an den Anfang dieser Vorlagen zu setzen , das so aussieht. Es sieht ein bisschen wie ein partielles Tag aus, das Sie in einer Sekunde sehen wird , aber es hat dieses Ausrufezeichen. Es ist also ein spezielles Tag, das Ghost anweist, in unsere Standardvorlage um diese Vorlage zu laden. Wie ich bereits erwähnt habe, kopiere ich einfach das CSS und füge es ein, weil ich nicht zu lange in dieser Klasse damit verbringen möchte , CSS zu erstellen, wenn wir nicht hier sind, um das zu lernen. Was ich also tun werde, ist, dass ich hier einen CSS-Ordner habe, ich gehe in meine Vermögenswerte ein und füge ihn ein. Und wie Sie sehen können, verwende ich Bootstrap , ein CSS-Framework, Sie unter getbootstrap.com finden können. Ich verwende Version 5.1.1 und dann habe ich auch eine benutzerdefinierte CSS-Datei davor. Wir werden also in dieser Klasse nicht über CSS sprechen, aber wenn wir dieses CSS dort haben , wird unser Projekt zumindest viel schöner aussehen lassen. Was wir jetzt tun müssen, um diese Änderungen anzuzeigen ist, dass wir eine neue Vorlage hinzugefügt haben, wir müssen unsere Ghost-Instanz neu starten. Also werde ich das jetzt machen. Führen Sie Ghost aus, starten Sie es erneut, und sobald das erledigt ist, können wir hier zu unserem Browser zurückkehren, Beispielbeitrag laden und wir sollten damit rechnen, dass der Standardcode umbrochen wird. Ich glaube, ich habe hier einen Tippfehler gemacht, ich denke, das muss dort ein Raum sein. Entschuldigung dafür, lasst uns Ghost nochmal auffrischen. Und wenn Sie dann zu diesem Beitrag zurückkehren, können Sie sehen, dass jetzt unsere Navigation und unser Site-Titel angezeigt wird. Und das wird das Gleiche sein, wenn wir zu unserer Indexvorlage übergehen. Es gibt einen weiteren Schritt hier, den ich vergessen habe, um dieses CSS einzubringen. Und das ist, um in unsere default.hbs zu gehen und ein Link-Tag hinzuzufügen , um dieses CSS in unser Projekt einzubringen. Und wir werden gehen Link rel style href gleich. Und hier werden wir einen Helfer benutzen. Wir werden den Asset-Helfer verwenden, der das CSS von beiden Bootstrap abrufen wird. Also gib ihm hier einen Dateinamen. Dieser Helfer wird in den Asset-Ordner nach dieser bestimmten Datei suchen. Wenn Ihr CSS also in einem CSS-Ordner verschachtelt ist, müssen Sie es nur dort einschließen, andernfalls wird es jedoch auf den Asset-Ordner ausgerichtet. Ich kopiere das einfach und füge es ein, um etwas Zeit zu sparen, und ändere es dann in main.css. Aktualisieren Sie hier drüben, und Sie können sehen, dass unser Header jetzt schöner formatiert ist. Wenn ich also zu Home gehe, bekommen wir unsere Indexvorlage. Wenn ich zum Beispielbeitrag gehe, bekommen wir immer noch den Header, wir bekommen immer noch den ganzen Code, aber im Hauptinhalt kommt ein anderer Titel durch. Wenn ich dies also in unseren Chrome DevTools anschaue, werden Sie sehen, dass wir den Beitrag , der den Inhalt in der Post-Vorlage ist, innerhalb des Haupt-Tags laden , der den Inhalt in der Post-Vorlage ist, . Wenn ich nach Hause gehe, kannst du das Gleiche wieder sehen, wir betreiben den Index innerhalb von main und das stimmt mit dem überein, was wir hier haben. Also alles über dem Haupt, wir haben den Header, wir haben unseren HTML-Head hier oben und das wird auf jeder Seite geladen , weil wir default.hbs verwenden. Es fühlt sich an, als hätten wir ziemlich viel Zeit mit dieser default.hbs-Datei verbracht. Was ich also tun könnte, ist, dass ich es für dieses Video dort nenne, und in der nächsten Lektion werden wir anfangen, mehr dieser Vorlagen einzubauen, die wir hier in unserem Diagramm sehen. Wir erstellen eine home.hbs-Datei und einige dieser anderen Vorlagen. 7. Optionale Vorlagen und grundlegendes Routing: Im letzten Video haben wir eine default.hbs-Datei zu unserem Ghost-Thema hinzugefügt und diese dann in unseren Beitrag in Indexvorlage aufgenommen. In dieser Lektion werden wir uns die zusätzlichen optionalen Vorlagen ansehen , mit denen wir den Inhalt in index.hbs und post.hbs für bestimmte Routen außer Kraft setzen können. Die offensichtlichste ist die Homepage, und das ist die, die wir zuerst machen werden. Es erfordert tatsächlich, dass wir eine Änderung an unserer Routendatei vornehmen müssen, aber eine sehr geringfügige Änderung. Es gibt tatsächlich einen Teil der Ghost-Dokumentation, der Ihnen zeigt, wie Sie dies im Rahmen anderer Beispiele im Routing machen können. Sie können auf Themes, Routing gehen, und wir haben unsere Basiskonfiguration hier. Wenn wir nach unten scrollen, haben wir unter der Überschrift eine benutzerdefinierte Homepage, wir können unsere Konfiguration so ändern. Wir können unsere Indexsammlung von unserer Root-Route entfernen und sie in den Blog verschieben. Wir können unsere Blog-Posts Slugs im Blog verschachteln und daher können wir unsere home.hbs-Datei so einstellen, dass sie auf der Root-Route ausgeführt wird. Lass uns das jetzt machen. Gehen wir zuerst auf unsere Routen und lassen Sie uns dies in Blog, Slug und dann bloggen. Stellen Sie sicher, dass Sie den Schrägstrich auf beiden Seiten haben, und dann legen wir hier eine bestimmte Route für die Root-Route fest und laden die Home-Vorlage. Jetzt müssen wir diese Home-Vorlage tatsächlich erstellen, also schreibe ich home.hbs und genau wie ich es mit diesen anderen Vorlagen gemacht habe, werden wir nicht viel Zeit damit verbringen, sie in dieser Lektion zu programmieren, wir werden zu kommen das in einem späteren Video. Aber ich möchte Ihnen nur zeigen, wie die Routen funktionieren und die verschiedenen Vorlagen, die auf verschiedenen Routen bedient werden. Ich werde einfach das Gleiche machen, was ich vorher gemacht habe, und lege den h1 da rein und ich bekomme auch das Standardtag dort drin, also lädt es den Header. Jetzt, da wir die neue Vorlage erstellt haben, müssen wir unsere Ghost-Instanz neu starten, also gehe ich hier rüber und führe den Ghost-Neustart erneut aus. Dies ist etwas, was wir tun müssen, wenn wir eine Datei in unserem Ghost-Theme erstellen oder löschen. Wenn wir nun zu unserer Website zurückkehren und zum Stammverzeichnis gehen, drücken Sie die Eingabetaste. Sie werden sehen, dass wir uns jetzt auf der Home-Vorlage befinden. Wenn ich zum Blog gehe und du siehst, dass wir die Indexvorlage ausführen und wenn ich zum Blogbeispiel gehe, wirst du sehen, dass wir die Post-Vorlage ausführen. Nun, genau wie wir im Diagramm sehen, werden wir, wenn wir keine Home-Vorlage haben, index.hbs auf der Homepage-Route ausführen , aber wenn wir das tun, wird das die index.hbs-Vorlage außer Kraft gesetzt. Wenn wir zur nächsten Route gehen, laden wir die Indexvorlage standardmäßig auf der Blogroute. Wie wir gesehen haben, haben wir es wieder auf unseren Strecken verschoben. YAML-Datei ist eher Blog als die Root-Route, aber hier, ob wir nach einer bestimmten Taxonomie filtern oder nicht, werden wir die gleiche Route bekommen. Wie wir in unserer Routendatei sehen können, hier, wenn ich hier darauf zurückkehre haben wir diese Taxonomien hier, wenn ich hier darauf zurückkehre, und dies ermöglicht es uns, den Index über Tags und Autoren herauszufiltern. Denken Sie also daran, dass wir dieses Beispiel-Tag zuvor erstellt haben. Wenn ich hier reingehe und ein Tag, ein Beispiel Tag mache , werden Sie sehen, dass wir die gleiche Vorlage erhalten, wir erhalten die Indexvorlage. Wenn ich hier reingehe und eine andere Taxonomie verwende und gehe, Autor Christopher, was ich klarstellen möchte , ist meine Schnecke hier in meinem Benutzer, also können Sie hier Autor Christopher sehen, das ist die URL, zu der Sie gehen würden, um die Beiträge zu filtern nach autor. werden wir sehen, wenn wir die Indexschleife durchlaufen, wenn wir über Kontexte sprechen und uns später in der Klasse helfen. Aber der Punkt, den ich hier anspreche, ist, dass wir keine Autor- oder Tag-Vorlage eingerichtet haben, wir werden immer standardmäßig auf die Indexvorlage zurückgreifen. Es wird immer die Indexvorlage bereitstellen, wenn wir keine dieser Einstellungen haben. Lassen Sie uns jetzt einige dieser Vorlagen einrichten und sehen, wie dies in Echtzeit geschieht. Was ich tun werde, ist zu unserem Code-Editor und in unseren Casper-Theme-Ordner zurückzukehren und ich werde ein Tag.hbs erstellen und eine autor.hbs-Datei erstellen. In unserem tag.hbs kopiere ich das gleiche Format wie all diese anderen Vorlagen und setze einfach ein Tag hier ein, damit wir wissen, dass wir uns hier in der Tag-Vorlage und der Autorenvorlage befinden. Starten Sie unsere Ghost-Instanz neu, da wir neue Dateien hinzugefügt haben und wenn ich dann hier auf unsere Website zurückkehre und wir hier auf der Author Christopher Route sind, wenn ich Enter drücke, werden Sie sehen, dass sich das Wort hier zum Autor ändert, was bedeutet, dass wir jetzt sind Ausführen der author.hbs-Vorlage jetzt anstelle der index.hbs-Vorlage. Dies überschreibt es natürlich nicht für die Blogroute. Wir haben immer noch die Standard-Indexvorlage für diese, aber wenn wir nach Autor filtern, werden wir die Autorenvorlage sehen, und wenn wir nach einem bestimmten Tag wie dem Beispieltag filtern , werden wir die Tag-Vorlage laden. Das sollte inzwischen ziemlich klar sein. Wir können auch eine Vorlage für einen ganz bestimmten Autor oder ein ganz bestimmtes Tag erstellen. Das mache ich jetzt sofort. Wir haben hier ein Tag namens „Erste Schritte“. möchte dir das nur zeigen, damit ich dir zeigen kann, dass es einen Unterschied gibt. Im Moment werden beide Tags diese Tag-Vorlage laden. Aber was ist, wenn wir einen anderen Code basierend auf einem bestimmten Tag oder einem bestimmten Autor ausführen möchten? Nun, was wir in diesem Fall tun können, ist, eine benutzerdefinierte Autorenvorlage für diese bestimmte zu erstellen . Ich glaube, ich habe dort eine neue Datei in der falschen geklickt. muss es in unserem Casper-Theme-Ordner machen und was ich machen werde , ist eine Vorlage mit Autorenstrich gefolgt von der Schnecke des Autors zu erstellen, also wird es für mich Christopher, hbs sein und hier werde ich diesen Code kopieren, Geh hier rüber und ich sage einfach Christopher Autorenvorlage. Dann mache ich dasselbe für Tag, ich gehe zu New File, Tag Dash gefolgt von der Schnecke des Tags, das ist Beispieltag, gefolgt von Punkt hbs und mache dasselbe wie zuvor hier , Beispiel für Tag-Vorlage. Da wir neue Vorlagen erstellt haben, werde ich neu starten und dann zu den ersten Schritten hierher gehen , weil wir diese Vorlage nicht überschrieben haben, sie wird immer noch die Tag-Vorlage verwenden. Aber wenn wir hier zum Beispieltag gehen, werden Sie sehen, dass wir jetzt eine andere Vorlage als die Standard-Tag-Vorlage ausführen. Wenn ich hier zu Autor Christopher gehe, wirst du sehen, dass wir die Christopher-Autorenvorlage ausführen während wir zum Ghost-Autor gehen, dem die Standard-Autorenvorlage ausgeführt wird. Was Sie sehen, ist die Themenstruktur in Aktion. Ich weiß, dass hier nicht viel los ist, weil es keinen Inhalt gibt. Darauf kommen wir in einem späteren Video. Dies sollte jedoch beginnen zu verstärken, was in diesem Diagramm hier passiert. Wir haben unsere Kerndateien unter index.hbs und unseren post.hbs und dann haben wir all diese zusätzlichen Vorlagen, mit denen wir bestimmte Routen anpassen können. Ich gehe jetzt weiter nach unten im Diagramm und schaue mir die zusätzlichen Vorlagen an , die oben auf dem post.hbs sitzen. Wie wir hier für die Seite sehen, , wenn wir keine spezifischen Vorlagen für die Seite festlegen wird es, wenn wir keine spezifischen Vorlagen für die Seite festlegen, standardmäßig veröffentlicht, was dieselbe Vorlage wie ein Beitrag sein wird. Aber wenn wir eine page.hbs-Datei festlegen, wird das überschrieben, was in Beiträgen angezeigt wird. Was ich tun werde, ist, dass ich das jetzt durchgehe. Ich gehe wieder in unser Thema ein, lass uns einige dieser Dateien schließen und ich füge eine Seite.hbs hinzu. Was ich noch einmal mache, ist das durch „Dies ist eine Seite“ zu ersetzen und dann die Ghost-Instanz neu zu starten. Gehen Sie jetzt zurück zu unserer Website, wenn wir in einem bestimmten Beitrag sind, der sich daran erinnert, dass wir die Route zum Blog geändert haben und dann von der Post Slug gefolgt sind. Wir werden in einem Beitrag sein, aber wenn wir auf eine Seite gehen, wird es sagen: „Dies ist eine Seite.“ Die nächste Vorlage, die diese Seitenvorlage und die Beitragsvorlage außer Kraft setzt, ist eine benutzerdefinierte Vorlage. zum Diagramm zurückkehren, erstellen wir eine benutzerdefinierte Vorlage, indem wir einen benutzerdefinierten Strich gefolgt von einem beliebigen Namen schreiben , über den wir entscheiden. Die Art und Weise, wie wir dies für einen bestimmten Beitrag oder eine bestimmte Seite festlegen, ist im Admin. Das zeig ich dir jetzt sofort. Kehren wir hier zu unserem Thema zurück. Lassen Sie uns eine Gewohnheit erstellen. Was ich tun werde, werden Sie später in der Klasse sehen, ist ein alternatives Layout für Seiten und Beiträge mit einer Bildkopfzeile zu haben. Ich nenne das eine custom-header.hbs. Im Moment, da wir nicht auf den Code eingehen, wir nur auf die Konzepte von Routen und Vorlagen ein, ich werde dieses benutzerdefinierte Template Set in Ghost Admin aufrufen. Auch hier haben wir eine neue Datei erstellt, daher müssen wir unseren Server erneut neu starten. Auch hier sollte das nicht allzu lange dauern, wenn wir es lokal betreiben, was wir sind, und dann gehe ich hier in unseren Admin und lass uns das einfach vor dem Beispielbeitrag sagen. Darauf klicke ich. Ich gehe zu den Einstellungen hier drüben. Scrollen Sie nach unten und ich denke, ich muss mich hier aktualisieren. Lass uns nochmal gehen, scrollen Sie nach unten. Sie können sehen, dass wir jetzt ein zusätzliches Feld namens template haben, und wir haben dieses Dropdown-Menü. Wir können entweder die Standardvorlage oder diese auswählen, deren Name dem entspricht, was wir nach dem benutzerdefinierten Bindestrich im Vorlagennamen gesetzt haben . Wir nannten es Custom-Header. Ich klicke hier auf diese Vorlage für die Kopfzeile „Update“, und wenn wir diesen Beitrag anzeigen, werden Sie sehen, dass es heißt, Benutzerdefinierte Vorlage, In Ghost Admin festlegen. Dies wird sich von den anderen Beiträgen wie Beispielpost unterscheiden, die immer noch die Post-Vorlage verwenden, und das Gute an dieser Vorlage ist, dass wir dies auch auf einer Seite festlegen können. Alles, was wir tun müssen, ist auf unsere Seite zu gehen. Nehmen wir an, es ist ein Beitrag, gehen Sie in unsere Seiteneinstellungen und wir können dies auch auf eine alternative Vorlage festlegen. Wir sind hier fast durch das Diagramm. Wir haben nur Page-Slug, Post-Slug, und genau wie wir es hier für Autor-Schlacke und Tag-Schlacke getan haben, können wir eine benutzerdefinierte Vorlage für eine ganz bestimmte Seite oder eine benutzerdefinierte Vorlage für einen ganz bestimmten Beitrag verwenden . Vollständigkeit halber Lassen Sie uns das auch der Vollständigkeit halber durchgehen, obwohl es genau das gleiche Konzept ist wie die anderen. Ich gehe hier rein und erstelle, lass es uns für die About-Seite machen. Es geht um Seitenschnecken, also machen wir einfach über die Seite, und dann ist dies die Vorlage speziell für die Über-Seite. Dann lasst es uns auch für den Posten machen. Lassen Sie uns einen Beispielbeitrag machen. Wir werden eine bestimmte Vorlage für einen Beitrag nach dem Beispiel erstellen. Dies ist die Vorlage speziell für den Beispiel-Post. Starten Sie unseren Ghost-Server erneut, weil wir einige neue Dateien erstellt haben. In den späteren Videos müssen wir das übrigens nicht so oft tun, weil wir gerade alle unsere Dateien erstellen. Aber sobald wir anfangen, hier Code zu erstellen, wurden die Dateien bereits erstellt, und daher müssen wir unseren Server nicht jedes Mal neu starten, nur damit Sie es wissen. Wenn Sie es satt haben, einen Neustart zu starten. Zurück zu unserer Ghost-Website, wenn wir zur About-Seite gehen, können Sie sehen, dass wir die Vorlage jetzt speziell für die About-Seite ausführen. Wenn ich zum Blog-Beispielbeitrag gehe, kannst du sehen, dass wir die Vorlage speziell zum Beispiel für den Beitrag ausführen. Um dies nur von allem anderen zu unterscheiden, werden Sie sehen, dass wir die benutzerdefinierte Vorlage ausführen, und wenn wir zu einem anderen Blog gehen, das keine benutzerdefinierte Vorlage hat drauf oder hat eine postspezifische Vorlage drauf. Gehen wir einfach zu diesem Thema, Design. Sie können sehen, dass es die Standardbeitragsvorlage verwendet. Es wird nur post.hbs standardmäßig verwendet, wenn es keine der anderen optionalen Vorlagen verwendet, die auf post.hbs sitzen. Das deckt das gesamte Diagramm hier ab. Es gibt einige andere Routen und Vorlagen, aber dies sind die Kernrouten und Vorlagen. Wenn Sie mehr über die anderen Routen erfahren möchten, können Sie sich die Dokumentation anschauen. Es ist nicht zu kompliziert. Wenn wir zur Struktur gehen, werden Sie feststellen, dass wir hier auch einige andere haben, wie private.hbs und error.hbs. Ganz zu schweigen davon, dass wir auch die amp.hbs haben. Dies sind alles zusätzliche Vorlagen, die in Bezug auf die Struktur nicht wesentlich zu verstehen sind. Während unser Leitfaden hier drüben diejenigen sind, die wichtig zu verstehen sind, weil sie auf Ihren Kernvorlagen sitzen, die index.hbs und post.hbs sind. Ich denke, das war noch eine lange und wir sind noch nicht auf Routen gekommen, also werden wir im nächsten Video auf Routen einsteigen. Dies sollte jedoch erläutern, was dieses Diagramm bedeutet und wie wir beginnen können, verschiedene Routen für unser Ghost-Thema mit verschiedenen Vorlagen anzupassen. 8. Benutzerdefiniertes Routing: In diesem Video werden wir etwas tiefer in das Routing eingehen. Im letzten Video haben wir uns unsere routes.yaml-Datei angeschaut, die sich hier in unserem Einstellungsordner befindet, und wir haben eine Änderung vorgenommen. Wir haben unsere Indexvorlage oder unseren Blog, wie Sie sagen, von unserer Routenroute entfernt und durch unsere Home-Vorlage ersetzt. Aber es gibt noch viel mehr, was wir innerhalb von Routen tun können. Wir werden in diesem Video nicht auf absolut jedes Routenszenario eingehen, da ich es nicht für besonders praktisch halte. Aber um uns den Einstieg zu erleichtern, schauen wir uns die Dokumentation an. Wenn Sie jemals wissen, was mit Routen zu tun ist, können Sie sich die Dokumentation hier ansehen oder wenn Sie eine Erklärung von mir bevorzugen, können Sie sich meinen Artikel ansehen, in dem ich tiefer in die Einrichtung und Aktualisierung von Routen eingehe. Wir gehen auf grundlegende Routen, grundlegende Routen mit dynamischen Daten, grundlegende Routen mit benutzerdefinierter Formatierung, Sammlungen, Sammlungsfilterung, die Liste geht weiter. Ich habe meinen Guide so organisiert, dass ich das Gefühl habe, dass es von unten nach oben sinnvoller ist. Dann denke ich, dass diese Leute in der Dokumentation fertig sind, aber verschiedene Striche für verschiedene Leute, je nachdem, was dir hilft, es besser zu verstehen. Aber in diesem Video werden wir Ihnen einige Beispiele für einige der Dinge zeigen , über die sie hier sprechen. Das wird Ihnen helfen, so ziemlich jede Art von Route einzurichten , die Sie möchten, auf Ihrer Ghost-Site. Wenn wir nach unten scrollen, können wir die Basiskonfiguration sehen, die wir zuvor hatten, nämlich dass ein einzelner Index auf der Routenroute bedient wird und unsere einzelnen Routen auch auf dieser Routenroute über ihre spezielle Schnecke bedient werden. Dann hast du auch die Taxonomien. Wenn Sie nach einem bestimmten Tag filtern möchten, können Sie diese Struktur hier oder diese Struktur verwenden. alles haben wir im letzten Video gesehen. Aber wenn wir hier nach unten scrollen, können wir einige dynamischere Routen und so genannte benutzerdefinierte Routen verwenden. Los geht's. Grundlegendes Routing. Was wir tun können, ist, dass wir buchstäblich unsere eigene Route einrichten und dann eine Vorlage festlegen können , die angezeigt wird, wenn wir zu dieser Route gehen. Lass uns das jetzt machen. Lass mich zu meinem Code-Editor wechseln. Lassen Sie mich einfach etwas erstellen, das als Spezialseite bezeichnet wird. Lass uns einfach hierher gehen und ich nenne es Spezialseite. Dieser Dateiname folgt keiner unserer Konventionen von zuvor, daher wird er in bestimmten Situationen nicht automatisch geladen. Wir benutzen dies nur, um eine Route zu bevölkern. Auch hier werde ich mich diesmal nicht einmal um das Standardtag kümmern, ich rufe einfach diese spezielle Seite auf. In der Tat möchten wir möglicherweise eine Vorlage erstellen, in der wir den Standard-Wrapper nicht haben, der umgeht. Vielleicht ist das diese spezielle Seite. Dann werde ich in meiner Routendatei das einfach mit einem Schrägstrich auf jeder Seite zu unseren Routen hinzufügen. Ich erstelle nur eine Route, eine spezielle Seite, und danach gebe ich den Vorlagennamen ohne die.hbs ein. Ich klicke auf „Speichern“. Da wir Änderungen an unserer Routendatei vorgenommen haben, starten Sie unseren Ghost-Server neu. Wenn ich jetzt hier auf meine Website zurückkehre, verschieben wir sie dorthin und gehen wir zu diesen speziellen Seitenrouten. Sie können sehen, dass wir uns auf dieser speziellen Seitenvorlage befinden, die keinen unserer Boilerplate-Code enthält. Nicht das praktischste Beispiel, sondern zeigt nur, dass wir unsere eigenen benutzerdefinierten Vorlagen erstellen und auf benutzerdefinierte Routen laden können . Eine Erweiterung davon sind benutzerdefinierte Kanäle, die ich in nur einer Sekunde erreichen werde, weil sie etwas komplizierter sind. Was ich stattdessen tun möchte, ist Ihnen zu zeigen, wie Sie Ihre Core Post-Sammlung hier in verschiedene „Sammlungen“ aufteilen können , weil ich denke, dass der Wortlaut hier von Ghost etwas verwirrend sein kann. Aus der Perspektive Ihres Administrators gibt es eigentlich nicht mehrere Sammlungen. Was ich damit meine, ist, wenn wir in den Admin gehen, indem wir Ghost nach unserem Website-Namen setzen, können Sie sehen, dass es hier nur eine Sammlung von Beiträgen gibt. Es gibt nicht mehrere Sammlungen. Aber was wir tun können, ist verschiedene Sammlungen über unser Routing zu simulieren , und wir können diese über Tags aufteilen. Werfen wir einen Blick in die Dokumentation, was ich damit meine, wenn wir zu den Sammlungen scrollen, haben wir die Standardsammlung, die wir zuvor hatten, wir verwenden eine benutzerdefinierte Homepage, die wir im letzten Video eingerichtet haben, und dann können wir auch zwei verschiedene „Sammlungen“ für etwas erstellen, als hätten wir vielleicht einen Blog und einen Podcast auf derselben Website gehostet, dann könnten wir sie mit dieser Syntax hier aufteilen. Machen wir das jetzt nur zu Demonstrationszwecken. Gehen wir hier auf unsere Beiträge und sagen wir, wir starten einen Podcast. Ich werde eine neue Episode erstellen, Podcast Episode 1, und dann gebe ich ihr das primäre Tag von Podcasts. Damit dies funktioniert, müssen wir natürlich alle diese anderen veröffentlichten Beiträge durchgehen und das primäre Tag in Blog ändern. Ich verschiebe das nach vorne, um es zum primären Tag zu machen. Drücken Sie dazu auf Aktualisieren. Ich werde hier einfach schnell durchfahren und das bei jedem einzelnen Beitrag machen. Ich langweile dich nicht, indem du mir zuschauen lasse, wie ich es in Echtzeit mache. Sofern ich keinen verpasst habe, sollten wir alle unsere Blogbeiträge mit Blog als primärem Tag haben. Ich denke, wir können hier in der Zusammenfassung sehen, dass das stimmt. Dieser Podcast Episode 1 ist Podcast. Sagen wir einfach, wir möchten den Podcast nicht im selben Feed wie die Blogs zeigen, und wir möchten die Blogs nicht im selben Bereich wie die Podcasts zeigen. Ergibt Sinn, oder? Was wir tun können, ist diese verschiedenen Kollektionen zu erstellen oder zu simulieren. Wenn ich in meine routes.yaml-Datei gehe, kann ich hier einen Filter hinzufügen, damit nur Beiträge angezeigt werden , die mit Blog getaggt wurden. Wenn wir hier zur Dokumentation zurückkehren, haben wir das Beispiel genau hier. Das ist alles, was wir hinzufügen müssen. Wie das Beispiel zeigt, würden wir sie auch hier einfügen, wenn wir eine benutzerdefinierte Vorlage nur für den Blog und eine benutzerdefinierte Vorlage nur für den Podcast hätten, aber wir können für beide dieselbe Indexvorlage verwenden. Das ist kein Problem. Was ich tun werde, ist, die Struktur für unseren Podcast zu kopieren und dann alle Instanzen des Blogs durch Podcasts zu ersetzen. Jetzt simulieren wir zwei verschiedene Sammlungen auf unserer Website und tun dies über das primäre Tag. Lassen Sie uns unsere Ghost-Instanz neu starten, damit wir diese Änderungen auf unserer Website sehen können. hier zu unserer Website zurückkehren, funktioniert die spezielle Seite noch. Das ist großartig. Wenn wir jetzt zum Blog gehen, werden wir sehen, und das ist etwas, für das wir tatsächlich eine Post-Schleife haben müssen. Ich überspringe ein bisschen weiter, nur damit du sehen kannst, dass das tatsächlich funktioniert. Ich wollte warten, bis wir etwas Code schreiben, aber ich muss nur ein bisschen Code schreiben , damit Sie sehen können, was hier los ist. Ich werde nur für jede Schleife erstellen damit ich Ihnen zeigen kann, welche Beiträge in dieser Vorlage zurückgegeben werden. Ich schreibe einfach Titel und formatiere das als Liste. All dieser Code durchläuft alle Beitragstitel, die auf dieser bestimmten Route bereitgestellt werden. Wenn ich wieder hierher gehe, erfrischen Sie sich. Sie werden auf der Blog-Vorlage sehen, dass wir alle Titel der Beiträge sehen können, die das primäre Tag des Blogs haben. Aber wenn wir jetzt zu Podcasts gehen, werden Sie sehen, dass wir nur den Titel der Podcast-Episode haben. Wie Sie hier sehen können, verwenden wir immer noch dieselbe Vorlage, der Wortindex wird auf beiden angezeigt, aber was wir tun, ist, zwei verschiedene Sammlungen über unsere routes.yaml-Datei zu simulieren. Um es klar zu sagen, wenn wir in unseren Admin gehen, werden diese alle in derselben Gegend leben. gibt es hier nur eine Sammlung Im Gegensatz zu anderen Publishing-Plattformen gibt es hier nur eine Sammlung. Das ist etwas Wichtiges zu beachten. Deshalb verwende ich gerne das Wort Simulate verschiedene Sammlungen, da es im Back-End nur eine Sammlung gibt und wir nur verschiedene basierend auf dem primären Tag simulieren . Taxonomien sind meiner Meinung nach ziemlich einfach zu verstehen und es gibt nicht viele Möglichkeiten, diese zu ändern. Wir können Taxonomien ganz loswerden oder wir können diese Wörter hier ändern. Aber abgesehen davon gibt es nicht viel, was Sie mit Taxonomien ändern können. Die dritte Art von Route, die ich in diesem Video durchgehen werde, bevor wir weitermachen, sind Kanäle. Channels, wie es in der Dokumentation heißt, ist, wenn wir nach unten scrollen, wenn wir nach unten scrollen, nach Taxonomien, ein benutzerdefinierter Stream paginierter Inhalte, der einem bestimmten Filter entspricht. Der beste Weg, dies zu betrachten, ist eine Reihe von permanenten Suchergebnissen. Wir können einen Teil unserer Sammlung filtern und eine Route zum Anzeigen dieses gefilterten Inhaltsstücks erstellen . Hier in der Dokumentation können Sie sehen, dass es genau das Gleiche ist wie eine benutzerdefinierte Route, außer dass wir den Controllerkanal darunter legen, und dann setzen wir den Filter ein. Lass uns das jetzt machen. Denken Sie daran, dass wir früher unser eigenes Tag und unseren eigenen Autor erstellt haben, lassen Sie uns einen benutzerdefinierten Kanal erstellen. Ich nenne es einfach Custom Channel. Aber Sie können diese Route natürlich machen, was immer Sie wollen. Dann schreibe ich Controller-Kanal. Das wird Ghost sagen, dass dies ein Kanal und keine normale benutzerdefinierte Route ist. Was ich dann mache, ist den Filter hinzuzufügen. Es wird Tag sein, muss ein Beispiel-Tag sein, und dann fügen wir das Plus hier hinzu, um eine andere Bedingung mit dem primären Autor hinzuzufügen, was genau wie das primäre Tag von Christopher ist. Wir können dies auch anpassen, wenn wir möchten. Wir könnten eine andere Vorlage hinzufügen. Wir könnten eine sekundäre Indexvorlage erstellen, wenn wir nicht möchten, dass sie hier auf die normale Indexvorlage standardmäßig eingestellt wird. Aber ich denke, das sollte in Ordnung sein. Wenn ich dann hier aktualisiere, weil wir jedes Mal aktualisieren müssen , wenn wir die routes.yaml-Datei ändern, und wir gehen zu diesen Routen auf unserer Website, dem benutzerdefinierten Kanal. Jetzt können Sie sehen, dass wir nur einen Beispielbeitrag haben, denn dies ist der einzige Beitrag, der mit einem Beispieltag versehen wurde und vom Hauptautor von Christopher stammt. Eigentlich gibt es nur einen Beitrag, der vom Autor von Christopher stammt und als Beispieltag markiert wurde. Aber du verstehst den Punkt. Es filtert alle unsere Beiträge und erstellt eine bestimmte Route für diesen gefilterten Inhalt. Dies ist wirklich wichtig, denn wenn Sie eine große Publikation haben und viele Inhalte hier einfügen, möchten Sie sie auf verschiedene Arten anzeigen. Die Art und Weise, wie Sie Ihre Inhalte organisieren, natürlich überwiegend über Tags, können Sie auch über den Autor filtern, aber Tags bilden die Grundlage Ihrer Organisation. Über Routen können wir diese Tags verwenden, diese Autoren verwenden, diese Autoren verwenden, um benutzerdefinierte Kanäle und benutzerdefinierte Sammlungen zu erstellen. Es gibt noch ein paar Beispiele, über die ich hier sprechen könnte, aber ich denke, es wäre am besten, diese einfach zu lesen. Viele davon gelten nicht für Ihre spezifischen Umstände, sondern die Kernprinzipien hier, benutzerdefinierte Routen, benutzerdefinierte Kanäle, bei denen es sich im Wesentlichen um sondern die Kernprinzipien hier, benutzerdefinierte Routen, benutzerdefinierte Kanäle, benutzerdefinierte Routen, benutzerdefinierte Kanäle, eine benutzerdefinierte Route mit Controllerkanal und Filter handelt, und dann Aufteilen Ihrer Sammlung in verschiedene Sammlungen, die ich gerne simulieren nenne, und verwenden Sie ein bestimmtes Tag oder andere definierende Qualität, um die Sammlung in diese verschiedenen Sammlungen aufzuteilen. Ich habe das Gefühl, dass das das wichtigste Zeug ist, das Sie in Bezug auf das Routing in Ghost wissen müssen. Wie ich bereits erwähnt habe, denke ich, dass Routing und die benutzerdefinierte Vorlagenstruktur in Ghost etwas sind, das für diese Plattform ziemlich einzigartig ist und Ihnen viel Flexibilität in Bezug auf SEO oder wie Sie Ihre Inhalte anordnen möchten. Es ist ein wirklich intelligentes System, das, sobald Sie den Kopf haben, sehr leistungsfähig ist und Sie auf unendliche Weise mit der Anpassung beginnen können. Auch wenn die Dokumentation auf der offiziellen Website für Sie nicht besonders sinnvoll ist, können Sie sich auf meinen Leitfaden beziehen, dies auf eine Weise erklärt, die für mich sinnvoller ist. Aber in Bezug auf das Lernen lernen manche Leute gerne durch Dokumentation, manche Leute lernen gerne visuell, manche Leute lernen gerne durch solche Leitfäden, also was auch immer Ihnen hilft, die Konzepte zu verstehen. Wie immer, wenn Sie nichts verstehen, können Sie unten immer eine Frage stellen. Zwischen diesen beiden Ressourcen sollten Sie jedoch in der Lage sein, benutzerdefiniertes Routing zu verstehen. Wir lassen es einfach da und schreiben jetzt tatsächlich etwas Code. Wir sehen uns im nächsten Video. 9. Programmieren im Post-Kontext: In den letzten drei Lektionen haben wir unser Ghost-Thema mit einer Reihe benutzerdefinierter Vorlagen eingerichtet, wie hier zu sehen ist. Und wir haben unsere routes.yaml-Datei aktualisiert, um unsere eigenen benutzerdefinierten Routen zu erstellen. In diesem Video werden wir tatsächlich damit beginnen, unsere Vorlagen zu codieren, weil wir hier offensichtlich nur das Minimum nur um den Punkt von Routen und Vorlagen zu veranschaulichen. Offensichtlich möchten wir nicht, dass dieser Inhalt der einzige Inhalt ist, der auf der About-Seite angezeigt wird. Es ist an der Zeit, tatsächlich einige der dynamischen Inhalte von unserem Ghost-Administrator einzubringen und sie in unserem Thema anzuzeigen. Was ist sonst der Sinn? Was ich tun werde, ist zur Dokumentation zu gehen und ich habe die Seite zum Kontext bereits geöffnet. Kontext ist auch der nächste Abschnitt in meinem Leitfaden. Denken Sie an die vier Abschnitte von Vorlagen, Routen, Kontexten und Helfern. Kontext ist im Grunde wie Umfang in der Entwicklung von Geisterthemen. Was wir wissen müssen, ist, welche Daten wir uns in welchen Vorlagen zur Verfügung haben. Wie es in der offiziellen Geisterdokumentation heißt, gibt es sechs verschiedene Kontexte, und ich gehe in meinem Leitfaden hier näher auf jeden von ihnen ein. Wenn Sie die vollständige Liste der Attribute für jeden Kontext anzeigen möchten, können Sie zur Dokumentation wechseln. Aber lasst uns stecken bleiben und anfangen, unsere Vorlagen zu codieren. Mit der Zeit werden wir ein tieferes Verständnis dafür entwickeln, was diese Kontexte tatsächlich bedeuten. Wenn ich hier zu meinem Code-Editor gehe, schließe ich alle meine geöffneten Fenster hier oder öffne lieber Tabs. Ich gehe in die index.hbs-Vorlage. Nun zuvor, wie wir es gesehen haben, um Kanäle zu demonstrieren, musste ich unsere erste Foreach-Schleife einsetzen. Aber ich bin nicht sehr detailliert darauf eingegangen, wie das funktioniert. Offensichtlich werden wir bei Vorlagen wie Index oder anderen benutzerdefinierten Indexvorlagen eine Schleife von Beiträgen durchlaufen. Das erste Tag, das wir sehen werden, ist das Tag für Foreach. Was das tut, ist, dass es jeden Beitrag durchläuft , der auf der bestimmten Route angezeigt wird, die diese Vorlage anzeigt. Dann haben wir innerhalb dieses Blocks Zugriff auf alle Attribute im jeweiligen Kontext dessen, was wir durchlaufen. In Ghost-Themes verwenden wir nur eine Foreach-Schleife, die verschiedenen Posts in unserer Gesamtsammlung zu durchlaufen. Dann haben wir innerhalb jeder Iteration der Schleife Zugriff auf alle Attribute des Post-Kontextes. Okay, also lasst uns hier zur Theorie zurückkehren und uns die Kontexte ansehen. Wir können hier zum Post-Kontext gehen. Wenn wir nach unten scrollen, sehen wir die Liste der Objektattribute. Wie Sie sehen können, habe ich Tidal in dieser speziellen Schleife verwendet, aber wir haben Zugriff auf die URL, das vorgestellte Bild. Wir haben Zugriff auf all diese Daten innerhalb jeder Iteration der Post-Schleife. Jetzt haben wir natürlich Zugriff auf diese Informationen einer Post-Vorlage sowie für einen einzelnen Beitrag. Ich zeige Ihnen, wie Sie diesen Kontext in Kürze öffnen können. Aber im Moment, verstehe das innerhalb dieser Foreach-Schleife für jede Iteration dieser Schleife. So haben wir den Inhalt in diesem Block Zugriff auf die Post-Kontexte. Das gibt uns die Möglichkeit, Daten von jedem einzelnen Beitrag, der auf unserer Ghost-Website enthalten ist, abzurufen . Was ich tun werde, ist, dass ich das auf etwas Besseres als nur eine Liste aufbauen werde. Hier oben tippen wir den Blog ein. Hier sehen Sie unsere Liste der Blogbeiträge, aber keiner von ihnen ist verknüpft. Das ist also ziemlich nutzlos. Das ist für uns momentan nicht sehr nützlich. Eine Sache, die ich tun möchte, bevor wir fortfahren , ich dachte nur, ist, diese Podcast-Episode loszuwerden und alle Blog-Tags zu entfernen , weil wir keinen Blog und keinen Podcast auf diesem speziellen verwenden werden webseite. Das war nur zu Demonstrationszwecken. Also ertragen Sie mich, während ich das mache, ich werde schnell vorwärts gehen und ich werde Sie treffen, nachdem ich die Blog-Tags aus allen unseren Beiträgen entfernt habe. Das ist erledigt. Der Hauptgrund, warum ich das bereinigen wollte, ist, dass wir die Liste der Tags für jeden einzelnen Beitrag ausgeben werden . Ich wollte keinen Blog über sie haben. Nachdem ich die Seite aktualisiert habe, können Sie sehen, dass wir alle unsere Blogbeiträge verloren haben. Ich muss nur zurück in meine routes.yaml-Datei gehen und sie auf das zurücksetzen, was es vorher war. Ich nehme den Filter weg und nehme diese Podcast-Sammeleffekte weg. Ich nehme hier einige dieser anderen Routen weg, weil wir sie nicht benutzen müssen. Das war nur ein Begriffsbeweis. Ich werde hier die Spezialseite los. Lösche das. Das ist alles, was wir für unser spezielles Ghost-Thema brauchen. Ich werde natürlich unsere Ghost-Instanz neu starten, da wir Änderungen an der Routendatei vorgenommen und eine Lenkerdatei entfernt haben . Wenn ich hier aktualisiere, kannst du die vollständige Liste aller Beiträge sehen, die wir auf unserer Website haben. Fangen wir an, diese auszubauen. Wenn ich die routes.yaml-Datei schließe. Was ich tun werde, ist, einige der Attribute zu verwenden , die wir auf dem Außenpostenobjekt haben, und eine schöne Postkarte zu erstellen , auf die wir dann klicken können , um auf die Seite mit einem einzigen Beitrag zu gelangen. Hier sind die Referenzleute. Wenn Sie jemals verloren gehen, welche Informationen Sie von einem bestimmten Beitrag erhalten können, ist dies alles hier in der Ghost-Dokumentation aufgeführt. Aber im Moment fange ich an, diese Beiträge zu schreiben. Anstelle einer Liste hier werde ich vor allem ein bisschen Formatierung machen . Ich werde das alles in einen Seitenbreitencontainer legen , damit es nicht die volle Breite der Seite erweitert. Es sei denn, wir haben natürlich eine kleinere Bildschirmgröße. Was ich hier ablegen werde, sind alle Beiträge. Dann füge ich eine kleine Beschreibung hinzu. Hier findest du alle Beiträge. Okay, dann erstelle ich einen Container für diese Beiträge. Diese Klassennamen beziehen sich auf Klassen, die ich bereits in einer CSS-Datei eingerichtet habe. Wenn Sie sich fragen, woher meine Entscheidungsfindung hierher kommt, dann ist dies der Grund. Aber für Sie wird es anders sein, je nachdem welche Stile und Struktur Sie für Ihr eigenes Geisterthema wünschen. Aber wenn ich ein Inside bei div mit der Klasse von Beiträgen habe, kann ich sie in Zeile formatieren. Was ich dann in jeder Iteration dieser Schleife mache, ist, eine Postkarte zu öffnen und ihr dann die zusätzliche Kartenklasse zu geben, bei der es sich um eine Bootstrap-Klasse handelt. Wir geben ihm ein paar nette Formatierungen. Dann öffne ich ein if-Tag. Auf diese Weise können wir zuerst prüfen, ob das Attribut tatsächlich festgelegt ist. Wenn es ein vorgestelltes Bild gibt, führen wir den Code in diesem Block genau hier aus. Und wenn nicht, werde ich die L-Anweisung eingeben , wir werden den Code in diesem Block ausführen. Ich möchte das Bild immer noch platzieren, um anzuzeigen, ob kein vorgestelltes Bild vorhanden ist. Ich werde nur das Bild SRC einbringen. Sagen wir einfach, das ist unser Platzhalterbild. Diese Website via.placeholder.com ermöglicht es uns , ein Platzhalterbild mit allen gewünschten Dimensionen zu erstellen. Also werde ich diese Dimension einfach einbringen , weil sie mit den Fotos übereinstimmt, die wir bereits haben, auf unserer Geisterseite. Dann werde ich für unsere, wenn zutreffende Aussage eintragen, normalerweise möchte ich diese Bilder basierend auf bestimmten Bildschirmgrößen optimieren. Aber im Moment gebe ich ihm nur ein einziges SRC und verwende die Hilfe unter Bild-URL. Wir haben uns noch nicht geholfen, aber es gibt wenig Keywords, die uns helfen, etwas in der Entwicklung von Ghost-Themas zu tun. Dann nehme ich das vorgestellte Bild auf. Ich frage nach der mittleren Größe. Außerdem füge ich hier eine weitere Bedingung für die Alt hinzu, wenn es eine Alt gibt. Ich öffne noch ein anderes wenn hier. Wenn für diesen bestimmten Beitrag ein vorgestelltes Bild alt festgelegt wurde , möchte ich das alt-Tag sehen. Innerhalb des alt-Tags möchte ich den Wert des vorgestellten Bildes alt eingeben. Ich gebe ihm auch eine Klasse zum Formatieren. Ich gebe ihm ein Postkartenbild, das ist eine Klasse, die ich definiert habe, und dann die Bootstrap-Klasse des Kartenbildes oben. Wenn wir wollen, können wir das speichern und uns ansehen, was wir bisher haben. Wir können zurück hierher gehen und Sie können sehen, dass im Moment nichts durchkommt. Wir haben unsere Postkarten und sehen aus, als hätten wir hier in unserem SRC einen Fehler gemacht. Mein Fehler war, vorgestelltes Bild zu sagen. Dieser Name wäre für mich sinnvoller, aber in Ghost ist es nur ein Feature-Image. Ich speichere das auf, geh zurück, und jetzt kannst du sehen, dass die Bilder für jeden Beitrag angezeigt werden. Bauen wir unsere Karte hier weiter. Nach dem vorgestellten Bild werde ich ein Div mit der Klasse des Kartenkörpers öffnen. Was ich tun werde, ist einfach der Struktur der Kartenkomponente zu folgen, wie es in Bootstrap Version 4 vorhanden ist , glaube ich, Nr. 5.1.1. Wenn Sie dieselbe Bootstrap-Version haben, erhalten Sie das gleiche Ergebnis. Ich werde das hier ziemlich schnell machen, weil dies eine HTML- und CSS-Klasse ist. Ich möchte Ihnen nur zeigen, wie wir tatsächlich einige dieser dynamischen Daten von Ghost einbringen. Wir haben ein h5 mit einer Kartenklasse von Kartentitel. Ich schachtel dort einen Link für unsere URL und lege dann natürlich einen Titel ein. Darunter füge ich ein p-Tag mit der Klasse des Kartentextes hinzu und lege dort den Auszug des Beitrags ein. Wenn wir nun unsere Seite in unserem Browser speichern und aktualisieren, können Sie sehen, dass wir diese Karten mit dem Bild, dem Titel und einem Auszug aus dem Beitrag haben. Wenn ich hier auf den Titel klicke, bringe ich zur Vorlage dieses Beitrags, für die wir den Code noch nicht erstellt haben. Wir werden in zukünftigen Videos darauf aufbauen. Aber jetzt kodieren wir unsere Post-Vorlage tatsächlich , denn das ist wichtig, dass wir richtig machen. Wir haben momentan diese alternative Vorlage läuft. Wie Sie in dem Titel sehen können, den wir zuvor eingerichtet haben, heißt es, dass die benutzerdefinierte Vorlageneinstellung an admin geht. Wenn wir uns den Beispielbeitrag ansehen, heißt es, dass diese Vorlage speziell zum Beispiel Post ist. Ich gehe zum dritten, was, wie Sie sehen können, nur die Standard-Post-Vorlage verwendet. Fangen wir an, das auch zu codieren. Wenn ich in die post.hbs-Datei gehe und mich an Leute erinnere, dass unsere Website auf der grundlegenden Ebene nur ein index.hps und ein post.hbs benötigt. Wenn Sie wissen, wie man beides kodiert, können Sie theoretisch die gesamte Website erstellen. Was ich tun werde, ist, wie wir es mit dem Index gemacht haben, einen Seitencontainer öffnen und dann hier ist wo, anstatt eine Schleife zu erstellen, die uns Zugriff auf den Kontext eines neuen Beitrags in jeder Iteration der Schleife gibt, was wir tun ist, dass wir hier auf einen einzigen Beitrag zugreifen. Was wir tun müssen, um auf den Post-Kontext zuzugreifen, obwohl wir uns in einem einzigen Beitrag befinden, ist, ein Tag zu öffnen, das so aussieht, Hashpost. Es ist sehr einfach. Dann schließen wir mit Schrägstrich Post. Dies ermöglicht es uns, auf den Post-Kontext zuzugreifen , genau wie wir es hier für jeden einzelnen Beitrag hatten. Jetzt können wir innerhalb eines einzigen Beitrags auf dieselben Attribute zugreifen. Ich gehe hierher zurück und ich füge etwas Boilerplate-Code hinzu. Ich werde einen Post-Header haben. Entschuldigung, ich gehe zurück und gebe dem eine Klasse von Post-Header, bring das h1 zurück. Aber jetzt wird es sagen, dass ich dem eine Klasse von Post-Titel geben werde. Im Inneren werden wir den Titel des eigentlichen Beitrags eintragen. Anstatt einen statischen Titel, einen hart codierten Titel, zu setzen einen hart codierten Titel, , werden wir offensichtlich den Titel des Beitrags selbst durchkommen lassen. Da es sich um einen Blogbeitrag handelt, werden wir das Datum eintragen, an dem er veröffentlicht wurde. Ich werde das in eine Zeitspanne bringen und wir verwenden den Helfer hier von Datum, um unsere aktuell veröffentlichten zu formatieren. Wir haben das Attribut veröffentlicht am und verwenden den Datumshelfer mit diesem Attribut hier im Format, wir können dann unser Format für das Datum festlegen. Ich setze es einfach auf Vervierfachen M, Double D und Vierbettzimmer Y. Wir gehen über diesen Header-Abschnitt hinaus und erstellen dann einen Abschnitt mit der Klasse des Beitrags. Dann füge ich hier den Inhalt des Beitrags ein, und das wird für das Inhaltsattribut erledigt. Ich klicke auf Speichern, aktualisiere die Seite hier und voila, wir haben den Titel des Beitrags. Wir haben das Datum, an dem der Beitrag veröffentlicht wurde, und wir haben alle Inhalte, die automatisch in unserem Tag ausgefüllt werden, Inhalte posten. Sie können dies natürlich mit Ihren DevTools überprüfen. Natürlich empfehle ich Google Chrome, aber was auch immer Sie bevorzugen. Hier sehen Sie den gesamten Code, den wir in der Vorlage eingerichtet haben, aber mit den dynamischen Werten, die in diesem Markup durchkommen. Wenn ich zurück zum Blog gehe und dann auf den nächsten Beitrag klicke, siehst du, dass es sich um dieselbe Vorlage handelt, aber mit unterschiedlichen Inhalten. Es gibt ein bisschen Aufräumen, das hier mit den verschiedenen Links und so passieren muss . Aber Sie verstehen das Konzept, wir setzen den Inhalt in diese Vorlage ein. Wir setzen den Titel und das Veröffentlichungsdatum durch, und so haben wir jetzt eine funktionierende Website. Um dieses Video zu beenden, weil es sich anfühlt, als wäre es schon ziemlich lang. Was ich tun werde, ist einen Code für die About-Seite einzugeben. Das Lustige an der About-Seite ist, dass der Seitenkontext praktisch identisch mit dem Post-Kontext ist. Wenn wir hier zu unserem Diagramm zurückkehren, können wir daher eine Seite in die Beitragsvorlage laden, da wir denselben Kontext verwenden, unabhängig davon, ob es sich um eine Seite oder einen Beitrag handelt. Lassen Sie uns das jetzt in Aktion sehen. Ich scrolle nach unten zum Kontext, zurück zu dem, was wir zuvor hatten, nämlich der Seitenkontext. Der Seitenkontext, wie er hier geschrieben wird, ist praktisch identisch mit dem Post-Kontext und wird mit demselben Blockausdruck zugegriffen. Was ich tun werde, ist einfach weiterzumachen und den Code von post.hbs auf page.hbs zu kopieren. Was ich tun werde, weil der große Unterschied zwischen einem Beitrag und einer Seite hauptsächlich das Datum ist. Ich entferne nur das Datum aus dieser bestimmten Vorlage, klicke auf Speichern. Wenn wir nun zu unserer About-Seite zurückkehren, werden Sie feststellen, dass wir nicht das Ergebnis erhalten, nach dem wir suchen, da wir tatsächlich eine bestimmte Vorlage für die About-Seite verwenden. Aber lasst uns auf eine andere Seite gehen, ich glaube, es gab eine über den Datenschutz. Tut mir leid, das habe ich dort falsch geschrieben. Wenn wir zur Datenschutzseite gehen, sehen Sie hier, dass wir das gleiche Format haben. Wir sind in unserem Container, wir haben unseren Titel und wir haben unseren Inhalt für die Seite. Der einzige Unterschied zwischen Seiten und Beiträgen besteht also darin, dass wir keine Liste von Seiten durchlaufen können, aber wir können die Liste der Beiträge durchlaufen. Wir haben Zugriff auf die Post-Kontexte hier. Wir haben Zugriff auf den Post-Kontext innerhalb eines einzelnen Beitrags, und wir haben Zugriff darauf, wenn wir mit Seiten arbeiten. Der Post-Kontext ist tatsächlich identisch mit dem Seitenkontext. Man könnte argumentieren, dass es keinen Seitenkontext gibt, sondern nur der Beitragskontext, der auch für Seiten verwendet wird. Ich werde es dort für dieses Video abschließen, weil wir unseren Kernbaustein sortiert haben. Wir haben unsere Blog-Seite, auf der wir alle unsere verschiedenen Beiträge sehen können , und wir können jetzt hineinklicken und einen einzelnen Beitrag ansehen. Wo wir noch nicht behandelt haben, sind all diese zusätzlichen optionalen Vorlagen. Wie arbeiten wir im Autorenkontext oder arbeiten im Tag-Kontext? Was sollten wir mit diesen spezifischen benutzerdefinierten Vorlagen tun, die zu bestimmten Autoren, bestimmten Tags, bestimmten Seiten und bestimmten Beiträgen führen ? All das werden wir im nächsten Video behandeln. 10. Programmieren innerhalb von Autoren- und Tag-Kontexten: Im letzten Video haben wir angefangen, unsere Vorlagen index.hbs, post.hbs und page.hbs zu codieren, und wir haben mit dem Post-Kontext gearbeitet. Die Beitragskontexte gelten für alle drei dieser Vorlagen, unabhängig davon, ob wir uns in einer Schleife befinden oder uns in einem einzigen Beitrag oder einer einzigen Seite befinden. In diesem Video werden wir über die anderen Kontexte, den Autor und das Tag sprechen , und wenn wir Zeit haben, werden wir unser Thema mithilfe dieser zusätzlichen Vorlagen erstellen, die wir für bestimmte Beiträge, Seiten und Autoren erstellt haben. Was ich tun werde, ist, dass ich hier auf meine Website zurückkehre und zu einer unserer Autorenrouten navigiere. Wenn wir zur Christopher-Autorenroute gehen, können Sie sehen, dass wir eine bestimmte Vorlage haben. Ich möchte zur regulären Autorenvorlage gehen, die wir meiner Meinung nach erreichen sollten, wenn wir Ghost eingeben . Da gehst du. Ich werde als nächstes an der author.hbs-Vorlage arbeiten, und der Kontext, an dem ich arbeiten werde, ist der Autorenkontext. Gehen wir in die Dokumentation ein. Klicken Sie zu Kontexten, scrollen Sie nach unten und Sie können die Liste hier sehen. Wir haben einen Index , der eigentlich keine Seite in dieser Dokumentation zu haben scheint. Wir haben eine Seite, die im Wesentlichen der Post entspricht. Posten Sie offensichtlich. Dann haben wir Autor und Tag. Wir haben auch Fehler, aber wir werden nichts über Fehler in dieser Klasse erfahren. Dies ist sehr einfach. Wir müssen die Kontexte nicht einmal mit dem Tag eingeben, das wir im vorherigen Video gesehen haben. Wir können diese Tags einfach innerhalb jeder Fehlervorlage ausgeben, an der wir arbeiten. Das ist nur ein kleines Detail, auf das wir in dieser Klasse nicht tief eingehen werden. Was wir jedoch behandeln werden, ist der Autor- und Tag-Kontext. Wenn ich auf den Autorenkontext klicke, wie hier heißt, „Autoren in Ghost erhalten jeweils eine eigene Seite, die eine Liste von Beiträgen ausgibt, die von diesem Autor veröffentlicht wurden.“ Im Wesentlichen haben wir in der Autorenvorlage Zugriff auf diesen Autorenkontext, aber wir haben auch Zugriff auf die Post-Kontexte über eine 4h-Schleife. Wenn ich hier nach unten scrolle, sind hier einige der Attribute des Autors. Was ich mache, ist, uns eine Angebotsseite für unseren Autor zu erstellen. Um loszulegen, kopieren wir den Code hier auf unserem index.hbs. Ich werde diese beiden kündigen und lasst uns autor.hbs öffnen. Fügen wir diesen Code hier ein. Anstelle aller Posts sage ich „Alle Beiträge von“, und hier findest du alle Beiträge nach. Lasst uns das aufheben. Lasst uns hier drüben auffrischen. Sie können hier alle Beiträge des Autors Ghost sehen. Wir haben diese dynamischen Werte noch nicht eingebracht, aber Sie können in der Schleife sehen, dass es alle Beiträge ausschließt, die von anderen Autoren als Ghost geschrieben wurden, und das ist im Wesentlichen nur ein Beitrag. Alle Beiträge vor diesem Beitrag werden jetzt auf dieser Seite angezeigt. Was wir tun müssen, ist diese dynamischen Werte auszufüllen. Ich zeige Ihnen zwei Möglichkeiten, dies zu tun. Ohne einen Block zu öffnen, können wir einfach in die Autorenkontexte eingreifen, indem wir den Autor und dann das Attribut ausführen, ich glaube, es ist Name, und dann können wir das einfach hier unten kopieren. Klicke auf „Speichern“, aktualisiere die Seite und du siehst alle Beiträge von Ghost. Hier findest du alle Beiträge von Ghost. Wenn es einen anderen Autor gäbe, der dieselbe Vorlage verwendet hat, würden Sie den Namen dieses Autors anstelle von Ghost sagen, aber hoffentlich verstehen Sie den Punkt. Dies ist ein dynamischer Wert. Was ich tun werde, ist, dass ich das ein bisschen realistischer machen werde. Ich werde es auch tun, anstatt den Autor setzen zu müssen. vor dem Namen werde ich jedes Mal den Autorenkontext öffnen. Ich mache genau so, wie ich die Post-Kontexte im vorherigen Video geöffnet habe , indem ich hier ein Tag gesetzt habe, beginnend mit Hash und dann den Autor. Dann schließe ich es hier. Was dies tun sollte, ist uns das gleiche Ergebnis zu geben. Ich werde diesen Code einrücken, aktualisieren und du siehst, dass wir das gleiche Ergebnis haben. Was ich tun werde, ist, dass ich diese Seite ablehne und auch das Autorenfoto einbringe. Was ich tun werde, ist, dass der Container hier oben ein Header sein wird, und dann werde ich zwei Spalten haben. Ich werde eine Kolumne für den Benutzer haben und eine Karte für den Autor geben. Dann werde ich diesen Inhalt in einer zweiten Spalte zur Seite verschieben lassen. Was ich tun werde, ist, anstatt alle Beiträge namentlich zu haben, was ich tun werde, ziehen Sie dies aus unserem kleinen Autorenblockausdruck hier heraus. Erstellen Sie ein div mit der Klasse der Seitenkopfzeile. Leg das da rein. Ich werde immer noch alle Beiträge des Autors haben und das wieder dort platzieren. Dann werde ich einen Container mit der Seitenklasse mit der Seitenleiste erstellen. Dann werde ich hier drin, nachdem ich ein div, die erste Spalte, geöffnet habe, einige Inhalte vom Autor herausbringen. Leg das da rein. Dann in der zweiten Spalte werde ich den Rest dieses Codes hier eintragen. Jedes div repräsentiert in diesem Fall eine Spalte. Ich kann das dort einfach richtig einrücken, etwas von diesem großen Bereich löschen, und hier in unserer kleinen Seitenleiste kann ich eine Autorenkarte einlegen. Auch hier verwende ich die Kartenklasse und das gibt mir Zugriff auf das Styling innerhalb von Bootstrap. Öffne eine Karte. Das erste, was ich tun möchte, ist ein Bild mit der Klasse der Karte img top zu erstellen und das SRC dafür wird vom Autor kommen. Ich verwende den Bild-URL Helper und greife anschließend auf das Attribut im Autorenkontext des Profilbildes zu. Dann wird für die ALT nur „Bild des Namens“ sagen, „Bild des Namens“ sagen, das wird der Name des Autors sein. Dann richte ich wie zuvor den Kartentext mit einem h5 mit der Klasse des Kartentitels Darin gebe ich den Namen des Autors erneut ein. Wenn der Autor eine Biografie hat, möchte ich sie zeigen. Ich gebe hier ein HTML-Element mit der Klasse des Kartentextes aus. Ich muss nur „Bio“ setzen. Dieser HTML-Code wird nur angezeigt, wenn ein Wert in Bio festgelegt ist. Schließlich werde ich hier einen Autor-Meta-Bereich einlegen und einen Code eingeben, der hier vielleicht etwas funky aussieht. Ich verwende im Grunde den Pluralhelfer hier, um eine Zahl mit der richtigen Pluralisierung anzuzeigen. Es wird den Paginierungstitel dessen annehmen, was wir gerade betrachten. Wenn es leer ist, wird es sagen, keine Beiträge. dann für Singular definieren, wollen wir die Zahl gefolgt von Post und für Plural, es wird die Anzahl der Beiträge mit Beiträgen angegeben. Wie Sie diesen Pluralhelfer hier sehen können, braucht er eine bestimmte Zahl und wenn er Null ist, gibt er keine Posts aus. Wenn es singular ist, wird es einen Beitrag sagen und wenn es im Plural ist, wird diese Zahl Posts sagen, also hilft uns dieser Helfer dabei, Plurale auszugeben. Wir werden dabei auf „Speichern“ klicken und uns aktualisieren. Sieht aus, als hätten wir hier etwas verpasst, lass mich zurückgehen. Ich werde das nur ein bisschen verschieben, damit wir hier mehr vom Bildschirm sehen können. Hier sind wir, ich kann sehen, dass wir Singular falsch geschrieben haben. Wenn ich speichere, aktualisiere hier drüben, wirst du sehen, dass wir unsere Karte hier haben. Formatierung ist nicht auf dem Punkt, geben Sie ihm nur eine maximale Breite von 18, REM-Aktualisierung hier. Ich bekomme ein flippiges Ergebnis, habe nicht das richtige Div eingerichtet. Ich denke, es ist genau hier, und jetzt bekommen wir das Ergebnis, das wir erwarten würden. Wie Sie hier sehen können, haben wir in der ersten Spalte den Benutzer. Es ist Ghost mit seinem kleinen Bild hier, das ist seine Biografie, die von Ghosts selbst festgelegt wird, und so viele Beiträge hat dieser Benutzer geschrieben. Dann haben Sie natürlich die Liste der Beiträge, die von der for-each-Schleife generiert werden , und dies wird auf die Beiträge des Benutzers von Ghost beschränkt. Gehen wir jetzt und machen das für die Tag-Vorlage, sehr ähnlich. Ich kopiere über den Autor hinweg und anstelle des Autorennamens ändern wir ihn in Tagname. Statt aller Beiträge nach werden wir alle Beiträge mit dem Tag von sagen. Hier finden Sie alle Beiträge mit dem Tag, um sicherzustellen, dass der Autor des Tags geändert wird. Anstatt in den Autorenkontext zu gehen, gehen wir jetzt in den Tag-Kontext ein. Ändern Sie einfach den Keyword-Autor in Tag und ersetzen Sie jetzt einige dieser Werte. Anstelle des Profilbildes, das wir im Autorenkontext zur Verfügung haben, haben wir stattdessen ein Feature-Image, und anstelle von Pitcher of Name sagen wir Pitcher für Tag-Namen. Was ich auch tun werde, ist zu überprüfen, ob wir ein vorgestelltes Bildset haben. Lass mich das machen, es ist genau wie zuvor. Wenn Feature-Bild und dann dies und dann endet mit dem wenn block, wie solche. Alles klar. Cool statt Bio, wir werden eine Beschreibung machen und dann werden wir natürlich dieses Autor-Meta loswerden. Ich werde auf „Speichern“ klicken. Gehen wir zu einem Tag, das kein Beispiel-Tag ist, denn denken Sie daran, dass wir dafür eine spezielle Vorlageneinrichtung haben, also ist die einzige andere Option die ersten Schritte. Hier siehst du alle Beiträge mit dem Tag „Erste Schritte“. Hier findest du alle Beiträge mit dem Tag „Erste Schritte“. Ziemlich selbsterklärend, oder? Hier siehst du, dass wir unseren Namen unseres Tags dort haben. Wenn wir ein Bild hinzufügen wollten, gerade festgestellt, dass kein Bild eingestellt ist, weil wir unsere if-Anweisung dort abgeben. Aber wenn wir wollten, könnten wir in unseren Admin gehen, in unsere Tags gehen und anfangen. Ich lade einfach eins von Unsplash hoch. Lass uns einfach nach den ersten Schritten suchen und sehen, was passiert. Das sieht in Ordnung aus. Lasst uns dabei auf „Speichern“ klicken. Lass uns zurück gehen. Jetzt können Sie sehen, dass wir ein Bild haben, das im oberen Bereich des Kartenbildes gefüllt ist. So arbeiten Sie im Wesentlichen mit dem Tag und dem Autorenkontext. Wenn Sie sich in der Autorenvorlage oder der Tag-Vorlage oder einer bestimmten Tag-Vorlage befinden, wie wir hier sehen können. Oder eine bestimmte Autorenvorlage, wie wir hier sehen können. Dann haben Sie Zugriff auf den Autor- oder Tag-Kontext. Bevor wir nun über benutzerdefinierte Abfragen und Partials sprechen, möchte ich nur den Rest dieses Themas aufbauen. Ich denke, wir haben nicht zu viel Zeit in dieser Lektion verbracht, daher haben wir Zeit, die anderen zusätzlichen Vorlagen, die sich derzeit in unserem Thema befinden, schnell auszufüllen . Ich merke, dass wir nichts mit der Homepage gemacht haben. Sagen wir einfach willkommen zu und dann geben wir den Site-Titel ein. Verwenden Sie dieses globale Site-Objekt, indem Sie den Titel eingeben, klicken Sie einfach zu hier. Da gehst du. Es heißt Willkommen in Skillshare. Sie können sehen, dass es dort ein kleines Problem gibt. Ich denke, wir haben einen kleinen Fehler in unseren Standard-HBS. Ich habe versehentlich das Header-Dash-Logo in AH ref gesetzt. Entschuldigung, wenn du das von Anfang an bemerkt hast und geschrien hast. Aber wenn ich hier aktualisiere, wirst du jetzt sehen, dass du irgendwo anders klickst und dann dort klickst, es bringt uns zurück zur Homepage. Dann auch auf dieser Homepage, die im nächsten Video eine benutzerdefinierte Abfrage hinzufügt. Aber jetzt legen wir das alles in einen Seitenbreitencontainer. Speichern Sie, und jetzt befindet es sich im Seitenbreitencontainer. In Ordnung, was sind die anderen Vorlagen, die wir noch nicht angepasst haben. Wenn ich zum Beispiel auf die About-Seite gehe , haben wir diese Seite/about.hbs. Ich denke, in diesem Fall möchte ich, dass die page-about.hbs genau gleich aussieht. Ich lösche diese vielleicht ganz und aktualisiere meine Ghost-Instanz. Wenn ich jetzt zurückgehe und zur About-Seite gehe , läuft gerade eine normale Seitenvorlage für die About-Seite. Außerdem möchte ich jetzt eine Navigation für den Blog hinzufügen. Lasst uns bloggen und dann diese Route dort hinzufügen. Klicke hier auf „Speichern“ auf den Kopf. Wenn wir jetzt auf „Blog“ klicken, können Sie sehen, dass wir alle unsere Beiträge haben. Wir haben keine Möglichkeit, zu bestimmten Autoren zu navigieren , und wir haben keine Möglichkeit, zu bestimmten Tags zu navigieren. Was ich tatsächlich tun könnte, ist, dass ich es dort pausiere und dann werden wir das im nächsten Video machen. Wir werden die Tags und den Autor zu diesen Beiträgen hinzufügen. Dann passen wir die speziellen Vorlagen an, die wir hatten. Zum Beispiel unsere benutzerdefinierte Header-Vorlage, die wir hier haben die Sie noch nicht angepasst haben, und ich werde auch ein Beispiel für eine Post-Vorlage. Wir haben die anderen gut funktionieren. Aber die anderen beiden müssen wir auch anpassen. Dieses Video wird lang, also schneide ich es vielleicht dort aus, Leute, und das werden wir im nächsten Video machen. 11. Benutzerdefinierte Abfragen und Partials: Die Zeit hat mich im letzten Video umso überholt, aber das ist in Ordnung. Wir werden nur ein zusätzliches Video machen, um benutzerdefinierte Abfragen in Partials abzudecken , und dann verwenden wir das Video danach, um unser Ghost-Thema zu beenden, diese zusätzlichen Vorlagen auszufüllen und dann werden wir ein einfaches, aber fertiggestelltes Geisterthema haben. Wohin Sie es danach in Bezug auf zusätzliches Styling, Bilder und benutzerdefinierte Vorlagen aufnehmen möchten , liegt an Ihnen, aber wenn wir fertig sind, sollten Sie ein ziemlich solides Verständnis dafür haben, wie Geisterthemen funktionieren. Was ich tun möchte, ist jetzt zu benutzerdefinierten Abfragen und Partials zu springen, und dann werden wir diese spezifischen Vorlagen im nächsten Video anpassen. Das Erste ist, dass Sie bemerkt hätten, dass wir einen kopierten und eingefügten Code für die Postkarte der Eule haben. Die Postkarte wird immer genau gleich sein , egal ob wir uns in der Autorenvorlage, der Tag-Vorlage oder der Indexvorlage befinden. Das bedeutet, dass es ein perfekter Kandidat für etwas ist, das als Teil bezeichnet wird. Wie Sie sehen können, haben wir unseren Ordner hier für unsere verschiedenen Partials eingerichtet. Wofür wir Partials verwenden, ist das Abschneiden kleinen Codes, die wir dann in unserem Projekt wiederverwenden können. Anstatt diesen Code zu schreiben und ihn in mehrere Vorlagen zu kopieren und einzufügen, werde ich diesen in einen eigenen Teil einfügen. Ich nenne das postcard.hbs. Ich nehme unsere Karte HTML und den Lenkercode dort hin, schneide das aus und lege ihn hier rein. Lasst uns die ganze Einrückung reparieren, speichern Sie das. Die Art, wie wir einen Teil nennen, jetzt, da wir es dort hineingezogen haben, verwenden wir dieses Zeichen größer als. Wir setzen das Größere als das Einloggen ein, öffnen eine Schnur und hier setzen wir den Namen der Teilpostkarte ein. Wenn wir nun zu dem Index gehen, der unsere Blog-Seite ist, kann eine Teilpostkarte nicht gefunden werden. Ich glaube, das liegt daran, dass wir unseren Server nicht aktualisiert haben. Denken Sie daran, dass wir eine neue Datei hinzugefügt haben, daher müssen wir unsere Ghost-Instanz aktualisieren. Gute kleine Erinnerung dort. Aktualisieren. Jetzt können Sie sehen, dass wir in dieser Indexvorlage genau das gleiche Aussehen haben. Was ich jetzt mache, ist, dass ich den duplizierten Code durch nur diesen kleinen Code ersetzen werde . Das wird unsere Codebase viel sauberer machen. Die andere Sache, die wir tun können, was ich Ihnen im nächsten Video zeige, ist das Erstellen benutzerdefinierter Partials für die Navigation und die Paginierung . Wenn wir sie in Ghost ohne diese Partials verwenden, wird Standardcode ausgegeben, den wir verwenden müssen uns nicht mal selbst einstellen. Sie sind wie spezielle Systempartials. Ich spreche zum Beispiel darüber, wann wir zu default.hbs gehen und wir hier dieses Navigationstag haben. Dies ist fast wie eine spezielle Version eines Teils, aber ohne es in unserem partials Ordner festlegen zu müssen. Wenn wir unsere Navigation anpassen wollten, können wir dort einen Teil für diese Navigation und auch für die Paginierung festlegen, die wir im nächsten Video behandeln werden. Bleib dran darüber. Im Wesentlichen ist dies jedoch die Grundlage für Partials, indem Sie Code herausnehmen, den Sie kopieren und an mehrere Stellen einfügen, ihn an einem Ort platzieren und ihn einfach dort aufrufen, wo Sie ihn benötigen. Das zweite Konzept, über das ich in diesem Video sprechen möchte, sind benutzerdefinierte Abfragen. Benutzerdefinierte Abfragen ermöglichen es uns, Daten von der Argos-Website zu zeichnen und in eine beliebige Vorlage zu legen. Ich denke, eine praktische Anwendung davon ist für eine Homepage. Manchmal, wenn Sie auf einer Blog-Homepage sind, möchten Sie den neuesten Beitrag sehen. Mit einer benutzerdefinierten Abfrage können wir dies tatsächlich tun. Ich gehe in die Dokumentation für benutzerdefinierte Abfragen ein, die wir meiner Meinung nach entweder im Kontext finden können oder Helfer denken, dass sie uns hier helfen. Los geht's. Innerhalb funktionaler Helfer können wir damit eine benutzerdefinierte Abfrage durchführen und Hilfe erhalten. Darauf klicke ich. Wir können lesen, wie wir bestimmte Informationen aus unserem Back-End abrufen und dort ausgeben können , wo wir wollen. Inside Out geht Thema. Los geht's. Einfache Beispiele hier können wir unsere Posts abrufen und das ermöglicht es uns, eine Post-Schleife zu erstellen. Hier sind nicht codiert, dass ich zu unserer home.hps-Vorlage navigiere. Was ich machen werde, ist, dass wir das ein bisschen ausbauen lassen. Ich füge ein Div mit einer Klasse von Home-Header hinzu. Dann nach dem H1 mache ich vielleicht eine Websitebeschreibung. Nehmen Sie die Beschreibung, Attribut vom globalen Objekt der Site und legen Sie diese dort hinein. Dann öffne ich nach diesem Header den Helfer. Ich werde die Beiträge anfordern und sicherstellen, dass sie Tags und Autoren enthalten. Wir werden diese Daten im nächsten Video verwenden. Ich schließe den Block dort. Dann lege ich H2 ein und sage die neuesten Beiträge. Dann können wir hier eine for-each-Schleife erstellen und Zugriff auf die Beiträge haben , obwohl wir uns nicht in einer Indexvorlage befinden. Ich kann für jeden Beitrag gehen, den Block dort schließen. Ich werde das auch in ein Div mit der Klasse der Beiträge legen. Auch hier sind all diese Klassen nur zum Formatieren und Strukturieren. Es bezieht sich auf das CSS, das ich in meiner Hauptdatei habe. Lassen Sie sich davon nicht verwirren. Ich gebe nur ein paar Formatierungen dazu. In dieser Schleife kann ich den Teil ausgeben, den wir mit der Postkarte erstellt haben. Es gibt noch zwei andere Dinge, die ich hier machen möchte. Ich möchte dies auf nur drei Ergebnisse beschränken. Die neuesten drei, und stellen Sie sicher, dass es nach zuletzt veröffentlichten sortiert ist. Veröffentlicht bei absteigend. Spar dir das auf. Gehen Sie zurück zu unserer Homepage. Sie können sehen, willkommen bei Skillshare Gedanken, Geschichten und Ideen, was die Standardbeschreibung einer Geister-Website ist. Wir können natürlich auf die Einstellungen unserer Website eingehen und dies ändern. Wir gehen zu allgemeinen Veröffentlichungsdetails, Titel und Beschreibung. Sagen wir einfach anstelle von Skillshare, es ist eine Ghost-Site und sagen, dies ist eine Beispiel-Ghost-Site, speichern Sie diese Einstellungen, gehen Sie zurück und Sie werden sehen, dass die Homepage aktualisiert wird. Es aktualisiert das Logo, es aktualisiert alles. Dies ist ein Beispiel für eine Ghost-Site. Am wichtigsten ist jedoch, dass wir hier eine Liste der neuesten drei Beiträge auf der Website haben , damit Benutzer eine Vorschau der Beiträge auf der Website sehen können , ohne zur Blogseite navigieren zu müssen. Dieser ist ein bisschen kurz oder kürzer im Vergleich zu den anderen. Aber im nächsten Video werden wir behandeln, was wir im letzten Video, in dem diese benutzerdefinierten Vorlagen erstellt wurden, nicht fertig werden. Die speziell für den Beispielbeitrag speziell für benutzerdefinierte Vorlagen, die im Ghost-Admin festgelegt wurden. Fügen Sie die Möglichkeit hinzu, von den Postkarten selbst zu verschiedenen Autoren und Tags zu navigieren. Im nächsten Video werden wir das behandeln. Dann werden wir unser Projekt abschließen und damit beginnen, unsere Seite live zu übernehmen. 12. Fertigstellung des Themas: In dieser letzten Lektion live zu machen ich hier einige Links zu Autor und Tags für jeden Beitrag hinzu, bevor wir anfangen, unsere Website zu hosten und , und dann müssen wir diese benutzerdefinierten Vorlagen aktualisieren. Nachdem wir das getan haben, sollten wir ein ziemlich gut funktionierendes Geisterthema haben. Offensichtlich gibt es hier so viel mehr, was wir tun könnten, aber dies wird ein Basisprojekt für uns vervollständigen. Das erste, was ich tun möchte, ist, dass wir zu den einzelnen Autoren und der einzelnen Tag-Seite navigieren können , was ich tun möchte, ist das Tag und den Autor zu unseren Postkarten hinzuzufügen. Ich gehe hier rüber zum Blog, damit wir alle Postkarten sehen können. Ich gehe in meinen Code-Editor, gehe einmal zur Postkarte und füge unter dem Auszug etwas Code hinzu. Der erste, den ich machen werde, ist ein Link zum Autor. Ich formatiere es als Bootstrap-Button. Ich gebe dem die Klasse von Btn Btn-Primary. Das sind die href-Felder, Klasse. Dann stelle ich die href fest, die die primäre Autoren-URL sein wird. Es zeigt nur den Hauptautor, ein ähnliches Konzept wie das primäre Tag ist, nur für den Fall, dass es mehrere Autoren gibt. Kann das schließen und dann sage ich mit dem primären Autor.name. Bevor wir das jetzt verlassen, müssen wir eine Überlegung machen, und das ist, dass wir keinen Link zum Hauptautor haben möchten , wenn wir diese Postkarte derzeit auf der Autorenseite anzeigen. Wenn wir uns im Autorenkontext befinden, möchten wir eigentlich keinen Link zum Autor sehen , da dies nur ein kreisförmiger Link wäre. Was wir tun können, ist zu prüfen, ob wir uns im Autorenkontext befinden , indem wir diesen speziellen Helfer verwenden. In diesem Fall möchten wir jedoch überprüfen, ob wir uns nicht in diesem Autorenkontext befinden. Wir können diesen kleinen Charakter hier einsetzen, um nach dem Gegenteil zu suchen. Dieser Code hier wird ausgeführt, wenn wir keinen Zugriff auf den Autorenkontext haben. Ich schließe das ist da und dann jetzt für die Tags. Ich gehe zu Karten-Tags und dann müssen wir nur die Keyword-Tags einfügen und einfach solche Tags schreiben, wie Sie in der Dokumentation sehen werden, wird eine kommagetrennte Liste von Tags ausgeben, und jedes Tag wird sei ein Link zu diesem Tag. Wenn ich hier aktualisiere, kannst du jetzt sehen, dass wir einen Button haben, um den Autor anzusehen, und wir haben unsere verschiedenen Tags, die für diesen Beitrag festgelegt wurden. Wenn ich hier auf den „Ghost kaufen“ -Button klicke, wirst du sehen, dass wir unsere Vorlage haben, die wir zuvor eingerichtet haben. Wenn ich auf „Erste Schritte“ klicke und du siehst, dass wir unsere Vorlage für die ersten Schritte haben, die wir zuvor gesehen haben. Aber denken Sie daran, dass wir eine andere Vorlage für Christopher Dodd eingerichtet haben. Meine Autorenroute hat eine andere Vorlage und wir haben eine andere Vorlage zum Beispiel Tag. Ich wollte diese zuerst dort hineinlegen, damit wir leicht zu diesen navigieren können. hier zum Blog zurückkehren, müssen wir diese Vorlagen anpassen. Wir müssen auch den Beispielbeitrag anpassen. Wir haben eine Vorlage speziell für den Beitrag zum Beispiel festgelegt, und wir müssen diese benutzerdefinierte Vorlage ändern, die wir auch im Ghost-Administrator festgelegt haben. Wir haben vier Vorlagen, die wir hier reparieren müssen. Gehen wir in den Code und lasst uns das reparieren, was sollen wir zuerst tun? Lassen Sie uns die Christopher-Autorenvorlage machen. Gehen wir in Autor-Christopher.hbs. Da ich weiß, dass wir einen Index durchlaufen werden, kopiere und füge ich hier etwas Code aus unserem Index ein und lege ihn hier rein. Anstatt hier oben eine Überschrift zu haben, habe ich in unserem CSS eine Klasse für Autorenüberschrift erstellt. Ich gehe über diese Seitenbreite hinaus, um einen Header mit voller Breite zu erstellen. Ich gehe in den Autorenkontext ein und schließe ihn dann, damit wir es nicht vergessen. Hier drin erstelle ich ein Div mit der Klasse des Autor-Headers und darin werde ich ein h1 haben. Ich lege hier auch ein kleines rein. Innerhalb des Kleinen werde ich Beiträge nach und dann nach der kleinen Ausgabe sagen, den Namen des Autors, der angesichts dieser Vorlage nur für die Autorenvorlage für Christopher gilt, brauchen wir eigentlich keine dynamischen Werte. Wir könnten diese fest kodieren. Aber ich denke, es ist etwas sauberer, die dynamischen Werte zu haben , falls wir dies ändern oder diesen Code kopieren und einfügen möchten. Die andere Sache, die ich machen möchte, ist das Bild des Autors zu haben, also haben wir Hintergrundfarbe. Dies ist etwas, das wir dynamisch sein müssen, da wir immer das Titelbild des Autors ändern können . Ich verwende den Bild-URL-Helfer erneut und füge danach das Titelbild ein, das ein Attribut für das Autorenobjekt ist. Drücken Sie dabei auf „Sparen“ und gehen Sie zurück zu hierher. Du kannst jetzt sehen, dass wir diesen Header haben. Es sagt Beiträge von und das hat den Namen des Autors, und dann hat es die Liste der Beiträge. Du kannst es gerade nicht sehen, aber es sollte dort ein Hintergrundbild sein. Ich gehe hier in meine Einstellungen, gehe zu Staff, gehe zu Christopher Dodd und lass uns das Cover ändern. Lasst uns ein Bild hochladen. Wir haben hier einen Ordner mit einigen Beispielen. Sagen wir einfach, dass das mein Titelbild ist. Wenn ich jetzt hier rübergehe, taucht es nicht auf und das liegt daran, dass ich fälschlicherweise die Hintergrundfarbe einsetze, kein Hintergrundbild, das hier kein Hintergrundbild, das drüben erfrischt und du kannst jetzt sehen, dass ich dieses Banner hier habe. Wenn wir zu unserer Ghost-Autorenseite gehen, können Sie sehen, dass wir die Standardvorlage haben, die die Autorenkarte in dieser linken Spalte enthält. Aber wenn ich speziell zu Christopher Dodd gehe, habe ich stattdessen dieses Layout. Dies ermöglicht es uns, bestimmte Layouts anzupassen. Vielleicht ist dieser Autor besonders und benötigt eine benutzerdefinierte Vorlage. Nun, in diesem Fall können wir es anpassen, indem wir unser Wissen über die Themenstruktur verwenden , die wir früher in dieser Klasse etabliert haben. Machen wir jetzt das Gleiche für unser Tag. Tag-Beispiel-Tag, ich werde diese geöffneten Dateien wieder schließen. Kopieren wir im Tag-example-Tag einfach das gleiche Format, das wir in Autor-Christopher hatten. Ich überziehe das. Anstelle von author hier möchten wir Tag setzen weil wir jetzt die Tag-Kontexte eingeben und anstelle des Titelbildes das entsprechende Bild für ein Tag verwenden, bei dem es sich um ein Feature-Bild handelt, das wir zuvor gesehen haben. Dann werden wir keine Beiträge nach haben, wir werden nur den Namen des Tags haben. Dies ist hier ein bisschen falsch, da wir über einen Header kopieren , den wir für den Autor eingerichtet haben. Eigentlich können wir zu unserer CSS-Datei gehen und sie einfach jetzt reparieren, Autoren-Header, wenn ich hier etwas sauberer sein wollte. Sagen wir einfach Bild-Header. Ich repariere das jetzt für euch. Verwenden wir stattdessen einfach den Klassenbild-Header. Da verwenden wir dies für mehr als nur die Autorenvorlage. Drücken Sie „Speichern“ und bewegen Sie sich hierher. Hier ist ein Link zu den verschiedenen Tag-Vorlagen. Wir können zur Vorlage „Standardtag“ gehen, die für alles andere als das Beispiel-Tag läuft. Aber wenn wir das spezielle sehen wollten, können wir auf „Beispiel-Tag“ klicken und Sie können sehen, dass wir jetzt unseren Header haben. Die Formatierung ist nicht aufgetaucht, was wahrscheinlich auf das intensive Caching von Geistern zurückzuführen ist. Ich öffne nur DevTools, damit ich den Cache leeren und neu laden kann. Nachdem es seinen Cache geleert und hart neu geladen hat, sollten Sie damit beginnen, dass diese CSS-Änderungen wirksam werden. Da sind wir los. Wir haben jetzt unseren netten kleinen Header mit dem Namen des Tags und dem Tag-Bild im Hintergrund. Jetzt haben wir gerade unsere Vorlagen speziell für den Beispielbeitrag und dann haben wir unsere benutzerdefinierte Header-Vorlage, die wir im Ghost-Admin festgelegt haben. Ich fange damit an, weil es das gleiche Format haben wird. Ich gehe zum benutzerdefinierten Header. Wieder kopiere ich von hier aus. Ich werde das hier los, weil wir keine Liste von Beiträgen durchlaufen. Ich werde dies ändern, um zu posten, damit wir Zugriff auf den Post-Kontext haben. Ich werde das ans Ende bringen, weil wir durchgehend Zugriff auf die Post-Kontexte benötigen. Ich behalte diesen Bildkopf und anstelle des Titelbildes ist das Feature-Bild das Attribut im Post-Kontext. Nochmal, nicht posten von. Wir werden nur den Titel des Blogbeitrags haben, und dann werden wir diesen Code hier aus der Beitragsvorlage kopieren. Lasst uns das aufheben, gehen Sie zurück. Hier sehen Sie, dass wir den Titel an zwei Stellen haben, also werde ich den Titel hier einfach entfernen. Speichern Sie und hier können Sie sehen, dass wir unsere alternative Vorlage haben, die das vorgestellte Bild hinter den Titel setzt und dann den Titel überlagert hat. Es hat immer noch das Datum, es hat immer noch den Inhalt, aber dann haben wir das auch. Jetzt machen wir die endgültige Vorlage. Gehen wir in den Blog, gehen Sie in den Beispielbeitrag. für den Beispielbeitrag tun werden, Was wir für den Beispielbeitrag tun werden, ist, wieder in den Code zu gehen. Sagen wir einfach, dass die Vorlage, zum Beispiel der Post, die gleiche sein wird wie Post, aber wir haben nur eine Liste verwandter Artikel unten. machen wir nur für diese spezielle Vorlage. Was wir tun werden, schließe ich das alles noch einmal, und lass uns zum Beispielbeitrag gehen und wir werden den Inhalt aus der Standard-Post-Vorlage kopieren. Das mache ich. Geh hier rüber, füge das ein und jetzt bekommen wir genau das gleiche Aussehen wie zuvor. Aber dieses Mal möchte ich hinzufügen, und dies ist eine weitere benutzerdefinierte Abfrage, von der wir im vorherigen Video erfahren haben. Was ich tun werde, ist, dass ich hier einen Get-Beitrag schreiben werde. Was ich vorher machen werde, ist, dass ich einen Artikel mit einer Klasse von erstellen werde, dies wird ein dynamischer Wert sein, die post_class, und dann werde ich unseren Artikel darin abschließen. Auf diese Weise unterscheiden wir es von dem, was wir unten tun werden, nämlich eine benutzerdefinierte Abfrage zu öffnen. Lass uns zu den Posts gehen. Lassen Sie uns die Tags und Autoren einbeziehen, weil wir diese Attribute dort haben möchten , damit wir auf sie zugreifen können und die Links haben, die wir zu Beginn dieser Lektion erstellt Dann werde ich nach dem primären Tag filtern. Wenn das primäre Tag dem primären Tag dieses Beitrags entspricht , möchte ich diese ähnlichen Beiträge erneut anzeigen. Lasst uns das beenden. Featured-Posts abrufen ist die Klasse. Dann füge ich einfach den Titel hier hinzu, ähnliche Artikel. Erstellen Sie dann einen Container für diese Beiträge und richten wir die Schleife ein. Wir werden es genau wie auf der Homepage haben. Ich werde diese Schleife genau hier greifen und die neuesten drei zeigen, die wir haben, die das primäre Tag des Beitrags teilen, den wir uns ansehen. Ich klicke auf Speichern, aktualisiere hier drüben und du kannst sehen, dass es den ursprünglichen Beispielbeitrag durchführt. Wir müssen nur den Beispielbeitrag entfernen. Ich füge hier einen weiteren Filter hinzu, der besagt, dass ID nicht post.id ist. Wir speichern das, wir werden keine ähnlichen Artikel bekommen, also was ich tun könnte, ist das Gegenteil zu tun und dies auf die Standard-Post-Vorlage zu setzen , und diese andere kann eine saubere Version sein . Wickeln Sie das einfach mit einem Artikel-Tag, class, post_class, und dann darunter poste ich das in. Schnappen Sie sich diesen Code, legen Sie ihn in den Artikel reparieren Sie hier ein bisschen Verschachtelung. Wenn ich dann auf „Speichern“ klicke, siehst du zum Beispiel Beiträge, wir haben nur den Beitrag ohne ähnliche Beiträge, aber wenn ich zu meinem Blog gehe und zu einem unserer Willkommensartikel gehe, ist dieser natürlich auf einem anderen Vorlage, also muss ich genau denselben Code zu unserem benutzerdefinierten Header hinzufügen. Ich denke, wir müssen den Leerraum hier loswerden, das scheint das nicht zu mögen. Da sind wir los. Wir haben unseren Autor jetzt zurück und unsere Tags hier. Wir haben ähnliche Artikel hier. Wenn wir hier zu unserer benutzerdefinierten Vorlage gehen, haben wir nicht das gleiche Ergebnis. Ich denke, das liegt daran, dass wir uns immer noch im Post-Kontext befinden. Ich werde das einfach hier oben verschieben, da wir es hier unten nicht brauchen. Speichern, aktualisieren Sie hier, und jetzt können Sie sehen, dass unsere ähnlichen Artikel durchkommen. Sie kommen in der benutzerdefinierten Header-Vorlage durch, sie kommen in der Standard-Post-Vorlage durch, kommen aber im Beispielbeitrag nicht durch. Natürlich ist das nur ein Beispiel dafür, wie wir verschiedene Blogbeiträge haben könnten , die verschiedene Vorlagen zeigen. Ich möchte hier noch ein paar Dinge hinzufügen. Ich weiß, dass dieses Video besonders lang sein wird, aber ich möchte Ihnen einige Dinge zeigen, die diese Seite noch vollständiger machen werden. Eines der Dinge, die ich machen möchte, hier mir gerade aufgefallen, dass wir wieder dasselbe Problem haben. Lass mich hier einfach zurück zur Homepage gehen. Stellen Sie sicher, dass zwischen Tags und Autoren kein Leerzeichen vorhanden ist. Los geht's, das hat es repariert. Was ich tun werde, ist etwas, das mir aufgefallen ist, wenn wir in einen Beitrag klicken, gibt es keine Navigation, die zum Blog zurückkehrt. Natürlich können wir hier in der Kopfzeile hochklicken, aber ich denke, ein paar Brotkrumen wären hier schön. Also füge ich nur ein paar Semmelbrösel hinzu. Ich verwende das Standardformat innerhalb von Bootstrap. Ich gehe hinein, sagen wir einfach zuerst Post. Ich werde das tatsächlich für alle Beitragsvorlagen verwenden, also kann ich einfach direkt einen Teil erstellen. Ich nenne das Breadcrumbs.hbs. Dann schreibe ich einen Standard-Bootstrap-Code aus. Ich werde das schnell durchlaufen, da die Struktur nur Standard-Bootstrap-Komponenten ist. Dann melde ich mich am Ende bei dir, um es zu erklären. Ganz einfach. Der einzige dynamische Wert darin ist der Titel des aktuellen Beitrags. Ansonsten haben wir nur einen Schrägstrich und einen Link zurück zum Blog. Jetzt können wir das hier in unseren Beitrag aufnehmen. Ich werde es hier direkt über den Post-Header legen. Die Syntax für die Aufnahme eines Teils, wie wir zuvor gesehen haben, öffnet das Größere als Zeichen und setzt dann den Namen Ihres Teils in doppelte Anführungszeichen ein. Prüfen wir einfach, dass das funktioniert hat. Dort siehst du, dass wir dort ein nettes kleines formatiertes Breadcrumbs und lass uns das einfach zu all unseren benutzerdefinierten Beitragsvorlagen hinzufügen. Los geht's, Beispielpost. Sie dann für unseren benutzerdefinierten Header daran, dass wir diesen benutzerdefinierten Header auch auf Seiten verwenden können. Ich möchte hier einen zusätzlichen Scheck einreichen, um sicherzustellen, dass ich nicht auf einer Seite bin. Ich werde tun, wenn nicht Seite ist, dann werden wir den Teil für die Brotkrumen einlegen. Wir wollen nicht, dass die Brotkrumen zeigen, ob wir auf einer Seite sind. Natürlich ist dies eine persönliche Präferenz. Sie können die Brotkrumen immer noch haben, aber es wäre einfach keinen Sinn mit dem Link zurück zum Blog. Wenn ich zum Beispiel auf meine About-Seite gehe und dies in unsere benutzerdefinierte Header-Vorlage ändern würde, würde ich diese Breadcrumbs nicht sehen. Wenn ich hier in den Beitrag gehe, in dem ich weiß, dass wir diese benutzerdefinierte Vorlage ausführen, kann ich sehen, dass die Breadcrumbs auftauchen. Eine weitere winzige Sache und dann werden wir fertig werden, ist, dass ich glaube, dass wir hier etwas Paginierung brauchen werden. Wie wir zuvor mit dem Navigationstag gesehen haben, funktioniert es, wenn wir hier unten nur ein Tag mit dem Wort Paginierung hinzufügen wenn wir hier unten nur ein Tag mit dem Wort Paginierung hinzufügen, aber es wird nicht so gut aussehen, wie wir es uns erhoffen könnten. Was ich tun werde, ist etwas Paginierung hinzuzufügen und dann passe ich sie an, indem ich ein separates Teil erstelle. Zunächst einmal, um die Paginierung tatsächlich umzusetzen, da es gerade nur eine Seite gibt, werde ich die Beiträge auf sechs Beiträge pro Seite beschränken. So wie wir das tun, ist in unserer package.json-Datei, scrollen Sie bis zum Ende nach unten, es sollte dieses Konfigurationsobjekt geben, wenn nicht, erstellen Sie es einfach. Hier siehst du die Beiträge pro Seite. Ich setze das auf sechs. Ich glaube, wir müssen unseren Ghost-Server neu starten, nachdem wir das geändert haben, also läuft Ghost neu. Wenn ich jetzt zu unserer Blog-Seite gehe, kannst du sehen, dass wir nur die sechs neuesten Beiträge sehen. Wir werden etwas Paginierung benötigen, um zu den anderen Beiträgen zu navigieren. Ich gehe in unsere index.hbs-Datei und nach dieser Schleife füge ich das einfache Tag, Paginierung hinzu. Erfrischend hier drüben schauen wir uns an, wie das aussieht. Hier sehen Sie, dass wir uns auf Seite 1 von 2 befinden, und wir können nach älteren Beiträgen suchen, und hier gibt es automatisch neuere Posts aus. Ich werde das einfach etwas schöner aussehen lassen, indem ich Bootstrap-Klassen verwende. Dafür müssen wir einen Teil einrichten, um die Paginierung anzupassen. Ich werde pagination.hbs machen und dafür werde ich, um Zeit zu sparen, einen Code kopieren und einfügen, und dann erkläre ich es. Dies ist nur die Standard-Bootstrap-Struktur für die Paginierung. Was wir hier in Bezug auf den Lenker-Code machen , ist, dass wir, wenn es einen früheren Artikel gibt, hier einen Link dazu haben möchten. Der Text zu diesem Link wird vorher sein und wir verwenden den Seiten-URL-Helfer, um den Link zur vorherigen Seite dort zu platzieren. Dann haben wir die aktuelle Seite als Punktpunkt und wenn es eine nächste Seite gibt, werden wir das Gegenteil von dem tun, was wir hier gemacht haben, und haben einen Link zur nächsten Seite. Natürlich haben wir gerade eine neue Datei erstellt, daher müssen wir unseren Server aktualisieren. dann auf unsere Indexseite gehen, können Sie sehen, dass wir jetzt eine schönere Bootstrap-formatierte Paginierung haben. Da gehst du. Funktioniert einwandfrei und es zeigt Ihnen, auf welcher Seite Sie sich gerade befinden. Wie ich zu Beginn dieser Lektion sagte, gibt es so viel mehr Anpassungen und Funktionen, die wir unserer Ghost-Site geben können, aber dies deckt im Wesentlichen alle wichtigen Punkte alle Grundlagen für die Entwicklung Ihres Ghost-Themas ab. Zusammenfassend haben wir die wichtigsten Vorlagen wie die Post-Vorlage erstellt. Wir haben die Indexvorlage erstellt. Wir haben eine Home-Vorlage erstellt, in der die drei neuesten Beiträge aufgeführt sind. Wir haben eine Standardseitenvorlage, die unsere About-Seite anzeigt, und dann haben wir Vorlagen für die Autoren, die den Autorenkontext verwenden. Wir haben eine alternative Vorlage für den Autor, insbesondere durch die Schnecke von Christopher. Wir haben eine Vorlage zum Filtern nach einem bestimmten Tag und dann haben wir wiederum eine alternative Vorlage zum Filtern nach einem bestimmten Tag. Dann haben wir endlich zwei alternative Beitragsvorlagen. Wir haben diesen mit dem benutzerdefinierten Header und dann haben wir diesen , der im Wesentlichen einer normalen Post-Vorlage entspricht, aber ohne ähnliche Artikel. Ich möchte hier feststellen, dass ich ziemlich viel Syntax verwendet habe , die nicht unbedingt erklärt wurde. Ich wollte hier reinspringen und dies so praktisch wie möglich gestalten und dir zeigen, wie wir unser Ghost-Thema aufbauen. Aber wenn Sie jemals verwirrt sind über einige der Helfer, die ich hier benutzt habe, oder über die Syntax, ist die Dokumentation am besten nachzusehen. Etwas, in das wir in dieser Klasse nicht tief eingegangen war die Liste der verschiedenen Helfer, aber wie Sie hier sehen können, haben wir hier so viel, um den Kontext der aktuellen Route zu überprüfen. Wir haben das ein wenig in dieser Klasse gesehen offensichtlich sehr einfache Bedingungen mit if-Anweisungen getestet , die zum Erstellen benutzerdefinierter Abfragen verwenden, aber Sie haben auch andere Dinge wie die Site-Objekte, die wir verwendet haben bisschen, Navigation. Wir haben alle möglichen verschiedenen Daten, auf die wir zugreifen können , und diese Dienstprogrammhelfer hier, die wir gesehen haben. Dinge wie das automatische Hinzufügen von Code von Ghost im Kopf und das Einfügen dynamischer CSS-Klassen, können wir sogar die geschätzte Lesezeit für einen Beitrag rendern. Dies sind alles Optionen in Ghost, und wenn Sie sie nachschlagen möchten, sind sie hier in Helfern. Ich spreche auch in meinem Artikel darüber. Wenn Sie also mehr lesen möchten, können Sie hier mehr über die verschiedenen Kontexte erfahren und wie Ghost-Themes mit dem Lenker codiert werden. Lenker verfügt über eine eigene Syntax, wurde aber auch in Ghost-Themen erweitert. Die Theorie hinter all dem, ich ermutige Sie, in diesem Leitfaden zu lesen, sie wird veröffentlicht, wenn Sie dieses Video ansehen, aber ich möchte mich nicht zu sehr darauf einlassen, diesen Kurs hochtheoretisch zu gestalten. Das Feedback zu einigen dieser Kurse, die ich zuvor gemacht habe, ist, dass die Leute diese Theorie in die Praxis umsetzen wollen. Ich habe mich nicht allzu sehr auf die Syntax des Codierens von Ghost-Themen konzentriert, aber ich denke, was sehr wichtig ist, ist zu verstehen, wenn ich dieses Diagramm genau hier hochscrolle, und das Routing, weil dies die Struktur deines Ghost-Themas bildet. Wenn Sie diese Grundlagen nicht verstehen können Sie sich wirklich überraschen und sich fragen, was Sie tun sollen, um verschiedene Vorlagen für verschiedene Routen zu erstellen. Dies ist sehr mächtig und steht im Kern von Ghost. Die anderen Dinge wie die spezifische Syntax, mit der Sie nach Dingen suchen können, können Sie leicht nachschlagen und wir haben hier ein paar Beispiele für die Codierung unseres eigenen kleinen Ghost-Themas gesehen . Ich ermutige Sie, wie wir uns im Klassenprojekt beschäftigen werden, Ihre eigene Version davon zu erstellen, aber in der nächsten Lektion werden wir lernen, wie Sie es tatsächlich live auf einer Website im Internet veröffentlichen können, damit wir kann unser Ghost-Thema tatsächlich der Welt präsentieren und hoffentlich in einer Produktionsumgebung verwenden. Wir sehen uns im nächsten Video. 13. Wie du dein Thema live veröffentlichst: In dieser Lektion werden wir darüber sprechen, das Ghost-Thema in einer Produktionsumgebung zu veröffentlichen , d. h. unsere Ghost-Website live zu nehmen und im Internet zu veröffentlichen. Ich habe ein paar Tabs geöffnet, die uns bei diesem Ziel helfen werden. Ich habe den Artikel hier von Ghost über die Installation von Ghost. Hier sehen Sie, dass wir hier eine der Optionen gemacht haben, nämlich die lokale Installation. Aber wenn Sie zum Cloud-Hosting nach unten scrollen, gibt es tatsächlich drei Optionen, über die wir in nur einer Sekunde sprechen werden. Dann werden wir uns auch die GitHub Ghost-Integration ansehen , die es uns ermöglicht, das Ghost-Thema einfach kontinuierlich zu integrieren und es uns ermöglicht, das Ghost-Thema einfach kontinuierlich zu integrieren direkt auf unserer Ghost-Website bereitzustellen. Grundsätzlich müssen wir tun, wenn wir lokal Änderungen an unserem Ghost-Theme-Code vornehmen , diesen Code in unser Repository zu übertragen , und GitHub Actions werden ihn für uns erstellen und unsere Live-Ghost-Website automatisch aktualisieren. Dies ist eine sehr leistungsstarke Integration in Bezug auf die Aktualisierung Ihrer Website im Laufe der Zeit. Sobald Sie live gegangen sind, möchten Sie vielleicht hier und da Änderungen vornehmen. Sie werden das noch einmal lokal tun und wenn Sie diese Änderungen mit dieser Integration einfach an GitHub übertragen, wird es direkt auf Ihre Ghost-Site gelangen. Nun, zurück zum ersten Artikel hier, wie man Ghost installiert. Die erste Zeile, wie es heißt, der schnellste Weg, um eine Website auf Ghost einzurichten, ist Ghost Pro. hier wieder zu den Cloud-Optionen scrollt, ich hier wieder zu den Cloud-Optionen scrollt, verwende ich DigitalOcean und ich benutze DigitalOcean, weil es billiger ist als Ghost Pro. Aber natürlich ist es ein bisschen schwieriger einzurichten und es ist nicht etwas, auf das wir in dieser Klasse eingehen werden. Früher waren sie ein Service, den Ghost Kabel Ghost Valet zur Verfügung stellte , und sie kümmerten sich gegen eine einmalige Gebühr um die gesamte Installation für Sie. Das scheint nicht mehr verfügbar zu sein. Auf der zweiten Website, die ich auf DigitalOcean eingerichtet habe, musste ich die Schritte selbst durchlaufen und es war ein bisschen ein kniffliger Prozess für jemanden, der mit Serverkonfigurationen nicht allzu vertraut ist. Was ich für diesen Kurs empfehlen werde und was ich mit euch durchgehen werde , ist die Verwendung von Ghost Pro, was der einfachste Weg sein wird, um Ihre Website aufzurichten, und es verwendet im Wesentlichen Ghost selbst, um die Hosting für dich. Wie es hier heißt, offizielles verwaltetes Hosting, klicke ich auf diese Option und wie Sie sehen können, ist dies Kosten. Leider wird bei jedem Website-Hosting einige Kosten anfallen. Wenn wir hier nach unten scrollen, benötigen wir mindestens den Ersteller-Plan, da wir benutzerdefinierte Designs verwenden. Wenn wir wegnehmen, beträgt der jährliche Rabatt 31 USD pro Monat. Mit einem jährlichen Rabatt wird es mindestens 25 USD pro Monat betragen. Aber die gute Nachricht ist, und für unsere Zwecke, um zu lernen, wie das geht, können wir es testen, indem wir eine 14-tägige Testversion starten. Ich klicke darauf und ihr könnt weitermachen, solange du den Prozess noch nicht vor ihm gemacht hast und lass uns ein Konto erstellen. Ich nenne das chrisskillshare und dann lass uns ein verwenden, ich benutze einfach das vorgeschlagene Passwort und kopiere es irgendwo hin, damit ich das nicht verliere. Es wird nach Ihren Kartendaten gefragt, da Ihre Karte nach der 14-tägigen Testversion automatisch belastet wird. Wenn Sie nicht möchten, dass dies geschieht, stellen Sie natürlich sicher, dass Sie vor den 14 Tagen kündigen. Ich finde, dass viele Leute das nicht mögen, aber wenn Sie nur eine Erinnerung auf Ihrem Telefon oder Computer einrichten , um sicherzustellen, dass Sie vor dem Ende der 14 Tage kündigen, werden Sie nie belastet und ich wurde nie belastet alles, wofür ich nicht in Rechnung gestellt werden wollte, einfach weil ich immer daran erinnere, eine Erinnerung einzugeben. Für diejenigen unter Ihnen, die sich besonders Sorgen machen, dass Ihre Karte belastet wird, stellen Sie sicher, dass Sie diese Erinnerung eintragen. Ich habe meine Kartendaten hier gespeichert. werde das nur einsetzen, Details bestätigt, und dann werde ich weiter drücken. Hier kannst du wählen, welche Art von Persönlichkeit du bist. Ich treffe Developer, weil ich das bin. Klicken Sie nun auf Weiter und jetzt können wir unserer Seite einen Namen geben. Ich nenne es einfach Ghost Site. Dann klicke ich auf. Lass uns das machen. Irgendwas stimmt mit Stripe nicht, wie es scheint. Lass es uns nochmal versuchen. Es sieht so aus, als hätte es das zweite Mal geklappt. Es dreht sich gerade, schließt unsere Installation ab und schließt unsere Konfiguration ab. Dann haben wir genau wie auf unserem lokalen Computer eine Neuinstallation. Wenn ich hier auf Beiträge gehe, kannst du sehen, dass wir dieselben Standardbeiträge haben, die wir zuvor hatten, dieselben Standardseiten und natürlich den Ghost-Mitarbeiter und unseren Benutzer hier oben, die wir bei der ersten Anmeldung festgelegt haben. Das ist das Tolle an Ghost Pro. Um mit DigitalOcean oder Linode an diesen Punkt zu kommen, sind einige zusätzliche Schritte erforderlich. Während die Verwendung von Ghost Pro es uns ermöglicht, eine Ghost-Website super schnell zum Laufen zu bringen. Wie Sie hier sehen können, können wir auf unsere Website ghost-site.ghost.io zugreifen. Es ist ziemlich cool, dass die Ghost-Site tatsächlich als Website-Name verfügbar war. Aber wenn Sie sich diesen Kurs ansehen, sollte diese Seite wahrscheinlich sowieso ausgefallen sein. Wir haben den gleichen Ausgangspunkt wie zuvor, als wir lokal installiert haben. Was wir jetzt tun werden, ist, dass wir unser Thema verpacken und auf diese Live-Ghost-Site hochladen. Denken Sie daran, dass wir hier in die Einstellungen gehen, um sich Themen anzusehen und das Insider-Thema hier haben wir Casper. Eines der Dinge, die ich ursprünglich nicht getan habe, als wir in das Casper-Theme kamen , war, dass ich die Details in der package.json-Datei nicht geändert habe, also gehe ich jetzt zum Code-Editor um. Schließen wir alles außer der paket.json-Datei. Wenn ich nach oben scrolle, siehst du, dass unser Thema immer noch Casper heißt. Ich fange an, dies umzubenennen, sagen wir „Custom-Ghost-Theme“, und lassen Sie uns auch einige dieser anderen Details ändern. Benutzerdefiniertes Ghosts-Thema von Chris Dodd. Ich muss dort keine Demo ablegen. Sagen wir einfach, es ist Version 1.0. Werden Sie diese Screenshots los. Anstelle des Autors geben wir unseren tatsächlichen Namen, E-Mail an und entfernen die URL dort. Wir können wahrscheinlich alle anderen hier lassen. Repository, lassen Sie uns das einfach loswerden. Diese Links sind speziell für das Casper-Thema gedacht, also werde ich diese auch los. Entferne einfach alles, was für Casper spezifisch ist , und ändere vor allem so etwas wie den Namen. Was wir jetzt tun werden, ist, dass ich ein Finder-Fenster eröffne. Eine Sekunde, während ich mein Fenster hier neu anordne und dann gehen wir hier zu unserer Ghost-Seite. Sobald wir uns in unserem Ghost-Site-Ordner befinden, können wir auf aktuelle Inhaltsthemen klicken, um zu unserem Themes-Ordner zu gelangen. Hier sehen Sie unseren Casper-Theme-Ordner hier, aber natürlich haben wir den Code in unserem Casper-Ordner hier stark geändert Was ich tun werde, ist, dass ich ihn zuerst komprimiere und dann werde ich das Thema umbenennen , benutzerdefiniertes Thema. Jetzt haben wir unser Theme in einen Zip-Ordner gepackt. Wir können es jetzt auf unsere Live-Ghost-Site hochladen. Ich gehe zu unserer Ghost-Seite, der Produktionsversion. Stellen Sie sicher, dass Sie sich in der Produktionsversion befinden, nicht in der lokalen Version, da wir kein Thema in unsere lokale Version hochladen müssen. Wir haben es schon genau hier auf unserem Computer. Was ich tun werde, ist auf diesen grünen Button zu klicken, um ein Thema hochzuladen. Schnappen Sie sich diese Zip-Version des Themas und dann wird es mich fragen, ob ich sie aktivieren möchte, und ich klicke auf Ja, um sie zu aktivieren. Jetzt kann ich hier auf diesen Button klicken und jetzt können wir sehen, dass unsere Ghost-Seite jetzt in unserem Theme geladen wird. Eine Sache, die Sie hier beachten sollten, ist, dass die Navigation anders ist, wie Sie hier oben sehen können, und was ich tun werde, ist, unsere Navigation hier auf unserer Live-Site auf das zu replizieren , was wir auf unserer lokalen Website erstellt haben. Klicken Sie hier in Einstellungen, gehen Sie in die Navigation und lassen Sie uns diese Links entfernen. Ich glaube, wir hatten zu Hause, ungefähr und bloggen. Bloggen Sie hier, klicken Sie auf Speichern. Wenn wir jetzt auf unsere Website zurückkehren, können Sie sehen, lassen Sie uns noch einmal aktualisieren. Jetzt können Sie sehen, dass wir die gleiche oder ähnliche Navigation haben wie wir bei unserer lokalen Installation hatten. Aber es gibt noch eine Sache, die wir hier ändern müssen, und das ist das Hochladen unserer aktualisierten Routendatei. Wenn wir hier in die Einstellungen gehen und dann nach unten scrollen wir zu Labors, nicht sicher, warum es in Labors ist, denn es ist eine ziemlich wichtige Sache, die wir tun müssten. Aber hier unter den Beta-Funktionen gehen wir zu Routen und laden unsere eigene routes.yaml-Datei hoch. Hier sehen Sie in den Inhaltseinstellungen unsere Routendatei, die wir hochladen. Das ist jetzt hochgeladen. Was das bedeutet ist, wenn wir auf die Homepage unserer Website gehen, werden wir die Homepage sehen. Aber jetzt wird unser Index auf die Blogroute verschoben, genau wie wir es vor Ort hatten, und jetzt sollte unsere Website genau die gleiche sein wie wir vor Ort hatten. Um zu aktualisieren, was wir in diesem Video gemacht haben, haben wir unsere package.json-Datei genau hier vorbereitet. Alle Details wurden aktualisiert, damit sie nicht mehr spezifisch für Casper sind. Wir haben einen Zip des Theme-Ordners erstellt. Wir haben diesen Ordner in unseren benutzerdefinierten Themennamen umbenannt, in diesem Fall ein benutzerdefiniertes Thema, und dann haben wir unser Theme in den Ghost-Administrator hochgeladen. Wenn ich hier reingehe, gehe auf Themen ein, wir können sehen, dass wir unser Kunden-Ghost-Thema dort haben. Dann haben wir natürlich unsere Navigation aktualisiert. Aber schließlich, was wirklich wichtig ist, sind wir in Labors gegangen und haben auch unsere Routendatei aktualisiert. Denken Sie daran, dass Routen in hohem Maße mit dem Thema verwandt sind, sich aber nicht im Themenordner befinden daher separat hochgeladen werden müssen. Das ist es, was erforderlich ist, wenn Sie einen Ghost Pro betreiben. Ich empfehle Ghost Pro, wenn Sie es sich leisten können dem einfachen Grund, dass es so einfach zu installieren ist, ich meine, es wurde von Ghost erstellt. Sie machen es also super einfach, mit der Ghost-Site in Betrieb zu gehen. Derselbe Prozess auf einem anderen Host, wie wir es zuvor gesehen haben, wie DigitalOcean oder Linode dauert etwas länger und deshalb werde ich das in dieser Klasse nicht durchmachen. Was ich persönlich verwende, ist DigitalOcean und ermöglicht es mir, nur 5 US-Dollar pro Monat für die Ausführung meiner Website zu bezahlen , anstatt das Minimum, das wir gesehen haben, wenn ich hier auf die Ghost Pro-Preisseite gehe, 25, also zahle ich fünfmal weniger für es auf DigitalOcean einrichten. Aber der Unterschied ist, dass ich einen Nachmittag oder Morgen damit verbringen musste , herauszufinden, wie ich es tatsächlich auf DigitalOcean einrichten kann. Es ist ein bisschen mehr Arbeit, es auf DigitalOcean oder Linode einzurichten. Wenn du es dir leisten kannst und es auf jeden Fall tun willst , benutze Ghost Pro. Aber für mich war ich bereit, mir die Mühe zu machen, herauszufinden , wie ich es an DigitalOcean zum Laufen bringen kann, um langfristig weniger zu bezahlen. Das sind Ihre Möglichkeiten dort. Ich lasse es für diese Lektion dort und in der nächsten Lektion sprechen wir über die GitHub-Integration. In der nächsten Lektion werden wir darüber sprechen, einen GitHub-Workflow zu erstellen, in dem wir einfach Änderungen an unserem lokalen Thema erstellen, sie an GitHub übertragen und dann unsere Ghost-Site automatisch aktualisieren können , ohne dass wir es haben um hier reinzugehen und jedes Mal manuell eine Zip-Datei hochzuladen. Wenn du lernen willst, wie das geht, werde ich dich im nächsten Bonusvideo erwischen. 14. Bonus: Einrichten der Github-Integration: Wie in dieser Bonusstunde versprochen, werden wir uns ansehen, wie wir die GitHub-Integration nutzen können, um Änderungen an unseren Ghost-Themes über ein einziges Git, Commit und Push zu veröffentlichen . Git ist etwas, das ich jedem empfehle. Viele von euch, ich bin mir sicher, dass sie es bereits benutzen, aber es ist eine gute Möglichkeit, Änderungen an Ihrem Projekt zu verfolgen. GitHub ist die führende Website, auf der Sie Remote-Repositorys hosten können. Um dies zu tun, benötigen Sie ein GitHub-Konto. Ich werde nicht durchgehen, wie Sie einen einrichten, aber Sie benötigen ein GitHub-Konto. Wenn du das Video jetzt anhalten und das machen willst, warte ich auf der anderen Seite auf dich. Andernfalls, wenn Sie ein GitHub-Konto haben, fangen wir an, diese GitHub-Integration einzurichten. Wir müssen nur dieser Anleitung hier auf der ghost.org-Website folgen. Es befindet sich unter Integrationen/GitHub, und lasst uns dieses Dokument durchgehen und folgen. Der erste Schritt besteht darin, die benutzerdefinierte Integration in unsere Live-Ghost-Site zu erstellen. Wie das funktioniert, werden wir den Code auf unserem lokalen Computer bearbeiten, wir machen ein Git-Commit und schieben ihn an GitHub. Sobald es GitHub erreicht hat, wird sich dann auf unsere Live-Website auswirken. Damit sich dies auf unsere Live-Website auswirkt, müssen wir eine benutzerdefinierte Integration einrichten, damit wir über diese Berechtigungen verfügen, um unsere Live-Website zu beeinflussen. Wie hier im Ghost Admin heißt, werden wir zu Integrationen navigieren und eine neue benutzerdefinierte Integration namens GitHub Actions erstellen . Ich versuche diese Seite an Seite zu laufen. Könnte ein bisschen eng sein, aber es wäre gut, diese Seite an Seite zu haben. Es sieht so aus, als würde es sehr eng werden. Los geht's. Wir gehen hier auf weitere Informationen ein, klicken auf „Integrationen“ und möchten dann nach unten scrollen, um benutzerdefinierte Integration hinzufügen. Wir werden die Integration, wie es im Dokument heißt, Github Actions nennen wie es im Dokument heißt, . Erschaffe das. Scrollen Sie nach oben, und als nächstes kopieren und fügen wir die Integrationsdetails in unsere GitHub-Repository-Umgebungsvariablen ein. Wir müssen tatsächlich ein GitHub-Repository erstellen, damit dies funktioniert. Was wir tun werden, ist, dass ich dieses Fenster erneut erweitern, in mein GitHub-Konto gehe, mich einlogge und eine Zwei-Faktor-Authentifizierung habe, also muss ich mich mit meiner Authenticator-App autorisieren. Jetzt erstellen wir hier oben ein neues Repository, indem wir dieses Plus-Symbol verwenden, und nennen wir dieses Ghost-Custom-Theme und dann ein benutzerdefiniertes Thema, das in meiner Skillshare-Klasse Ghost Theme Development erstellt wurde. Ich überlasse das für euch öffentlich, damit ihr euch den Code anschauen könnt. Ich weiß, dass einige von euch das hin und wieder verlangen, also werde ich diesen Code in diesem Repository veröffentlichen. Wenn Sie zu dieser Adresse gehen möchten, wird dies danach eine öffentliche Adresse sein, damit Sie dies tun können. Wir werden gehen und ich werde diesen Anweisungen nicht Wort für Wort folgen, ich mag es nicht, einen Hauptzweig zu erstellen, ich verwende gerne den Master-Zweig. Ich habe diesen ersten Teil hier durchgegangen, aber was ich tun werde, gehe hinein, lass uns unser Terminal wieder öffnen, vielleicht hier einen neuen Tab erstellen und dann zu unserem Ordner navigieren, in dem wir den Themencode haben. Cd code/skillshare/ghost-Site, und dann glaube ich von innen an seinen Inhalt und dann Themen, und dann innerhalb von Themen, lass uns einfach einen Blick darauf werfen, Casper. Lasst uns hier in Casper schicken. Dann initialisieren wir unser Git-Repository. Aber vorher werde ich das nur ein bisschen größer machen und dann git init ausführen, um ein neues Git-Repository zu erstellen, git fügt alles hinzu und mache dann unser erstes Commit. Jetzt können wir diese Adresse genau hier hinzufügen, was auch immer es für Sie ist, diese hinzufügen, und dann können wir Git Push -u Origin Master machen. Da sind wir los. Das sollte jetzt in unser GitHub-Repository verschoben werden, und wenn wir uns aktualisieren, sollten wir dieses Thema jetzt hier oben haben. Es ist das gleiche Lesen von Casper zu kopieren, also könnte ich danach etwas aufräumen. Aber abgesehen davon haben wir unser benutzerdefiniertes Ghost-Theme auf dem neuesten Stand. Wir werden den nächsten Schritt machen, den es in der Dokumentation heißt Ziehen Sie dies also rüber und hieß es, dann in unsere Einstellungen zu gehen und dann in Secrets zu gehen. Wir sind hier etwas müde, aber es ist in dieser Speisekarte. Ich gehe in Einstellungen, suche nach Geheimnissen, und wenn ich dann nach unten scrolle, kann ich ein neues Repository-Geheimnis erstellen und folgen genau dem, was hier steht. Ich erstelle ein Geheimnis namens GHOST_ADMIN_API_URL und kopiere die Details aus unserer Integration. Ich nehme die API-URL, klicke auf „Geheimnis hinzufügen“, und dann fügen wir eine weitere für den ADMIN_API_KEY hinzu, also kopiere dies genau und nimm dann unseren ADMIN_API_KEY Schlüssel hier und lege ihn in dieses Wertefeld ein. Das sollte ausreichen, um GitHub genügend Berechtigungen zu erteilen, um unsere Live-Ghost-Site tatsächlich zu beeinflussen. Kommen wir nun zum nächsten Schritt, nämlich die Funktion zum Bereitstellen des Ghost-Themas zu installieren. Wir werden hier auf unser Thema eingehen. Stellen Sie sicher, dass wir uns im Theme-Ordner befinden, und wir werden diese neue Datei erstellen, die die.github/workflows/main.yml war.yml. Mal sehen, ob wir dies innerhalb des VS-Codes machen können. Da sind wir los. Es hat den Weg für uns und alles gemacht, also können wir das alles einfach kopieren hier in unsere Datei einfügen. Das ist alles, was wir dort tun müssen, außer dass wir keinen Hauptzweig haben, also werde ich das loswerden, und das sollte es sein. Was ich tun werde, ist, unser Terminal erneut zu öffnen, und ich füge die Änderung hinzu und verbinde sie dann, füge Code für GitHub-Aktionen hinzu und stelle dann sicher, dass füge Code für GitHub-Aktionen hinzu und stelle dann sicher, du Push git. Dadurch wird diese bestimmte Datei in unser Git-Repository hochgeladen. Ich mache das wieder größer. Gehen Sie hier zurück in unseren Code, und jetzt können Sie sehen, dass wir einen.github-Ordner mit unseren Workflows haben, und wir haben diesen Code für die GitHub-Aktion. Das sollte ausreichen, damit wir jetzt Änderungen hier und die auf unsere Ghost-Site integrieren können. Ich gehe hier zu Themes, und wie Sie hier sehen können, haben wir dieses Thema bereits an unseren Admin weitergegeben. Wie Sie hier in den Klammern sehen können, ist es ein bisschen verwirrend, weil es ein paar des gleichen Namens gibt. Aber jetzt haben wir dieses Custom-Ghost-Theme. Lassen Sie uns jetzt eine ziemlich offensichtliche Änderung vornehmen und sehen, wie sich dies auf unsere Live-Seite auswirkt, wenn wir die GitHub-Integration verwenden. Sagen wir einfach, anstatt dieses Header-Styling, lassen Sie uns das ändern, nehmen wir an, wir werden eine Hintergrundfarbe von Weiß machen, einfach die Farben umkehren, damit wir es tun können. Das wird für die Navigation nicht funktionieren, wir müssen sicherstellen, dass das Navi auch diese Farbe hat, und deshalb sollte es sortiert werden. Replizieren wir das in unserer CSS-Datei. Es war Header und Header A. Dies dient nur zu Demonstrationszwecken. Sie können jede Änderung vornehmen, die Sie möchten, während Sie Ihr Projekt durchführen. Dies soll nur zeigen, dass die Änderung auftreten wird , wenn wir in unserem GitHub-Repository veröffentlichen. Ich mache diese weißen Schalter, fff. Jetzt, da wir eine Änderung vorgenommen haben, können Sie hier sehen, wir dort eine Änderung vorgenommen haben. Wir werden wieder in unser Terminal gehen, Git fügt all diese Änderungen hinzu, was nur eine ist, und dann den Header für Updates festschreiben. Dann werden wir schieben, und unsere GitHub Action sollte dann funktionieren. Wir können uns den Status unserer GitHub Action tatsächlich ansehen. Ich schließe diesen Kopf hier, aktualisiere, klicke auf „Aktionen“, und du siehst hier, dass wir gerade einen Workflow laufen lassen. Sagt, es hat vor 15 Sekunden angefangen und jetzt ist es fertig, also sollte es ein grünes Häkchen daneben haben, und wenn wir dann auf unsere Ghost-Seite gehen und aktualisieren, bin ich mir ziemlich sicher, dass es das zweite hier ist. Jetzt können Sie sehen, dass wir unseren aktualisierten Header Style jetzt live auf unserer Website haben. So können wir GitHub verwenden, um Änderungen an unserer Website zu veröffentlichen. Sobald wir dies aktiv haben, alle Änderungen, die wir an diesem Thema vornehmen, auf unserer Website live sein. Es könnte eine gute Idee sein, ein paar Zweige zu haben, eine für die Inszenierung und eine für Live. Andernfalls, wenn ich dieses Thema aktiviert lasse und lokal Änderungen vornehme, die ich dann an GitHub gedrängt habe, wird dies auch auf unserer Ghost-Website geändert, was es uns ermöglicht, im Laufe der Zeit ständig Änderungen vorzunehmen. Das war's für diese Finace-Bonusstunde. Im nächsten Video werden wir den Kurs mit unserem Fazit abschließen und ich werde Ihnen von Ihrem Klassenprojekt erzählen. Wir sehen uns im nächsten Video. 15. Schlußbemerkung und Kursprojekt: Dies schließt diesen Kurs ab, wie Sie Ihre Geisterpublikation anpassen können. Für Ihr Klassenprojekt ermutige ich Sie, Ihr eigenes Geisterthema zu erstellen , indem Sie das Wissen verwenden, das Sie in dieser Klasse gewonnen haben. Wenn Sie zu irgendeinem Zeitpunkt festsitzen, können Sie sich auf die offizielle Dokumentation oder meinen ultimativen Leitfaden zur Geisterentwicklung beziehen , die auf meiner Website veröffentlicht wurde. Wenn das immer noch nicht hilft, können Sie natürlich einen Kommentar im Diskussionsfeld unten hinterlassen, und ich werde mein Bestes tun, um Sie in die richtige Richtung zu weisen. Wie immer danke fürs Zuschauen und ich hoffe, Sie in einigen meiner anderen Kurse wiederzusehen.