Organisieren von Ghost Theme-Dateien und -Ordnern

() translation by (you can also view the original English article)

Dies ist der zweite Teil unserer Tutorial-Reihe zum Thema Ghost-Design. Alles ab hier setzt voraus, dass Sie ein grundlegendes Verständnis von Ghost haben. Wenn nicht, nehmen Sie sich bitte die Zeit, Ghost verstehen: Stages of Design zu lesen, bevor Sie fortfahren.

Wie wir im vorherigen Teil besprochen haben, besteht das Entwerfen eines Themas für Ghost in zwei Schritten: Erstellen von Vorlagen und Styling.

In diesem Tutorial konzentrieren wir uns auf die erste Phase, indem wir Sie Schritt für Schritt durch den Prozess der Einrichtung der Vorlagen Ihres Themes führen. Sie erfahren mehr über die Vorlagendatei und das Teilsystem von Ghost, seine Handlebars-Vorlagen-Tags und wie Sie das Markup-Skelett Ihres Themes schreiben.

Hinweis: Dieses Tutorial wird auf einem Windows-Rechner durchgeführt, also führen Sie bitte die entsprechenden Schritte auf Ihrem bevorzugten Betriebssystem durch.

Sie müssen auch Ihren bevorzugten Code-Editor zur Hand haben; Dieses Tutorial wird in Sublime Text 2 durchgeführt.

Ghost lokal installieren

Als erstes müssen Sie Ghost auf Ihrem lokalen Computer installieren. Das ist ganz einfach, solange Sie die erforderlichen Voraussetzungen auf Ihrem System haben. Es ist nicht erforderlich, XAMPP oder das Äquivalente auszuführen, um Ghost auf Ihrem lokalen Computer auszuführen, da es tatsächlich selbst ausgeführt wird.

Hinweis: Wenn Sie gelegentlich ein neues Design erstellen, Ghost neu starten und dann das neue Design in Admin auswählen, wird möglicherweise immer noch CSS aus dem vorherigen Design geladen. Wenn dieses Problem beim Abschließen dieser Tutorial-Reihe oder zu einem beliebigen Zeitpunkt beim Erstellen eines neuen Designs auftritt, müssen Sie Ghost nur noch einmal neu starten. Ein zusätzlicher Neustart sollte den Cache leeren, damit das CSS des neuen Themes sichtbar wird.

Sobald Sie die Anweisungen befolgt und Ghost auf Ihrem lokalen Computer installiert haben (und überprüft haben, dass alles ordnungsgemäß funktioniert), können Sie mit der Erstellung Ihres Ghost-Designs beginnen, indem Sie die folgenden Schritte ausführen.

Starten Sie ein neues leeres Thema

Um zu beginnen, erstellen und aktivieren wir ein leeres Ghost-Theme mit dem absoluten Minimum an erforderlichen Dateien.

Schritt 1:

Navigieren Sie im Windows Explorer (oder gleichwertig) zu dem Ordner, in dem Sie Ghost installiert haben. Sie sollten die folgende Struktur in Ihrem Ghost-Hauptordner sehen:

Schritt 2:

Navigieren Sie in den Ordner "content > themes", wo Sie den Ordner des Standard-Themes "casper" sehen.

Schritt 3:

Erstellen Sie an diesem Ort einen neuen Ordner und benennen Sie ihn, wie Sie Ihr Thema nennen möchten. In diesem Tutorial erstellen wir ein Thema namens "UberTheme" und das ist der Name des Ordners, den wir erstellen:

Fügen Sie die erforderlichen Dateien hinzu

Wir fügen jetzt die erforderlichen Vorlagendateien hinzu, ohne dass Sie Fehler erhalten, wenn Sie versuchen, Ihr neues Design zu aktivieren.

Die beiden Dateien, die für die Ausführung eines Ghost-Themes unbedingt erforderlich sind, sind:

index.hbs: steuert die Anzeige Ihrer neuesten Beiträge / Homepage
post.hbs: steuert die Anzeige einzelner Beiträge, die einzeln angezeigt werden

Schritt 1:

Erstellen Sie in Ihrem bevorzugten Code-Editor eine neue Datei und speichern Sie sie dann in Ihrem "UberTheme"-Ordner als "index.hbs". Sie müssen der Datei noch keinen Code hinzufügen, sodass die von Ihnen erstellte Datei leer ist.

Schritt 2:

Erstellen Sie eine zweite neue Datei und speichern Sie diese ebenfalls in Ihrem Ordner "UberTheme", diesmal als "post.hbs". Wie die Datei "index.hbs", die Sie im vorherigen Schritt erstellt haben, ist auch diese Datei leer/leer.

Das Innere deines "UberTheme"-Ordners sollte nun so aussehen:

Tour-Theme aktivieren

Wir müssen Ghost jetzt starten / neu starten, damit "UberTheme" in der Liste der verfügbaren Themen im Admin-Bereich angezeigt wird, damit wir es auswählen und aktivieren können.

Schritt 1:

Wenn Ghost bereits ausgeführt wird, fahren Sie es herunter, indem Sie STRG+C in Ihrem Terminal drücken. Geben Sie dann, wenn Sie dazu aufgefordert werden, "y" gefolgt von EINGABE ein.

Schritt 2:

Starten / starten Sie Ghost neu, indem Sie "npm start" in Ihr Terminal eingeben.

Tipp: Wenn Sie nicht sicher sind, wie Sie das Terminal öffnen sollen, damit Sie den obigen Schritt ausführen können, navigieren Sie zu Ihrem "Ghost"-Ordner, halten Sie die UMSCHALTTASTE gedrückt, klicken Sie mit der rechten Maustaste, um das Windows-Optionsmenü aufzurufen, und klicken Sie dann mit der linken Maustaste. Klicken Sie auf "Befehlsfenster hier öffnen".

Hinweis: Bei den obigen Schritten wird davon ausgegangen, dass Sie die Anleitung zur Installation von Ghost besucht haben, um Anweisungen zur Installation und Ausführung von Ghost zu erhalten.

Schritt 3:

Besuchen Sie Ihr Ghost-Administrationsfenster (melden Sie sich bei Bedarf an), das sich normalerweise unter http://localhost:2368/ghost befindet

Schritt 4:

Klicken Sie im oberen Menü Ihres Admin-Panels auf die Schaltfläche "SETTINGS":

Dadurch gelangen Sie zum Abschnitt "SETTINGS > General" Ihres Admin-Panels.

Schritt 5:

Scrollen Sie zum Ende der Seite nach unten, suchen und erweitern Sie die Dropdown-Liste "Thema". Sie sollten "UberTheme" als eine der Optionen sehen:

Schritt 6:

Wählen Sie "UberTheme" aus der Liste aus und klicken Sie oben rechts auf der Seite auf die blaue Schaltfläche "SAVE".

Schritt 7:

Rufen Sie in Ihrem Browser das Frontend Ihrer Ghost-Installation auf, das sich normalerweise unter http://localhost:2368/ befindet.

Ergebnis: Sie sollten nur ein leeres weißes Browserfenster sehen.

Wenn Sie kein leeres weißes Browserfenster sehen und stattdessen etwas wie das Bild unten sehen, gehen Sie bitte die obigen Schritte erneut durch und stellen Sie sicher, dass Sie Ihre Vorlagendateien richtig benannt haben:

Vervollständigen Sie die Datei- und Ordnerstruktur

Die einzigen unbedingt benötigten Dateien sind die im letzten Abschnitt beschriebenen Vorlagendateien "index.hbs" und "post.hbs".

Es gibt jedoch zwei weitere Dateien, die Sie in so ziemlich jedem Thema verwenden möchten, auch wenn sie nicht unbedingt erforderlich sind, also fügen wir diese jetzt hinzu. Wir organisieren auch eine Ordnerstruktur, in der alle zusätzlichen Dateien gespeichert werden, die später zu Ihrem Thema hinzugefügt werden.

Theme-Wrapper-Datei

Es gibt nur eine weitere Hauptvorlagendatei, die Sie im Stammordner Ihres Themes benötigen werden, und das ist die Datei "default.hbs".

Diese Datei erstellt den "Wrapper"-Code für Ihr Theme, d. h. den Kopf- und Fußcode, der um jede Seite einer Site mit Ihrem Theme gewickelt wird. Es enthält Ihre Standard-Abschnitte <html>, <head> und <body> sowie einige Template-Tags, die wichtigen Ghost-Code ausgeben.

Was tatsächlich in diese Datei geschrieben werden muss, werden wir später genauer behandeln. Lassen Sie uns zunächst nur die leere Datei selbst erstellen.

Schritt 1:

Erstellen Sie in Ihrem bevorzugten Code-Editor eine neue Datei und speichern Sie sie in Ihrem Ordner "UberTheme" als "default.hbs".

Erstellen Sie Ihren Teileordner

Mit Handlebars-Vorlagen haben Sie die Möglichkeit, sogenannte "partielle" Vorlagendateien zu erstellen. Mit diesen Teilvorlagendateien können Sie Ihr Thema in kleinere Komponenten aufteilen, um eine modularere und übersichtlichere Struktur zu erhalten.

Beispielsweise möchten Sie Ihr Layout möglicherweise in die Abschnitte "header", "main" und "footer" aufteilen, wobei der Code für jeden in einer eigenen Teildatei enthalten ist. Sie werden diesen Vorgang später in der Praxis sehen. Im Moment erstellen wir nur den Ordner, in dem diese "partial" Dateien gespeichert werden.

Schritt 1:

Navigieren Sie im Windows Explorer (oder gleichwertig) zu Ihrem Ordner "UberTheme".

Schritt 2:

Erstellen Sie einen neuen Ordner und nennen Sie ihn "partials".

Hinweis: Es ist wichtig, sicherzustellen, dass dieser Ordner richtig benannt ist und sich im Stammordner des Themes befindet, da Ghost sonst Ihre teilweisen Vorlagendateien nicht finden kann.

Assets-Ordnerstruktur

Wenn wir die Styling-Phase erreichen, werden alle Ihre Styling-bezogenen Dateien in Ihren "assets"-Ordner verschoben, einschließlich CSS-, JS-, Schriftart- und Bilddateien.

Hinweis: Sie müssen den Ordner nicht "assets" benennen - Sie können ihn tatsächlich beliebig benennen. In diesem Tutorial folgen wir einfach den Best Practices-Richtlinien von Ghost.

Schritt 1:

Navigieren Sie im Windows Explorer (oder gleichwertig) zu Ihrem Ordner "UberTheme".

Schritt 2:

Erstellen Sie einen neuen Ordner und nennen Sie ihn "assets".

Schritt 3:

Navigieren Sie in Ihren Ordner "assets".

Schritt 4:

Erstellen Sie einen neuen Ordner und nennen Sie ihn "css".

Schritt 5:

Erstellen Sie einen neuen Ordner und nennen Sie ihn "fonts".

Schritt 6:

Erstellen Sie einen neuen Ordner und nennen Sie ihn "images".

Schritt 7:

Erstellen Sie einen neuen Ordner und nennen Sie ihn "js".

Ihre Themendatei und Ordnerstruktur sollte jetzt so aussehen:

Fügen Sie Ihre Stylesheet-Datei hinzu

Technisch gesehen könnte das Hinzufügen Ihrer Stylesheet-Datei als Teil des Styling-Prozesses bezeichnet werden. Wir werden jedoch in der nächsten Phase des Tutorials den Abschnitt <head> schreiben. Als Teil davon möchten wir das Stylesheet Ihres Themas verknüpfen und überprüfen, ob es geladen wird.

Zu diesem Zweck erstellen wir eine Stylesheet-Datei, die Ihrem Thema eine Hintergrundfarbe hinzufügt, damit wir anschließend sicherstellen können, dass es in Ihrem <head>-Abschnitt korrekt verknüpft ist.

Schritt 1:

Erstellen Sie in Ihrem bevorzugten Code-Editor eine neue Datei.

Schritt 2:

Fügen Sie der Datei das folgende CSS hinzu:

1	body { background-color: #F0F0F0; }

Schritt 3:

Speichern Sie die Datei in Ihrem Ordner "UberTheme > assets > css" als "style.css".

Schreiben der Datei default.hbs

Wir werden nun dazu übergehen, den eigentlichen Templating-Code Ihres Themes zu schreiben, beginnend mit der Datei "default.hbs". (Siehe oben für eine Zusammenfassung, wozu diese Datei dient).

Hinweis: Um zwischen HTML-Tags und Handlebars-Template-Tags zu unterscheiden, verwenden wir entweder den Begriff "HTML-Tags" oder "Template-Tags", damit Sie wissen, welcher Typ gemeint ist.

Schritt 1:

Öffnen Sie in Ihrem bevorzugten Code-Editor Ihre Datei "default.hbs" aus dem Stammordner des Themas, d. H. "UberTheme".

Schritt 2:

Fügen Sie den folgenden Code hinzu:

<!DOCTYPE html>
<html>
<head>
    {{! Document Settings }}
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    {{! Responsive Meta Tags }}
    <meta name="HandheldFriendly" content="True" />
    <meta name="MobileOptimized" content="320" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
</head>
<body>

</body>
</html>

Alles, was wir hier getan haben, ist, die wesentlichen Doctype-, HTML-, Head- und Body-Tags hinzuzufügen. Wir haben auch einige grundlegende Meta-Tags hinzugefügt, um den Zeichensatz festzulegen, Chrome Frame (sofern verfügbar) oder den Edge-Modus (höchste verfügbare) für IE zu aktivieren und unsere responsive Anzeige zu initialisieren.

Hinweis: Im obigen Code sehen Sie auch zwei Beispiele dafür, wie Kommentare in Handlebars-Dateien geschrieben werden können (die Kommentare "Dokumenteinstellungen" und "Responsive Meta-Tags"). Kommentare werden unterschieden, wenn unmittelbar nach dem Öffnen von zwei Sätzen geschweifter Klammern ein Ausrufezeichen hinzugefügt wird, wobei das Ende des Kommentars durch zwei schließende Sätze geschweifter Klammern gekennzeichnet ist. Hier ist ein weiteres Beispiel:

1	{{! Your comment here }}

Schritt 3:

Fügen Sie das folgende Snippet direkt über dem {{! Responsive Meta-Tags }}-Code:

1	{{! Page Meta }}
2	<title>{{meta_title}}</title>
3	<meta name="description" content="{{meta_description}}" />

Dadurch werden seitenspezifische Meta-HTML-Tags hinzugefügt.

Schritt 4:

Fügen Sie das folgende Snippet über dem {{! Responsive Meta Tags }}-Code und direkt unter den Seiten-Meta-HTML-Tag-Zeilen, die Sie zuvor hinzugefügt haben:

1	{{! Styles }}
2	<link rel="stylesheet" type="text/css" href="/assets/css/style.css" />

Dadurch wird der externe Link zu Ihrem Stylesheet hinzugefügt.

Hinweis: Sie benötigen keinen vollständigen Pfad zu Ihrem Stylesheet, sondern nur einen Pfad relativ zum Stammordner Ihres Themes.

Schritt 5:

Fügen Sie über dem schließenden HTML-Tag </head> Folgendes hinzu:

1	{{ghost_head}}

Ghost verwendet dieses Tag, um wichtige Stil- und Metadaten im Kopfbereich auszugeben.

Hinweis: Für diejenigen mit einem WordPress-Themenhintergrund können Sie dies mit der Aufnahme von wp_head() in alle Themenbereiche <head> vergleichen.

Schritt 6:

Ersetzen Sie das HTML-Tag <body> durch den folgenden Code:

1	<body class="{{body_class}}">

Dieses Template-Tag gibt einen anderen CSS-Klassennamen aus, je nachdem, welcher Bereich der Site geladen wird:

Auf der Homepage: "home-template"
Auf Seiten älterer Beiträge, die über Paginierung erreicht werden: "archive-template"
Bei einzelnen Beiträgen: "post-template"

Schritt 7:

Fügen Sie unter dem HTML-Tag <body class="{{body_class}}">, das Sie in Schritt 6 hinzugefügt haben, und direkt über dem HTML-Tag </body> den folgenden Code hinzu:

1	<div class="wrapper_uber">
2	{{{body}}}
3	</div>

Überall dort, wo Sie das Tag {{{body}}} in Ihrer "default.hbs" -Datei platzieren, wird Ihr Hauptinhalt angezeigt, d. H. Ihre letzte Beitragsliste oder einzelne Beitragsansicht.

Wir haben auch ein div mit dem Klassennamen wrapper_uber hinzugefügt, das wir später als Wrapper formatieren werden, um die Breite und andere Stile des Hauptinhaltsbereichs des Themas zu steuern.

Hinweis: Alle CSS-Klassen sollten Namespaces enthalten, um sicherzustellen, dass sie nicht mit anderen Stilen kollidieren, die die Site möglicherweise lädt. In diesem Fall fügen wir alle Klassennamen mit _uber an.

Wichtig: Es ist sehr wichtig, dass das {{{body}}}-Tag von dreifachen geschweiften Klammern umgeben ist, da dies verhindert, dass die hier zurückgegebenen Werte maskiert werden. Wenn Sie hier keine dreifachen geschweiften Klammern verwenden, wird anstelle des tatsächlichen Inhalts eine Menge HTML auf Ihrem Bildschirm angezeigt.

Schritt 8:

Fügen Sie direkt über dem HTML-Tag </body> den folgenden Code hinzu:

1	{{ghost_foot}}

Ähnlich wie das oben hinzugefügte {{ghost_head}}-Tag muss dieses {{ghost_foot}}-Template-Tag eingebunden werden, um wichtige Skripte und Daten auszugeben.

Schritt 9:

Speichern Sie die Datei "default.hbs".

Ihre Datei "default.hbs" sollte nun so aussehen:

<!DOCTYPE html>
<html>
<head>
    {{! Document Settings }}
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    {{! Page Meta }}
    <title>{{meta_title}}</title>
    <meta name="description" content="{{meta_description}}" />
    {{! Styles }}
    <link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
    {{! Responsive Meta Tags }}
    <meta name="HandheldFriendly" content="True" />
    <meta name="MobileOptimized" content="320" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {{ghost_head}}
</head>
<body class="{{body_class}}">
    <div class="wrapper_uber">
    {{{body}}}
    </div>
    {{ghost_foot}}
</body>
</html>

Testen Ihrer "default.hbs" -Datei

Jetzt können Sie Ihre Vorlagendatei "default.hbs" testen und sicherstellen, dass alles korrekt ist.

Dazu müssen Sie Ghost nur mitteilen, dass die Vorlage "default.hbs" geladen werden soll.

Schritt 1:

Öffnen Sie sowohl Ihre "index.hbs" - als auch Ihre "post.hbs" -Dateien in Ihrem Code-Editor.

Schritt 2:

Fügen Sie jeweils den folgenden Code hinzu und speichern Sie dann:

1	{{!< default}}

Wenn Ghost das Tag {{!< default}} sieht, weiß es, dass Sie die Seite in den Code aus der Vorlage "default.hbs" einschließen möchten.

Schritt 3:

Um nun Ihre Datei "default.hbs" zu testen, gehen Sie zurück zum Frontend Ihrer Ghost-Site, die sich normalerweise unter http://localhost:2368/ghost befindet, und aktualisieren Sie die Seite.

Schritt 4:

Wo zuvor nur ein leeres weißes Browserfenster angezeigt wurde, sollte jetzt die Hintergrundfarbe des Fensters in Hellgrau umgewandelt werden.

Wenn Sie dies sehen, haben Sie überprüft, ob Ihr Stylesheet ordnungsgemäß geladen wird.

Wenn das Browserfenster immer noch weiß ist, überprüfen Sie, ob der Speicherort und der Name Ihres Stylesheets in der <link>-Zeile, die Sie zu Ihrem <head>-Abschnitt hinzugefügt haben, richtig eingegeben wurden.

Schritt 5:

Verwenden Sie Ihren Browser, um die Seitenquelle anzuzeigen. Wenn es so aussieht, haben Sie Ihre Datei "default.hbs" erfolgreich erstellt:

<!DOCTYPE html>
<html>
<head>
    
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <title>Ghost</title>
    <meta name="description" content="Just a blogging platform." />
    
    <link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
    
    <meta name="HandheldFriendly" content="True" />
    <meta name="MobileOptimized" content="320" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="generator" content="Ghost 0.3" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss/">
</head>
<body class="home-template">
    <div class="wrapper_uber">
    
    </div>
    <script src="/shared/vendor/jquery/jquery.js"></script>
</body>
</html>

Hinweis: Sie werden möglicherweise feststellen, dass Ihr Titel- und Metabeschreibungsinhalt anders angezeigt wird, wenn Sie Ihre Seitenquelle anzeigen. Wenn ja, ist das völlig normal, da die Daten in diesen Feldern aus dem Blog-Titel und der Blog-Beschreibung stammen, die auf der Ghost-Admin-Seite "Einstellungen > Allgemein" eingegeben wurden.

Im Anschluss

Obwohl dies das Ende des zweiten Teils ist, sind wir noch nicht mit der Vorlagenphase zum Erstellen Ihres Ghost-Designs fertig.

Wir sind jedoch bereit, einige Inhalte hinzuzufügen, damit diese auf einer Seite angezeigt werden können und wir die Einrichtung unserer Vorlagen im weiteren Verlauf weiter testen können.

Die nächste Stufe unserer Tutorial-Reihe wird fortgesetzt und schließt den Templating-Prozess ab. Sie erfahren, wie Sie Vorlagen-Tags und Markup hinzufügen, die drei Hauptvorlagendateien Ihres Designs fertigstellen und die Vorlagendateien hinzufügen, die eine gemeinsame Kopf- und Fußzeile in Ihrem Design platzieren. Am Ende des nächsten Teils ist der Vorlagenprozess zum Erstellen Ihres Themes abgeschlossen.