Share
Die Erstellung von Themen für Ghost ist unglaublich reibungslos, einfach und sehr einfach zu erlernen. Bevor Sie jedoch mit der Erstellung eines aktuellen Ghost-Themas beginnen, ist es wichtig und hilfreich zu verstehen, welche Rolle Themen in der gesamten Ghost-Ökologie spielen, damit Sie optimal gestalten können.
Der beste Weg, dies zu tun, besteht nicht darin, sich kopfüber in das Design oder den Code zu stürzen, sondern Ghost selbst als Grundlage zu verstehen.
In diesem ersten Teil unserer Tutorialserie erhalten Sie diese Grundlage und sobald Sie das getan haben, können Sie Ihr erstes Thema erstellen.
Ghost ist eine Open Source-Anwendung, die sich der Veröffentlichung von Inhalten widmet.
In den letzten Jahren wurden Content-Publishing-Tools entwickelt, die es den Nutzern ermöglichen, sich selbst so gut wie jede Art von Website selbst zu verwalten, die sie möglicherweise benötigen. Unabhängig davon, ob es sich um einen komplexen Online-Shop, eine Geschäftspräsentation oder ein vollwertiges CMS handelt, können Benutzer mit relativ wenig Erfahrung alles selbst erledigen.
Aber bei Ghost geht es nicht um diese komplexen Dinge. Ghost ist es, den Fokus auf eine einfache Sache zu lenken: Schreiben.
Es ist eine Plattform, die auf dem Prinzip der Einfachheit aufgebaut ist. Sein Hauptziel ist es, Autoren beim Bloggen mehr zu helfen und sich weniger auf das Tool zur Veröffentlichung von Inhalten zu konzentrieren, das Teil der Blogging-Gleichung ist.
Für Theme-Entwickler führt dies zu einer Änderung des Tempos. Während das Theming für andere Plattformen häufig von der Forderung der Benutzer nach Themen abhängt, um ihrer Website alle Arten von funktionaler Komplexität hinzuzufügen, wird die Ghost-Plattform nur von einer Sache bestimmt. Der Slogan für Ghost sagt uns, was das ist:
Nur eine Blogging-Plattform
Da sich Ghost zu 100% auf das Bloggen konzentriert, ist Ghost: Nur für Blogger.
In diesem Sinne wird das Design des Ghost-Themas auch nur von einer Sache bestimmt: Bloggen Sie einfach Themen.
Dies mag als naheliegende Aussage erscheinen, aber sie sind wichtig zu betonen, denn auf einer Plattform, die sich auf das Schreiben konzentriert und von Menschen benutzt wird, die sich auf das Schreiben konzentrieren, müssen Ghost-Themen mit einem Fokus auf das Schreiben gestaltet werden.
Im Rahmen seiner Kickstarter-Kampagne sagte der Gründer von Ghost, John O'Nolan, Folgendes:
… Es geht nicht nur darum, etwas zu schaffen, das gut aussieht, es geht darum, Autoren Tools zu geben, die das Bloggen vorantreiben und den Journalismus auf die nächste Stufe bringen.
Darin liegt die Philosophie, die Ghost-Designdesigner annehmen müssen, um den Nutzern von Ghost am besten zu dienen: Stellen Sie in erster Linie sicher, dass der Inhalt eines Benutzers immer im Mittelpunkt steht.
Es ist ein üblicher Ansatz im Webdesign, sich auf die Grafik und das allgemeine Erscheinungsbild des Designs zu konzentrieren, wobei das Styling von Typografie und Inhalt zuletzt erfolgt. In einem Ghost-Thema sollten Inhalte jedoch niemals in andere Bereiche des Designs geraten.
Als Ghost-Design-Designer sollten Sie zunächst überlegen, wie Inhalte aussehen werden, wobei der Schwerpunkt auf der Typografie liegt. Der Rest des Designs des Themas sollte sich zu seiner Unterstützung entfalten.
Wenn Sie mit dem Erstellen eines eigentlichen Themas beginnen, erhalten Sie später in der Lernreihe weitere Einblicke in die Funktionsweise. Bevor wir dies tun können, müssen Sie jedoch mehr über die Ghost-Plattform selbst erfahren.
Es gibt einige grundlegende Aspekte von Ghost, die Sie beachten sollten, um sie von anderen Plattformen zu unterscheiden, an die Sie gewöhnt sind.
Im Gegensatz zu den meisten der derzeit populärsten PHP-basierten Anwendungen zum Erstellen von Websites basiert Ghost auf Node.js.
Node.js ist eine Softwareplattform, die JavaScript im Backend interpretiert und ausführt. Bei Nodejs.org können Sie mehr darüber erfahren, aber Sie müssen es wirklich nicht. Um ein Ghost-Design zu erstellen, sind keine umfassenden Kenntnisse von Node.js erforderlich. In diesem Lernprogramm wird alles behandelt, was Sie wissen müssen.
Viele Leute betrachten Node.js aus einer Reihe von Gründen als Weg der Zukunft; Geschwindigkeit ist einer von ihnen. Es wurde gezeigt, dass Node.js in zahlreichen Benchmarking-Tests deutlich schneller abschneidet als PHP. Dies ist eine der Hauptkomponenten, warum Ghost so unglaublich schnell läuft.
Um an einem Ghost-Thema in einer lokalen Umgebung arbeiten zu können, müssen Sie Node.js lokal installieren. Glücklicherweise ist dies ein sehr schneller und einfacher Vorgang. Wir zeigen Ihnen Anweisungen dazu, bevor Sie mit dem Erstellen eines Themas im zweiten Teil dieser Tutorialserie beginnen.
Hinweis: Sie sollten sich dessen bewusst sein, dass es kurzfristig bei der Bereitstellung Ihrer Ghost-Sites zu wachsenden Schmerzen kommen kann. Fast jeder Host auf der Welt ist derzeit für PHP-Anwendungen konfiguriert, aber da Node.js noch relativ neu ist, ist die Einrichtung der "Push-Button" für Live-Domains, an die Sie mit anderen Anwendungen gewöhnt sind, noch nicht ganz fertig. Eine Reihe von Hosts bauen bereits eine neue Infrastruktur, die speziell auf Ghost zugeschnitten ist. Es dauert also nur eine kurze Zeit, bis die Implementierung von Ghost genauso einfach ist wie jede andere Anwendung, wenn nicht einfacher. Zusätzlich können Sie ab November den Inhouse-Hosting-Service von Ghost nutzen.
Ein weiterer Aspekt von Ghost, der sich möglicherweise von anderen Plattformen unterscheidet, für die Sie in der Vergangenheit ein Thema erstellt haben, bezieht sich auf Einstellungen, die Benutzer im Backend steuern können.
Die benutzergesteuerten Einstellungen von Ghost bestimmen einen großen Prozentsatz dessen, was am Frontend ausgegeben werden kann, was wiederum die Art des Inhalts beeinflusst, der für das Theming verfügbar ist.
Es sind noch viele neue Dinge für Ghost geplant, aber der Ansatz, den wir in dieser Tutorial-Reihe verfolgen werden, besteht darin, mit den jetzt verwendbaren Einstellungen zu arbeiten.
Derzeit sind bestimmte Einstellungen für zukünftige Ghost-Funktionen vorhanden. So gibt es beispielsweise eine Admin-Benutzeroberfläche zum Erstellen von Navigationsmenüs sowie vorläufige Funktionen für die Ausgabe in Ghosts Kern. Wir wissen jedoch nicht genau, wie diese Dinge funktionieren werden (und erst, wenn sie veröffentlicht werden). Daher werden wir in dieser Serie keine Entwürfe für sie erstellen. Wir lassen das für den Tag, an dem das Ghost-Team sie tatsächlich freigibt.
Dies bringt uns zu dem, was Benutzer jetzt im hinteren Ende von Ghost steuern können, nämlich Einstellungen, die in zwei Bereiche unterteilt sind.
Schauen wir uns jetzt jeden dieser Bereiche an.
Die Admin-Einstellungen von Ghost sind in zwei Registerkarten unterteilt: Allgemeine Einstellungen und Benutzereinstellungen. Die Registerkarten Allgemeine Einstellungen und Benutzereinstellungen steuern den Inhalt, den wir in unseren Designs gestalten können.
Das Einstellungen> Allgemein Auf der Registerkarte gibt es folgende Elemente, die überall in einem Ghost-Thema verwendet werden können:
Das Einstellungen> Benutzer tab gibt uns die folgenden, nur in der Einzelpost-Ansicht verwendbaren:
Die Nachbearbeitungsoberfläche von Ghost ist sicherlich eine der interessantesten Funktionen. Es wurde von Autoren für Autoren entwickelt und bietet eine fantastische Umgebung für die Erstellung von Inhalten.
Der Hauptunterschied zu anderen Bearbeitungsumgebungen ist, wie sauber und minimalistisch es gestaltet ist. Es gibt kein Durcheinander durch Formatierungssymbolleisten, Meta-Boxen oder andere benutzerdefinierte Felder. Der Großteil der Bildschirmfläche ist ausschließlich dem Schreibbereich gewidmet.
Der relevanteste Aspekt des Nachbearbeitungsbereichs für Designdesigner ist das Rückgrat der Ghost-Nachformatierung: Markdown.
Ghosts Inhalt wird nicht mit Stil-Schaltflächen oder rohem HTML-Code, sondern mit Markdown formatiert. Dies ist eine einfache Inline-Syntax, die bedeutet, dass Autoren während der Inhaltserstellung zu keiner Zeit anhalten müssen. Aufgrund dieses vereinfachten Ansatzes gibt es eine relativ kurze Liste der Elemente, die vom Post-Editor gesteuert werden:
Hinweis: Markdown akzeptiert auch unformatiertes HTML, was bedeutet, dass Videos von Diensten wie YouTube ganz einfach per Kopieren und Einfügen von Iframe-Code eingebettet werden können. Aus diesem Grund ist es auch eine gute Idee, die Gestaltung von Iframes in Ihren Designs zu berücksichtigen.
Ghost basiert auf einer klaren Trennung von Präsentation und Inhalt.
Ghost selbst übernimmt die Generierung von Inhalten und alle zusätzlich erforderlichen Funktionen werden von Plugins verwaltet. Damit bleibt das Ghost-Thema der reinen Präsentation gewidmet.
Die Trennung von Inhalt und Präsentation ist ein nicht neues Prinzip des Webdesigns. Die Grundidee ist, dass, wenn Inhalt und Präsentation in unabhängige Einheiten getrennt werden, eine der beiden möglich ist, ohne die andere zu verändern. Mit anderen Worten, ein Thema kann für ein anderes ausgetauscht werden, ohne dass der Benutzer seinen Inhalt auf irgendeine Weise ändern muss.
Wenn Themen eine Funktionalität enthalten, die nicht rein präsentativ ist, kann ein Benutzer sein Thema nicht mehr ändern, ohne auch das Erscheinungsbild des Inhalts zu ändern. Sie werden an die Präsentation gebunden, die sie haben, und der grundlegende Zweck eines Themas geht im Wesentlichen verloren.
Mit Ghost bleibt jedoch der grundlegende Zweck eines Themas jederzeit erhalten.
Hinweis: Wenn Plugins für Ghost eingeführt werden, ist es in Zukunft möglich, Ghost-Designs mit Plugin-Abhängigkeiten zu erstellen. Dies ist ein weiteres Feature, das dank Ghost auf Node.js möglich wird. Wir werden immer noch in der Lage sein, verbesserte Gesamtpakete für die Benutzer verfügbar zu machen, aber die Methode dafür wird die Vorteile, die sich aus der Trennung von Inhalt und Präsentation ergeben, konsistent halten.
Die zwei sehr klar definierten Phasen, die Sie beim Erstellen eines Ghost-Themes durcharbeiten, sind:
In den nächsten Abschnitten dieser Tutorialserie erfahren Sie Schritt für Schritt, wie Sie durch diese Schritte gehen, um Ihr erstes Ghost-Thema zu erstellen. Bis dahin ist es jedoch hilfreich, ein wenig mehr über die Templatesprache zu verstehen, die Ghost-Motive unterstützt.
Ghost-Themes verwenden eine fantastische Schablonensprache namens Handlebars.js, um die Platzierung von Inhalten zu unterstützen. Handlebars ist eine Templatiersprache im eigentlichen Sinne des Begriffs, wobei es lediglich die Aufgabe ist, vorabgerufenen Inhalt an angegebenen Positionen innerhalb einer Vorlagendatei auszugeben.
Lenker zeichnet sich durch die Verwendung geschwungener Klammern (die wie Lenker aussehen) aus, um vordefinierte Tags in Vorlagen einzufügen, die beim Bereitstellen der Datei durch Inhalt ersetzt werden.
Beispiel-Tag der handlebars.js-Vorlage: Inhalt
Handlbars.js wird als a bezeichnet ohne Logik Templatesprache, weil sie nicht zum Schreiben von Funktionen, zum Halten von Variablen oder zum sonstigen Vorbereiten von Inhalt für die Anzeige verwendet werden kann. Abgesehen von dem Rendern von Inhalten, an denen Tags platziert werden, bestehen die einzigen Vorgänge darin,
Es ist die logiklose Funktionalität hinter jedem Ghost-Design, die sicherstellt, dass jedes Theme nur die Attribute der Präsentation steuert.
Ghost-Designs bestimmen auch nicht, mit welchem Inhalt die Vorlagen-Tags für die Lenkstangen ersetzt werden - das wird alles von Ghost selbst erledigt. Das Thema wird jedoch verwendet, um zu bestimmen, wie die Ausgabe sein soll markiert und gestylt.
Dank logikfreiem Templating, Markieren und Gestalten ist die Ausgabe von Ghost einfach und gewährleistet einen sehr sauberen Code in Ihren Templates. Dies macht es wiederum einfach, semantisches Markup zu schreiben, das mit den neuesten SEO- und Erreichbarkeitsstandards auf dem neuesten Stand ist.
Hier ist eine kurze "alles auf einen Blick" -Liste mit allem, was in den beiden Phasen des Entwerfens eines Ghost-Themas enthalten ist.
Was ist in einem Ghost-Thema: Templating
Styling
Jedoch folgendes ist nicht in einem Ghost-Thema enthalten:
Es kann hilfreich sein, sich den zweistufigen Entwurfsprozess als von der "SAMWYS" Prinzip oder "Stil und Markup, was Ihnen serviert wird".
Beim Entwerfen eines Ghost-Designs müssen wir nicht mit Logik- oder Datenbankabfragen arbeiten, da Ghost das alles für uns erledigt. SAMWYS erinnert uns daran, dass wir nur Template-Tags setzen, Qualitätsmerkmale schreiben und ein tolles Theme-Styling zusammenstellen müssen, das Benutzerinhalte darstellt.
Alles, was wir bisher besprochen haben, vermittelt Ihnen ein grundlegendes Verständnis von Ghost.
Von hier aus können wir mit dem eigentlichen schrittweisen Erstellen Ihres ersten Themas fortfahren.
Der nächste Teil unserer Tutorialserie beginnt mit der ersten Phase des Erstellungsprozesses. die Vorbereitungsphase. Sie erfahren genau, wie Sie die Dateistruktur Ihres Themas einrichten, Vorlagen-Tags setzen und ein Markup-Skelett schreiben.
Accentsconagua