Ghost verstehen: Stufen des Designs

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Die Themenentwicklung für Ghost ist unglaublich reibungslos, einfach und sehr leicht zu erlernen. Bevor Sie jedoch mit dem Erstellen eines tatsächlichen Ghost-Themas beginnen, ist es wichtig und hilfreich, die Rolle der Themen in der gesamten Ghost-Ökologie zu verstehen, damit Sie sie optimal gestalten können.

Der beste Weg, dies zu tun, besteht nicht darin, kopfüber in Design oder Code zu springen, sondern ein gründliches Verständnis von Ghost selbst als Grundlage zu erlangen.

In diesem ersten Teil unserer Tutorial-Reihe erhalten Sie diese Grundlage und sind dann perfekt positioniert, um mit dem Erstellen Ihres ersten Themas zu beginnen.

Was ist Ghost und für wen?

Ghost ist eine Open Source-Anwendung für die Veröffentlichung von Inhalten.

In den letzten Jahren haben sich Werkzeugs zum Veröffentlichen von Inhalten weiterentwickelt, mit denen Benutzer nahezu jede Art von Website, die sie möglicherweise benötigen, selbst verwalten können. Ob es sich um einen komplexen Online-Shop, eine Geschäftspräsentation oder ein vollwertiges CMS handelt, Benutzer können alles mit relativ wenig Erfahrung selbst erledigen.

Aber bei Ghost geht es nicht um diese komplexen Dinge. Bei Ghost geht es darum, den Fokus wieder auf eine einfache Sache zu richten: das Schreiben.

Es ist eine Plattform, die auf dem Prinzip der Einfachheit basiert. Das Hauptziel besteht darin, Autoren dabei zu helfen, mehr zu bloggen und sich weniger auf das Content-Publishing-Werkzeug zu konzentrieren, das Teil der Blogging-Gleichung ist.

Für Theme-Entwickler bedeutet dies eine Abwechslung. Während das Theming für andere Plattformen häufig von der Nachfrage der Benutzer nach Themen abhängt, die ihrer Website alle Arten vo funktionaler Komplexität hinzufügen, wird die Ghost-Plattform nur von einer Sache bestimmt. Der Slogan für Ghost sagt uns, was das ist:

Nur eine Blogging-Plattform

Da Ghost sich zu 100% auf das Bloggen konzentriert, ist Ghost: Nur für Blogger.

In diesem Sinne wird das Design von Ghost-Themen auch nur von einer Sache bestimmt: Nur vom Bloggen von Themen.

Dies mag wie offensichtliche Aussagen erscheinen, aber sie sind wichtig zu betonen, da auf einer Plattform, die sich auf das Schreiben konzentriert und von Menschen verwendet wird, die sich auf das Schreiben konzentrieren, auch Ghost-Themen mit einem Fokus auf das Schreiben entworfen werden müssen.

Ghost Theme Design Philosophie

Im Rahmen seiner Kickstarter-Kampagne sagte der Gründer von Ghost, John O'Nolan, Folgendes:

...es geht nicht nur darum, etwas zu machen, das gut aussieht, es geht darum, Autoren Werkzeuge zu geben, um das Bloggen und den Journalismus auf die nächste Ebene zu bringen.

Darin liegt die Philosophie, die Ghost-Designdesigner anwenden müssen, um den Benutzern von Ghost bestmöglich zu dienen: Stellen Sie in erster Linie sicher, dass der Inhalt eines Benutzers immer im Vordergrund steht.

Im Webdesign ist es ein gängiger Ansatz, sich auf die Grafik und das gesamte Erscheinungsbild des Designs zu konzentrieren, wobei das Styling von Typografie und Inhalten zuletzt erfolgt. In einem Ghost-Thema sollte der Inhalt jedoch niemals anderen Aspekten des Designs in den Hintergrund treten.

Als Ghost-Designdesigner sollte Ihre allererste Überlegung sein, wie Inhalte mit einem starken Schwerpunkt auf Typografie angezeigt werden, und der Rest des Designs des Themas sollte sich zur Unterstützung entfalten.

Sobald wir mit dem Erstellen eines tatsächlichen Themas beginnen, erhalten Sie später in der Tutorial-Reihe weitere Einblicke in die Funktionsweise. Bevor wir dies jedoch tun können, müssen wir mehr über die Ghost-Plattform selbst erfahren.

Die Geisterplattform

Es gibt einige grundlegende Aspekte von Ghost, die sich von anderen Plattformen unterscheiden, an die Sie möglicherweise gewöhnt sind.

Eine JavaScript-Anwendung, die auf Node.js basiert

Im Gegensatz zu den meisten derzeit beliebten Anwendungen zum Erstellen von Websites, die auf PHP basieren, basiert Ghost auf Node.js.

Node.js ist eine Softwareplattform, die JavaScript im Backend interpretiert und ausführt. Sie können auf Nodejs.org mehr darüber erfahren, müssen es aber wirklich nicht. Um ein Ghost-Thema zu erstellen, sind keine gründlichen Kenntnisse von Node.js erforderlich. In dieser Lernserie wird alles behandelt, was Sie wissen müssen.

Viele Menschen betrachten Node.js aus mehreren Gründen als den Weg der Zukunft. Geschwindigkeit ist einer von ihnen. Es wurde gezeigt, dass Node.js in zahlreichen Benchmarking-Tests deutlich schneller als PHP ist. Es ist eine Schlüsselkomponente dafür, warum Ghost so rasant schnell läuft.

Um an einem Ghost-Thema in einer lokalen Umgebung zu arbeiten, müssen Sie Node.js lokal installieren. Glücklicherweise ist dies ein sehr schneller und einfacher Vorgang. Wir verweisen Sie auf Anweisungen dazu, bevor wir im zweiten Teil dieser Lernserie mit dem Erstellen eines Themas beginnen.

Hinweis: Sie sollten sich bewusst sein, dass Sie kurzfristig möglicherweise auf wachsende Probleme bei der Bereitstellung Ihrer Ghost-Sites stoßen. Nahezu jeder Host auf der Welt ist derzeit für die Aufnahme von PHP-Anwendungen konfiguriert. Da Node.js jedoch noch relativ neu ist, ist das Setup für "Drucktasten" auf Live-Domains, an das Sie möglicherweise mit anderen Anwendungen gewöhnt sind, noch nicht ganz fertig. Eine Reihe von Hosts bauen bereits eine neue Infrastruktur speziell für Ghost auf. Daher ist es nur eine kurze Wartezeit, bis die Bereitstellung von Ghost genauso einfach wie jede andere Anwendung ist, wenn nicht sogar einfacher. Darüber hinaus können Sie ab November den hauseigenen Hosting-Service von Ghost nutzen.

Benutzergesteuerte Einstellungen für das Theming verfügbar

Ein weiterer Aspekt von Ghost, der sich möglicherweise von anderen Plattformen unterscheidet, für die Sie in der Vergangenheit ein Thema erstellt haben, betrifft Einstellungen, die Benutzer im Back-End steuern können.

Die benutzergesteuerten Einstellungen von Ghost bestimmen einen großen Prozentsatz dessen, was am Front-End ausgegeben werden kann, was wiederum die Art des für das Theming verfügbaren Inhalts beeinflusst.

Für Ghost sind noch viele neue Dinge geplant, aber der Ansatz, den wir in dieser Tutorial-Reihe verfolgen werden, besteht darin, mit den Einstellungen zu arbeiten, die jetzt verwendet werden können.

Bestimmte Einstellungen für zukünftige Ghost-Funktionen sind derzeit vorhanden. Zum Beispiel gibt es eine Admin-Benutzeroberfläche zum Erstellen von Navigationsmenüs auf dem Weg sowie vorläufige Funktionen zum Ausgeben dieser Menüs im Ghost-Kern. Wir wissen jedoch nicht genau, wie diese Dinge funktionieren werden (und werden es nicht tun, bis sie veröffentlicht werden), daher werden wir in dieser Tutorial-Reihe kein Design für sie erstellen. Wir werden das für den Tag belassen, an dem das Ghost-Team sie tatsächlich veröffentlicht.

Dies bringt uns zu dem, was Benutzer derzeit im Back-End von Ghost steuern können. Hierbei handelt es sich um Einstellungen, die in zwei Bereiche unterteilt sind.

Admin-Einstellungen
Steuerelemente für die Nachbearbeitung

Schauen wir uns jetzt jeden dieser Bereiche an.

Admin-Einstellungen

Die Administratoreinstellungen von Ghost sind in zwei Registerkarten unterteilt: Allgemeine Einstellungen und Benutzereinstellungen. Sowohl die Registerkarten "Allgemein" als auch "Benutzereinstellungen" steuern den Inhalt, den wir in unseren Themen gestalten können.

Auf der Registerkarte Einstellungen > Allgemein finden Sie die folgenden Elemente, die überall in einem Ghost-Thema verwendet werden können:

Blog Titel
Blog Beschreibung
Blog-Logo
Blog-Cover

Auf der Registerkarte Einstellungen > Benutzer erhalten Sie Folgendes, das nur in der Ansicht eines einzelnen Beitrags verwendet werden kann:

Titelbild
Profilbild
Name
Email
Ort
Webseite
Bio

Post-Editor-Steuerelemente

Die Nachbearbeitungsoberfläche von Ghost ist sicherlich eine der überzeugendsten Funktionen. Es wurde von Autoren für Autoren entworfen und bietet eine fantastische Umgebung für die Erstellung von Inhalten.

Der Hauptkontrast zu anderen Bearbeitungsumgebungen besteht darin, wie sauber und minimalistisch es gestaltet ist. Das Formatieren von Symbolleisten, Meta-Feldern oder anderen benutzerdefinierten Feldern ist unübersichtlich. Der überwiegende Teil des Bildschirmbereichs ist ausschließlich dem Schreibbereich gewidmet.

Der für Themendesigner relevanteste Aspekt des Post-Bearbeitungsbereichs ist das Rückgrat der Ghost-Post-Formatierung: Markdown.

Anstatt Styling-Schaltflächen oder unformatiertes HTML zu verwenden, wird der Inhalt von Ghost mit Markdown formatiert, einer einfachen Inline-Syntax, die bedeutet, dass Autoren während der Erstellung von Inhalten zu keiner Zeit pausieren müssen. Aufgrund dieses vereinfachten Ansatzes gibt es eine relativ kurze Liste von Dingen, die vom Post-Editor gesteuert werden müssen:

Normaler Text
H1 bis H6 Tags
Verbindungsstatus
Inline-Code
Block Zitate
Bilder
Listen
Horizontale Regeln

Hinweis: Markdown akzeptiert auch unformatiertes HTML. Dies bedeutet, dass Videos von Diensten wie YouTube einfach per Iframe-Code zum Kopieren und Einfügen eingebettet werden können. Aus diesem Grund ist es auch eine gute Idee, das Styling von Iframes auch in Ihren Themen zu berücksichtigen.

Ghost-Themen steuern nur die Präsentation

Ghost basiert auf einer klaren Trennung von Präsentation und Inhalt.

Ghost selbst übernimmt die gesamte Inhaltsgenerierung und alle zusätzlichen erforderlichen Funktionen werden von Plugins übernommen. Damit bleibt das Ghost-Thema der reinen Präsentation gewidmet.

Die Trennung von Inhalt und Präsentation ist ein nicht neues Prinzip des Webdesigns. Die Grundidee ist, dass, wenn Inhalt und Präsentation in unabhängige Einheiten getrennt werden, eine geändert werden kann, ohne die andere zu ändern. Mit anderen Worten, ein Thema kann gegen ein anderes ausgetauscht werden, ohne dass der Benutzer seinen Inhalt in irgendeiner Weise ändern muss.

Wenn Themen Funktionen enthalten, die nicht rein präsentativ sind, kann ein Benutzer sein Thema nicht mehr ändern, ohne auch das Aussehen seines Inhalts zu ändern. Sie werden an die Präsentation gebunden, die sie haben, und der grundlegende Zweck eines Themas geht im Wesentlichen verloren.

Bei Ghost bleibt der grundlegende Zweck eines Themas jedoch jederzeit erhalten.

Hinweis: In Zukunft können mit der Einführung von Plugins für Ghost Ghost-Designs mit Plugin-Abhängigkeiten erstellt werden. Dies ist eine weitere Funktion, die dank Ghost auf Node.js möglich wird. Wir werden weiterhin verbesserte Gesamtpakete sehen können, die den Benutzern zur Verfügung stehen, aber die Methode dafür wird die Vorteile, die sich aus einer Trennung von Inhalt und Präsentation ergeben, konsequent bewahren.

Die zwei Stufen des Ghost Theme Design

Die zwei sehr klar definierten Phasen, die Sie beim Erstellen eines Ghost-Themas durchlaufen, sind:

Erstellen von Vorlagendateien - Schreiben von Vorlagendateien mit Platzierung und Markup von Vorlagen-Tags
Styling - Hinzufügen von Design und Reaktionsfähigkeit, hauptsächlich durch Schreiben von CSS

In den nächsten Abschnitten dieser Tutorial-Reihe finden Sie schrittweise Anweisungen, wie Sie diese Phasen durchlaufen, um Ihr erstes Ghost-Thema zu erstellen. Vorher ist es jedoch hilfreich, etwas mehr über die Vorlagensprache zu verstehen, die Ghost-Themen unterstützt.

Einführung in das logiklose Templating mit Handlebars.js

Ghost-Themen verwenden eine fantastische Vorlagensprache namens Handlebars.js, um die Platzierung von Inhalten zu erleichtern. Lenker ist eine Vorlagensprache im eigentlichen Sinne des Wortes, bei der es lediglich darum geht, vorab abgerufenen Inhalt an bestimmten Positionen in einer Vorlagendatei auszugeben.

Der Lenker zeichnet sich durch die Verwendung von geschweiften Klammern (die wie Lenker aussehen) aus, um vordefinierte Tags zu Vorlagen hinzuzufügen, die beim Bereitstellen der Datei durch Inhalt ersetzt werden.

Beispiel für das Template-Tag handlebars.js: {{content}}

Handlbars.js wird als logiklose Vorlagensprache bezeichnet, da sie nicht zum Schreiben von Funktionen, zum Halten von Variablen oder zum sonstigen Vorbereiten von Inhalten für die Anzeige verwendet werden kann. Abgesehen vom Rendern von Inhalten, in denen Tags platziert sind, besteht die einzige Operation darin, einfach:

Überprüfen Sie, ob ein bestimmter Inhalt vorhanden ist oder nicht, z. B. ein Logo
Iterieren Sie eine Reihe von Inhalten, die mehrere Datensätze enthalten, z. B. eine Gruppe der neuesten Beiträge

Es ist die logiklose Funktionalität hinter jedem Ghost-Thema, die sicherstellt, dass jedes Thema nur die Attribute der Präsentation steuert.

Ghost-Themen bestimmen auch nicht, durch welchen Inhalt die Lenker-Vorlagen-Tags ersetzt werden - das alles wird von Ghost selbst behandelt. Das Thema wird jedoch verwendet, um zu bestimmen, wie die Ausgabe markiert und gestaltet wird.

Dank logikloser Vorlagen kann die Ausgabe von Ghost problemlos markiert und gestaltet werden, um einen sehr sauberen Code in Ihren Vorlagen zu gewährleisten. Dies macht es wiederum einfach, semantisches Markup zu schreiben, das mit den neuesten SEO- und Barrierefreiheitsstandards auf dem neuesten Stand ist.

Komponenten eines Ghost-Themas

Hier ist eine kurze "auf einen Blick"-Liste von allem, was in den beiden Phasen des Entwerfens eines Ghost-Themas enthalten ist und nicht enthalten ist.

Was ist in einem Ghost-Thema: Templating

Platzierung von Lenker-Tags in Vorlagendateien
Semantisches Markup dieser Vorlagen-Tags

Styling

Typografie
Layoutsteuerung
Farbschema & Gesamtdesign
Empfänglichkeit

Folgendes ist jedoch in einem Ghost-Thema nicht enthalten:

Logik
Funktionserweiterungen
Benutzerdefinierte Steuerelemente für den Administratorbereich
Geänderte Datenbankabfragen

Es kann hilfreich sein, sich den zweistufigen Entwurfsprozess so vorzustellen, dass er nach dem "SAMWYS"-Prinzip oder "Style And Markup What You're Served" zusammengefasst wird.

Beim Entwerfen eines Ghost-Themas müssen wir nicht mit Logik- oder Datenbankabfragen arbeiten, da Ghost all das für uns erledigt. SAMWYS erinnert uns daran, dass wir nur Vorlagen-Tags platzieren, Qualitätsmarkups schreiben und ein großartiges Design für Themen zusammenstellen müssen, das Benutzerinhalte präsentiert.

Weiter kommt

Alles, was wir bisher besprochen haben, vermittelt Ihnen ein grundlegendes Verständnis von Ghost.

Von hier aus können wir Schritt für Schritt mit der Erstellung Ihres ersten Themas fortfahren.

Der nächste Teil unserer Tutorial-Reihe beginnt mit der ersten Phase des Themenerstellungsprozesses. die Template-Phase. Sie erfahren genau, wie Sie die Dateistruktur Ihres Themas einrichten, Vorlagen-Tags platzieren und ein Markup-Skelett schreiben.